'DateTimeInput is being rendered as simple text input in django

I have tried to take date time input from the user but data type of date input is being set as type="text"

following are the code snippets:

template:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>


<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{form.stayFrom}}
    <script>
         $(function () {
         $("#id_stayFrom").datetimepicker({
             format: 'd/m/y',
             });
         });
      </script>
</form>

forms.py: 

class RoomApplicationForm(forms.ModelForm):
    stayFrom = forms.DateTimeField(input_formats=['%d/%m/%y'])
    class Meta:
        model = Stay 
        fields = ('stayFrom')

models.py:

class Stay(models.Model):
    user = models.OneToOneField(Account, on_delete=models.CASCADE, primary_key = True)

    stayFrom = models.DateTimeField(verbose_name="stay start date")

heres the rendered html: 

<input type="text" name="stayFrom" id="id_stayFrom" autocomplete="off">

can you point out what i'm missing in my code?

htmldjangodatetimehtml-input


Solution 1:[1]

The default widget for DateTimeField is a text field (DateTimeInput). So this is expected behavior.

Solution 2:[2]

Instead of:

stayFrom = forms.DateTimeField(input_formats=['%d/%m/%y'])

Do:

stayFrom = forms.CharField(widget=forms.TextInput(attrs={'type':'date'}))

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 stackoverflowusrone
Solution 2 drafro

Related Questions