Skip to main content

A Django app to add date pickers

Project description

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:

https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Firefox_Date.png https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Chromium_Date.png https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Chromium_Video.gif

And looks like this in a cellphone:

https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Android_Date.jpg https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Android_Time.jpg https://raw.githubusercontent.com/xbello/django-datepick/master/docs/Android_DateTime.jpg

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-datepick-0.1.2.tar.gz (3.8 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page