django-datepick

======== Datepick

Django-datepick is a Django app to add a date, time and datetime pickers to your forms.

Install

Install the app with pip install django-datepick.

Usage with forms

Change the widget used in your forms.py to use the widgets included in this app::

from django import forms
from datepick import widgets

class MyForm(forms.Form):
    date_field = forms.DateField(widget=widgets.DateInput)
    datetime_field = forms.DateTimeField(widget=widgets.DateTimeInput)
    time_field = forms.TimeField(widget=widgets.TimeInput)

Usage with models

Change the field used in your models.py to use the fields from this app::

from django.db import models
from datepick import fields

class MyDateModel(models.Model):
    d = fields.DateField()
    dt = fields.DateTimeField()
    t = fields.TimeField()

Override the admin widget

Same as with any widget, register the model overriding the widget(s) in admin.py::

from datepick.widgets import DateInput, SplitDateTimeWidget, TimeInput

class MyDateModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.DateField: {"widget": DateInput},
        # DON'T models.DateTimeField: {"widget": DateTimeInput}
        models.DateTimeField: {"widget": SplitDateTimeWidget}
        models.TimeField: {"widget": TimeInput},
    }

DateTimeInput doesn't work in the admin, as it expects a multivalue field.

Why?

Each time you use a date field in Django, the form is a text input. Any frontend would like a datepicker of somekind. Turns out browsers and cellphones already have a datepicker. It looks like this in a browser:

.. image:: https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Firefox_Date.png :width: 150px

.. image:: https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Chromium_Date.png :width: 150px

.. image:: https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Chromium_Video.gif :width: 150px

And looks like this in a cellphone:

.. image:: https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Android_Date.jpg :width: 150px

.. image:: https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Android_Time.jpg :width: 150px

.. image:: https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Android_DateTime.jpg :width: 150px

It doesn't need Javascript or extra CSS.

More info:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local