Django forms.DateInput does not apply the attributes given in attrs field

Question

Placeholder, class not getting set when tried to apply through the django's attrs specifier for forms.DateInput

The form is a ModelForm.

And according to the docs

Takes same arguments as TextInput, with one more optional argument:

Here is the code :

widgets = {
   'my_date_field': forms.DateInput(format=('%d-%m-%Y'), 
                    attrs={'class':'myDateClass', 
                           'placeholder':'Select a date'}
                    )
}

The same is applied for a forms.TextInput and it works just fine.

What am I missing here?

Just anybody wants a full class code :

class trademark_form(ModelForm):
    my_date_field = DateField(input_formats=['%d-%m-%Y'])
    class Meta:
        model = myModel

        widgets = {
                   'my_date_field': forms.DateInput(format=('%d-%m-%Y'), attrs={'class':'myDateClass', 'placeholder':'Select a date'}),
                   'field1': forms.TextInput(attrs={'class':'textInputClass', 'placeholder':'Enter a Value..'}),
                   'field2': forms.TextInput(attrs={'class':'textInputClass', 'placeholder':'Enter a Value..', 'readonly':'readonly', 'value':10}),
                   'desc': forms.Textarea(attrs={'class':'textAreaInputClass', 'placeholder':'Enter desc', 'rows':5}),

               }
        exclude = ('my_valid_field')

The generated HTML for the field, my_date_field :

<input type="text" id="id_my_date_field" name="my_date_field">

The generated HTML for the field, field1 :

<input type="text" name="field1" class="textInputClass" placeholder="Enter a Value.." id="id_field1">

Answer 1

Since you didn't post your form code, my best guess is that you explicitly instantiated a form field like this confirmed my guess by posting the code that looks roughly like this:

class MyForm(forms.ModelForm):
    my_date_field = forms.DateField()

    class Meta:
        model = MyModel
        widgets = {
            'my_date_field': forms.DateInput(format=('%d-%m-%Y'), 
                                             attrs={'class':'myDateClass', 
                                            'placeholder':'Select a date'})
        }

I can say that it's not working because if you explicitly instantiate a form field like this, Django assumes that you want to completely define form field behavior; therefore, you can't use the widgets attribute of the inner Meta class.

The note at the end of section about overriding the default field types or widgets states that:

Fields defined declaratively are left as-is, therefore any customizations made to Meta attributes such as widgets, labels, help_texts, or error_messages are ignored; these only apply to fields that are generated automatically.

Answer 2

based on response of @Martin and reading the Django documentation the final solution should be:

class MyForm(forms.ModelForm):
    my_date_field = forms.DateField(
        widget=forms.DateInput(format=('%d-%m-%Y'), 
                               attrs={'class':'myDateClass', 
                               'placeholder':'Select a date'}))

    class Meta:
        model = MyModel
        widgets = {
        }

Answer 3

you can simply create a HTML Datepicker Without using a fancy JAvascript Library.Here is the simple demo:

First create a dateinput field inherited from Dateinput:

 class DateInput(forms.DateInput):
     input_type = 'date'

And use this DateInput Field as like this :

 class BookingRoomForm(ModelForm):
     class Meta:
         widgets = {'checkin':DateInput()}
         model = BookingRoom
         fields = ['checkin',]

If you're not using ModelForm,Use widget something like this :

class BookingRoomForm(ModelForm):
    checkin = forms.DateField(widget=DateInput())
    class Meta:
        model = BookingRoom
        fields = ['checkin',]

And the output will be like this : enter image description here

Answer 4

forms.DateField(widget=forms.DateInput(format=('%d-%m-%Y'),attrs={'class': 'datepicker', 'placeholder': 'Select a date', 'type': 'date'}))

when input type does not change this worked for me.

Answer 5

i did different,

into the forms I apply this to my ModelForm

class Form(forms.ModelForm):
    class Meta:
        model = MODEL
        fields = ['day']
        widget = {
            'day': DateInput(attrs={'placeholder': 'Nome do tratamento',
                                         'id': 'id_day'})
        }

at my main tamplete I applied:

<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
Form here

<script>
$(function() {
    $( "#id_day" ).datepicker();
});
</script>

</body>

Answer 6

forms.DateField(widget=forms.DateInput(format=('%d-%m-%Y'),attrs={'class': 'datepicker', 'placeholder': 'Select a date', 'type': 'date'}))

This worked in my case