Add Date/DateTime pickers

sqladmin/fields.py

@@ -37,28 +37,6 @@ class DateTimeField(fields.DateTimeField):
 
     widget = sqladmin_widgets.DateTimePickerWidget()
 
-    def __init__(
-        self,
-        label: str = None,
-        validators: list = None,
-        format: str = None,
-        **kwargs: Any,
-    ) -> None:
-        """
-        Constructor
-        :param label:
-            Label
-        :param validators:
-            Field validators
-        :param format:
-            Format for text to date conversion. Defaults to '%Y-%m-%d %H:%M:%S'
-        :param kwargs:
-            Any additional parameters
-        """
-        super().__init__(label, validators, **kwargs)
-
-        self.format = format or "%Y-%m-%d %H:%M:%S"
-
 
 class TimeField(fields.Field):
     """

sqladmin/forms.py

@@ -23,8 +23,6 @@
 from sqlalchemy.sql.schema import Column
 from wtforms import (
     BooleanField,
-    DateField,
-    DateTimeField,
     DecimalField,
     Field,
     Form,
@@ -40,6 +38,8 @@
 from sqladmin._validators import CurrencyValidator, TimezoneValidator
 from sqladmin.exceptions import NoConverterFound
 from sqladmin.fields import (
+    DateField,
+    DateTimeField,
     JSONField,
     QuerySelectField,
     QuerySelectMultipleField,

sqladmin/statics/js/main.js

@@ -9,23 +9,23 @@ $(document).on('shown.bs.modal', '#modal-delete', function (event) {
   $("#modal-delete-button").attr("data-url", element.data("url"));
 });
 
-$(document).on('click','#modal-delete-button',function() {
+$(document).on('click', '#modal-delete-button', function () {
   $.ajax({
     url: $(this).attr('data-url'),
     method: 'DELETE',
-    success: function(result) {
-        window.location.href = result;
+    success: function (result) {
+      window.location.href = result;
     }
   });
 });
 
 // Search
-$(document).on('click','#search-button',function() {
+$(document).on('click', '#search-button', function () {
   var searchTerm = $("#search-input").val();
 
   newUrl = "";
   if (window.location.search && window.location.search.indexOf('search=') != -1) {
-    newUrl = window.location.search.replace( /search=[^&]*/, "search=" + searchTerm);
+    newUrl = window.location.search.replace(/search=[^&]*/, "search=" + searchTerm);
   } else if (window.location.search) {
     newUrl = window.location.search + "&search=" + searchTerm;
   } else {
@@ -35,15 +35,35 @@ $(document).on('click','#search-button',function() {
 });
 
 // Reset search
-$(document).on('click','#search-reset',function() {
+$(document).on('click', '#search-reset', function () {
   if (window.location.search && window.location.search.indexOf('search=') != -1) {
-    window.location.href = window.location.search.replace( /search=[^&]*/, "");
+    window.location.href = window.location.search.replace(/search=[^&]*/, "");
   }
 });
 
 // Press enter to search
-$(document).on('keypress','#search-input',function(e) {
+$(document).on('keypress', '#search-input', function (e) {
   if (e.which === 13) {
     $('#search-button').click();
   }
 });
+
+// Date picker
+$(':input[data-role="datepicker"]').each(function () {
+  $(this).flatpickr({
+    enableTime: false,
+    allowInput: true,
+    dateFormat: "Y-m-d",
+  });
+});
+
+// DateTime picker
+$(':input[data-role="datetimepicker"]').each(function () {
+  $(this).flatpickr({
+    enableTime: true,
+    allowInput: true,
+    enableSeconds: true,
+    time_24hr: true,
+    dateFormat: "Y-m-d H:i:s",
+  });
+});

sqladmin/templates/base.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="{{ url_for('admin:statics', path='css/tabler.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('admin:statics', path='css/fontawesome.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('admin:statics', path='css/solid.min.css') }}">
+    <link rel="stylesheet" href="{{ url_for('admin:statics', path='css/flatpickr.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('admin:statics', path='css/main.css') }}">
     {% block head %}
     {% endblock %}
@@ -23,6 +24,7 @@
     <script type="text/javascript" src="{{ url_for('admin:statics', path='js/popper.min.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('admin:statics', path='js/bootstrap.min.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('admin:statics', path='js/moment.min.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('admin:statics', path='js/flatpickr.min.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('admin:statics', path='js/main.js') }}"></script>
     {% block tail %}
     {% endblock %}

sqladmin/widgets.py

@@ -42,9 +42,6 @@ class DatePickerWidget(widgets.TextInput):
 
     def __call__(self, field: Field, **kwargs: Any) -> str:
         kwargs.setdefault("data-role", "datepicker")
-        kwargs.setdefault("data-date-format", "YYYY-MM-DD")
-
-        self.date_format = kwargs["data-date-format"]
         return super().__call__(field, **kwargs)
 
 
@@ -55,7 +52,6 @@ class DateTimePickerWidget(widgets.TextInput):
 
     def __call__(self, field: Field, **kwargs: Any) -> str:
         kwargs.setdefault("data-role", "datetimepicker")
-        kwargs.setdefault("data-date-format", "YYYY-MM-DD HH:mm:ss")
         return super().__call__(field, **kwargs)
 
 

tests/test_fields.py

@@ -45,10 +45,9 @@ class F(Form):
         date = DateField()
 
     form = F()
-    assert form.date.format == ["%Y-%m-%d"]
 
+    assert form.date.format == ["%Y-%m-%d"]
     assert 'data-role="datepicker"' in form.date()
-    assert 'data-date-format="YYYY-MM-DD"' in form.date()
 
     form = F(DummyData(date=["2021-12-22"]))
     assert form.date.data == date(2021, 12, 22)
@@ -59,10 +58,9 @@ class F(Form):
         datetime = DateTimeField()
 
     form = F()
-    assert form.datetime.format == "%Y-%m-%d %H:%M:%S"
 
+    assert form.datetime.format == ["%Y-%m-%d %H:%M:%S"]
     assert 'data-role="datetimepicker"' in form.datetime()
-    assert 'data-date-format="YYYY-MM-DD HH:mm:ss"' in form.datetime()
 
     form = F(DummyData(datetime=["2021-12-22 12:30:00"]))
     assert form.datetime.data == datetime(2021, 12, 22, 12, 30, 0, 0)