Apply custom style to `.datetimepicker-input`

This commit is contained in:
Christopher C. Wells 2020-01-27 20:40:52 -08:00 committed by Christopher Charbonneau Wells
parent f725dd12f6
commit 475b7abf78
4 changed files with 17 additions and 20 deletions

View File

@ -23,6 +23,7 @@ BabyBuddy.DatetimePicker = function ($, moment) {
return {
init: function (element, options) {
var defaultOptions = {
allowInputToggle: true,
buttons: { showToday: true, showClose: true },
defaultDate: 'now',
format: 'L LT',

View File

@ -34,3 +34,10 @@
.bootstrap-datetimepicker-widget {
color: $gray-400;
}
.datetimepicker-input[readonly] {
background: none;
border: 0;
color: $white;
font-weight: bold;
}

View File

@ -18,16 +18,16 @@
</label>
</div>
{% elif field|field_type == "datetimefield" or field|field_type == "datefield" %}
<div class="input-group date" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
<div class="input-group-prepend" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
{% if field.errors %}
{{ field|add_class:"form-control is-invalid" }}
{% else %}
{{ field|add_class:"form-control" }}
{% endif %}
<div class="input-group" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
<div class="input-group-prepend" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
{% if field.errors %}
{{ field|add_class:"datetimepicker-input form-control is-invalid" }}
{% else %}
{{ field|add_class:"datetimepicker-input form-control" }}
{% endif %}
</div>
{% elif 'choice' in field|field_type %}
{% if field.errors %}
{{ field|add_class:"custom-select is-invalid" }}

View File

@ -62,7 +62,6 @@ class ChildForm(forms.ModelForm):
widgets = {
'birth_date': forms.DateInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_date',
}),
}
@ -95,7 +94,6 @@ class DiaperChangeForm(forms.ModelForm):
widgets = {
'time': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_time',
}),
}
@ -112,12 +110,10 @@ class FeedingForm(forms.ModelForm):
widgets = {
'start': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_start',
}),
'end': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_end',
}),
}
@ -155,12 +151,10 @@ class SleepForm(forms.ModelForm):
widgets = {
'start': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_start',
}),
'end': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_end',
}),
}
@ -187,7 +181,6 @@ class TemperatureForm(forms.ModelForm):
widgets = {
'time': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_time',
}),
}
@ -204,7 +197,6 @@ class TimerForm(forms.ModelForm):
widgets = {
'start': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_start',
})
}
@ -227,12 +219,10 @@ class TummyTimeForm(forms.ModelForm):
widgets = {
'start': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_start',
}),
'end': forms.DateTimeInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_end',
}),
}
@ -259,7 +249,6 @@ class WeightForm(forms.ModelForm):
widgets = {
'date': forms.DateInput(attrs={
'readonly': 'readonly',
'class': 'datetimepicker-input',
'data-target': '#datetimepicker_date',
}),
}