Search code examples
djangodjango-widget

Using jQuery DateTimePicker in Django Admin (jazzmin) get error - Enter a list of values

Plugged in TempusDominus widget for DateTimeField in Django admin. The task is to enable date selection with scaling by months and years. The standard widget doesn't have that option. But Django, when using DateTimeField, expects to return two values, one with date and one with time, but the widget returns one value="2021-07-27 13:00:00". How to split the values when saving or fix the check? There is one date and time value saved to the database. Thanks for your help.

model.py

start_date = models.DateTimeField(blank=True, null=True)
end_date = models.DateTimeField(blank=True, null=True)

widgets.py

from django.forms import DateTimeInput


class DateTimePicker(DateTimeInput):
    template_name = 'widgets/datetimepicker.html'

    def get_context(self, name, value, attrs):
        datetimepicker_id = f'datetimepicker_{name}'
        if attrs is None: attrs = dict()
        attrs['data-target'] = f'#{datetimepicker_id}'
        attrs['class'] = 'form-control datetimepicker-input'
        context = super().get_context(name, value, attrs)
        context['widget']['datetimepicker_id'] = datetimepicker_id
        return context

    class Media:
        css = {
            "all": (
                "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
                "//cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css",
            )
        }
        js = (
            '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js',
        )

widgets/datetimepicker.html

<div class="input-group date" id="{{ widget.datetimepicker_id }}" data-target-input="nearest">
  {% include "django/forms/widgets/input.html" %}
  <div class="input-group-append" data-target="#{{ widget.datetimepicker_id }}" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>
<script>
  django.jQuery(document).ready(function ($) {
    $("#{{ widget.datetimepicker_id }}").datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss',
    });
  });
</script>

admin.py

formfield_overrides = { models.DateTimeField: {'widget': DateTimePicker}, }

widget

enter image description here

error when saving

enter image description here

Solution

  • you can tried this

    in your froms.py

    class DateTime(ModelForm):
    start_date = forms.DateTimeField(
        input_formats=['%Y-%m-%d %I:%M:%S %p'],
        widget=forms.DateTimeInput(format='%Y-%m-%d %I:%M:%S %p')
    )

   end_date = forms.DateTimeField(
        input_formats=['%Y-%m-%d %I:%M:%S %p'],
        widget=forms.DateTimeInput(format='%Y-%m-%d %I:%M:%S %p')
    )

    
    class Meta:  
     model = your model name
     fields = ['start_date','end_date',your others fields....]

    then load the cdn link in your html