ThinkingMonkey
ThinkingMonkey

Reputation: 12727

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

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">

Upvotes: 10

Views: 26643

Answers (6)

Mohammed Jaseem K
Mohammed Jaseem K

Reputation: 471

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

This worked in my case

Upvotes: 0

jamyla
jamyla

Reputation: 45

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.

Upvotes: 3

Rafael Rosenberg
Rafael Rosenberg

Reputation: 46

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>

Upvotes: 0

Dinesh Kc
Dinesh Kc

Reputation: 51

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

Upvotes: 1

Martin
Martin

Reputation: 2220

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.

Upvotes: 15

epineda
epineda

Reputation: 471

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 = {
        }

Upvotes: 3

Related Questions