Add widgets to make use of HTML5's date/time picker

docs/widgets.rst

@@ -23,3 +23,61 @@ This renders a form ChoiceField as a Bootstrap 4 button group in the `primary` B
  choices=((1, 'Vinyl'), (2, 'Compact Disc')),
  initial=1,
  )
+
+
+
+DateTimeWidget
+~~~~~~~~~~~~~~~~~~~~~~
+
+This renders a form DateTimeField as a input of type datetime-local.
+
+.. code:: django
+
+ from bootstrap4.widgets import DateTimeWidget
+
+ class MyForm(forms.Form):
+ media_type = forms.DateTimeField(
+ help_text="Pick a Date and Time",
+ required=True,
+ label="Schedule:",
+ widget=DateTimeWidget,
+ initial=datetime.now(),
+ )
+
+
+DateWidget
+~~~~~~~~~~~~~~~~~~~~~~
+
+This renders a form DateField as a input of type date.
+
+.. code:: django
+
+ from bootstrap4.widgets import DateWidget
+
+ class MyForm(forms.Form):
+ media_type = forms.DateField(
+ help_text="Enter your bird day",
+ required=True,
+ label="Bird Day:",
+ widget=DateWidget,
+ initial=date.today(),
+ )
+
+
+TimeWidget
+~~~~~~~~~~~~~~~~~~~~~~
+
+This renders a form TimeField as a input of type time.
+
+.. code:: django
+
+ from bootstrap4.widgets import TimeWidget
+
+ class MyForm(forms.Form):
+ media_type = forms.TimeField(
+ help_text="Pick a time:",
+ required=True,
+ label="Time:",
+ widget=TimeWidget,
+ initial=datetime.now().time(),
+ )

src/bootstrap4/templates/bootstrap4/widgets/datetime_field.html

@@ -0,0 +1 @@
+<input type="datetime-local" class="{{ widget.attrs.class|default:'form-control' }}" name="{{ widget.name }}" id="{{ widget.attrs.id }}" value="{{ widget.value|default:'' }}"{% if widget.required %} required{% endif %}/>

src/bootstrap4/widgets.py

@@ -1,4 +1,9 @@
-from django.forms import RadioSelect
+from django.forms import (
+ RadioSelect,
+ DateInput,
+ DateTimeInput,
+ TimeInput
+)
 
 
 class RadioSelectButtonGroup(RadioSelect):
@@ -9,3 +14,28 @@ class RadioSelectButtonGroup(RadioSelect):
  """
 
  template_name = "bootstrap4/widgets/radio_select_button_group.html"
+
+
+class DateWidget(DateInput):
+ """This widget renders a HML5 date field type and enables date picker."""
+
+ input_type = "date"
+
+ def format_value(self, value):
+ return str(value or '')
+
+
+class DateTimeWidget(DateTimeInput):
+ """This widget renders a HML5 datetime-local field type and enables date and time picker."""
+
+ input_type = "datetime-local"
+ template_name = "bootstrap4/widgets/datetime_field.html"
+
+ def format_value(self, value):
+ return 'T'.join(str(value or '').split())
+
+
+class TimeWidget(TimeInput):
+ """This widget renders a HML5 time field type and enables time picker."""
+
+ input_type = "time"