Skip to main content

A Django widget for the Tempus Dominus Bootstrap 4 DateTime picker.

Project description

Django Tempus Dominus

Django Tempus Dominus provides Django widgets for the Tempus Dominus Bootstrap 4 DateTime date and time picker. Why yet another date and time picker for Django? None supported the Tempus Dominus date and time picker, which is actively developed and feature rich. It is a successor to the popular bootstrap-datetimepicker JavaScript library.

Installation

  • From PyPI: pip install django-tempus-dominus

Then add tempus_dominus to INSTALLED_APPS in your Django settings.

Usage & Django Settings

The following settings are available:

  • TEMPUS_DOMINUS_LOCALIZE (default: False): if True, widgets will be translated to the selected browser language and use the localized date and time formats.
  • TEMPUS_DOMINUS_INCLUDE_ASSETS (default: True): if True, loads Tempus Dominus and moment JS and CSS from Cloudflare's CDN, otherwise loading the JS and CSS are up to you.

Three widgets are provided:

  • DatePicker
    • Defaults to YYYY-MM-DD
    • Defaults to L if TEMPUS_DOMINUS_LOCALIZE is True
  • DateTimePicker
    • Defaults to YYYY-MM-DD HH:mm:ss
    • Defaults to L LTS if TEMPUS_DOMINUS_LOCALIZE is True
  • TimePicker
    • Defaults to HH:mm:ss
    • Defaults to LTS if TEMPUS_DOMINUS_LOCALIZE is True

In your Django form, you can use the widgets like this:

import datetime

from django import forms
from tempus_dominus.widgets import DatePicker, TimePicker, DateTimePicker

class MyForm(forms.Form):
    date_field = forms.DateField(widget=DatePicker())
    date_field_required_with_min_max_date = forms.DateField(
        required=True,
        widget=DatePicker(
            options={
                'minDate': '2009-01-20',
                'maxDate': '2017-01-20',
            },
        ),
    )
    time_field = forms.TimeField(
        widget=TimePicker(
            options={
                'enabledHours': [9, 10, 11, 12, 13, 14, 15, 16],
            },
            input_toggle: False,
        ),
    )
    datetime_field = forms.DateTimeField(
        widget=DateTimePicker(
            options={
                'minDate': (datetime.date.today() + datetime.timedelta(days=1)).strftime('%Y-%m-%d'),  # Tomorrow
                'useCurrent': True,
                'collapse': False,
            },
            attrs={
               'append': 'fa fa-calendar',
               'input_toggle': False,
               'icon_toggle': True,
            }
        ),
    )

Then in your template, include jQuery, {{ form.media }}, and render the form:

<html>
  <head>
    {# Include FontAwesome; required for icon display #}
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

    {# Include Bootstrap 4 and jQuery #}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    {# Django Tempus Dominus assets are included in `{{ form.media }}` #}
    {{ form.media }}
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <form method="post" action=".">
            {% csrf_token %}
            {{ form.as_p }}
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

Widget Options

  • options (dictionary): This dictionary will be passed to Tempus Dominus. A full list of options is available here.
  • input_toggle (boolean, default True): Controls whether clicking on the input field toggles the datepicker popup. Typically is set to False when an icon is in use.
  • size (string): Controls the size of the input group (small or large). Defaults to the default size.
  • prepend (string): Name of a Font Awesome icon to prepend to the input field (fa fa-calendar).
  • append (string): Name of a Font Awesome icon to append to the input field (fa fa-calendar).
  • icon_toggle (boolean, default True): Controls whether clicking on the icon toggles the datepicker popup. Typically is set to False when an icon is in use.

Change Log

  • 5.1.2.3: Fix a bug which caused a page lag when switching locales.
  • 5.1.2.2: Fix a bug with duplicate DOM IDs in template.
  • 5.1.2.1: Fix a bug with time formatting to use ISO time format (T12:34:56)
  • 5.1.2.0: Upgrade Tempus Dominus to 5.1.2. Support for new widget attributes (size, prepend, append, input_toggle, icon_toggle, class). DatePicker now closes after losing focus, and widget attributes are properly passed.
  • 5.0.1.5: Fix to ensure options are passed in proper JSON.
  • 5.0.1.4: Include template in the MANIFEST.in file.
  • 5.0.1.3: Add setting to exclude CDN CSS and JS assets. Add initial test suite.
  • 5.0.1.2: Documentation clean up.
  • 5.0.1.1: Option to l10n and i18n to all pickers.
  • 5.0.1.0: Upgrade to Tempus Dominus full release version 5.0.1. Fix bug for populating initial values (thank you, @ianastewart).
  • 0.1.2: UX enhancement: auto-dismiss dialog if the input loses focus.
  • 0.1.1: Bug fixes.
  • 0.1.0: Initial release.

Maintainers

Contributors & DjangoCon US Sprinters (Thank You!)

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-tempus-dominus-5.1.2.3.tar.gz (7.9 kB view details)

Uploaded Source

Built Distribution

django_tempus_dominus-5.1.2.3-py3-none-any.whl (10.2 kB view details)

Uploaded Python 3

File details

Details for the file django-tempus-dominus-5.1.2.3.tar.gz.

File metadata

  • Download URL: django-tempus-dominus-5.1.2.3.tar.gz
  • Upload date:
  • Size: 7.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.21.0 setuptools/40.8.0 requests-toolbelt/0.9.1 tqdm/4.31.1 CPython/3.6.7

File hashes

Hashes for django-tempus-dominus-5.1.2.3.tar.gz
Algorithm Hash digest
SHA256 dbcc6ae0565d42fa4ffd4851db41411dd8eea5ea4edd337aedd3f42afae8ff3c
MD5 8c12919ce62d4369804d4e074e9f3550
BLAKE2b-256 c23034a823cede68d9b49b815af2e1f7b5cac6d6fc3439558d8cf883a8a847bb

See more details on using hashes here.

File details

Details for the file django_tempus_dominus-5.1.2.3-py3-none-any.whl.

File metadata

  • Download URL: django_tempus_dominus-5.1.2.3-py3-none-any.whl
  • Upload date:
  • Size: 10.2 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.21.0 setuptools/40.8.0 requests-toolbelt/0.9.1 tqdm/4.31.1 CPython/3.6.7

File hashes

Hashes for django_tempus_dominus-5.1.2.3-py3-none-any.whl
Algorithm Hash digest
SHA256 0b6886f56d383c5f2453b81abdf4158a5d5bf87fb81d4772caaee8e6a2ea3528
MD5 1b9e5833d8a918d684e9296983354840
BLAKE2b-256 de11b16546042f7031f120f0b4a5a2e39cf3ab452d5debad31f31cfa82c50170

See more details on using hashes here.

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