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

Question

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

error when saving

boyenec · Accepted Answer · 2021-07-19 19:44:06Z

1

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

answered Jul 19, 2021 at 19:44

boyenec

1,64712 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Glazunov Over a year ago

Thank you! Only widget=DateTimePicker(). Also instead of formfield_overrides = { models.DateTimeField: {'widget': DateTimePicker}, } I added form = DateTime in admin.py

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related