Django Modelform DateTime Picker

Question

Django Modelform DateTime Picker

269 Views Asked by Steven Meesters At 09 April 2023 at 09:28

I would like to get a date AND time picker for my django model form.

model:

class ServiceBooker(models.Model):
    regnr = models.CharField(max_length=255)
    namn = models.CharField(max_length=255, null=True, blank=True)
    telnr = models.CharField(max_length=255)
    email = models.EmailField(max_length=255)
    service_date = models.DateTimeField()
    booked_date = models.DateTimeField(auto_now=True)
    kommentar = models.TextField()
    service_name = models.ForeignKey(ServiceType, on_delete=models.CASCADE)
    noteringar = models.TextField(default='')

forms.py:

class ServiceBookerForm(forms.ModelForm):
    service_date = forms.DateTimeField(input_formats=['%d/%m/%Y %H:%M'],
                                       widget=forms.DateTimeInput(
                                           format='%d/%m/%Y %H:%M',
                                           attrs={'class': 'form-control'}))
    class Meta:
        model = ServiceBooker
        fields = '__all__'
        exclude = ('noteringar',)

But on the website it doesn't show the datetimepicker. I know how to fix the date picker with:

'service_date': widgets.DateInput(attrs={'type': 'date'})

but I would like to get a date AND time picker.

Can anyone help me? :-)

Thanks!

Original Q&A

There are 2 best solutions below

**Steven Meesters** · Answer 1 · 2023-04-09T09:50:25.823000

Steven Meesters On 09 April 2023 at 09:50

Marco helped me to find an answer to this question:

Have you tried datetime-local as type? – Marco

**YaMann** · Answer 2 · 2023-04-09T11:53:26.177000

To add a DateTime picker to your Django form, you can use JavaScript libraries like jQuery UI or other third-party libraries, such as Tempus Dominus for Bootstrap. I'll provide an example using Tempus Dominus since it's a popular choice and works well with Bootstrap.

First, include the necessary libraries in your HTML file. Make sure you have included jQuery, Moment.js, and Bootstrap (if you haven't already):

<head>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <!-- Moment.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Tempus Dominus CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/tempusdominus-bootstrap-5.min.css" />

  <!-- Tempus Dominus JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/tempusdominus-bootstrap-5.min.js"></script>

  <!-- Bootstrap JavaScript Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>

Then, update your forms.py file to include a custom ID or class for the DateTimeInput widget:

class ServiceBookerForm(forms.ModelForm):
service_date = forms.DateTimeField(input_formats=['%d/%m/%Y %H:%M'],
                                   widget=forms.DateTimeInput(
                                       format='%d/%m/%Y %H:%M',
                                       attrs={'class': 'form-control', 'id': 'datetimepicker'}))
class Meta:
    model = ServiceBooker
    fields = '__all__'
    exclude = ('noteringar',)

In your template, where you render the form, make sure that the form field with the datetimepicker ID is present. For example:

<form method="post" class="form">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Finally, add the JavaScript code to initialize the Tempus Dominus DateTime picker for the input field with the datetimepicker ID:

<script>
  $(document).ready(function() {
    $('#datetimepicker').datetimepicker({
      format: 'DD/MM/YYYY HH:mm'
    });
  });
</script>

Now, when you load the form on your website, you should see a DateTime picker for the service_date field that allows you to select both date and time.

Django Modelform DateTime Picker

There are 2 best solutions below

Related Questions in PYTHON

Related Questions in DJANGO

Related Questions in FORMS

Related Questions in MODELFORM

Trending Questions

Popular # Hahtags

Popular Questions