django-bootstrap3-datetimepicker

Date: April 12th 2016
Last updated: April 12th 2016

Many people (including me) have tried to utilise Admin's datetime selector. In this example I use django-bootstrap3-datetimepicker which looks just as good (in my opinion). The output of this example is formated using crispy forms.

usefull resources

• http://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form
• https://pypi.python.org/pypi/django-bootstrap3-datetimepicker
• https://github.com/HireAnEsquire/django-bootstrap3-datetimepicker/blob/master/bootstrap3_datetime/widgets.py

install (command line)

pip install django-bootstrap3-datetimepicker

update settings.py

INSTALLED_APPS = [
    'bootstrap3_datetime',
    #<- snipped ->
    ]

forms.py

from bootstrap3_datetime.widgets import DateTimePicker

class SurfDiaryForm(forms.ModelForm):

    starttime = forms.DateTimeField(
            label='Start time',
            widget=DateTimePicker(options=
                                {'format': 'YYYY-MM-DD HH:mm',
                                "pickSeconds": False}))

    endtime = forms.DateTimeField(
            label='End time',
            widget=DateTimePicker(options=
                                {'format': 'YYYY-MM-DD HH:mm',
                                "pickSeconds": False}))

update html template

• JQuery
• bootstrap3

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  

output