CODEWITHSUNDEEP
djangotwitter-bootstrapdatetimepickerdjango-crispy-forms
James
James

Reputation: 93

How to add datepicker and timepicker to Django forms.SplitDateTimeField?

I have a form that splits the date and time from a datetime field in the model.

class MyForm(forms.ModelForm):

    class Meta:
        model   = MyModel
        fields  = ('name', 'description', 'start', 'end',)
        widgets = {
            'start': forms.SplitDateTimeWidget(),
            'end': forms.SplitDateTimeWidget(),
            }

How can I add a datepicker and timepicker to each separate input box that is rendered?

Setting:

'start': forms.SplitDateTimeWidget(attrs={'type': 'date'})

makes both inputs datepicker but I need the second one to be a timepicker..

I am using Django 2.0, bootstrap and crispy forms

Upvotes: 2

Views: 4087

Answers (1)

Lemayzeur
Lemayzeur

Reputation: 8525

forms.SplitDateTimeWidget() renders an Html input that may contain some attributes that you will need in your template: 

forms.SplitDateTimeWidget(attrs={'attrs': 'attrs'})`.
# You don't need to edit the "input:type", type text is good

The rendering will be something like that

<input type='text' name='field_name_0' id='id_field_name_0' attrs='attrs'>
<input type='text' name='field_name_1' id='id_field_name_1' attrs='attrs'>

According to the documentation, New in Django 2.*
You can add seperate attributes.

# Free to add attributes that you want
'start': forms.SplitDateTimeWidget(
    date_attrs({'class':'datepicker'}), # or override the ID, "id":id
    time_attrs({'class':'timepicker'}),
)

Since I do not know what kind of Datetime neither Timepicker that you use in your project. So, in your js call each of them by their conventional name class...

$(".datepicker").datepicker();
$(".timepicker").timepicker();

Upvotes: 5

Related Questions