Merge pull request #317 from zavatskiy/datetimepicker

Datetimepicker

flask_admin/form/widgets.py

@@ -44,6 +44,8 @@ class DatePickerWidget(widgets.TextInput):
     """
     def __call__(self, field, **kwargs):
         kwargs['data-role'] = u'datepicker'
+        kwargs['data-date-format'] = u'yyyy-mm-dd'
+        kwargs['data-date-autoclose'] = u'true'
         return super(DatePickerWidget, self).__call__(field, **kwargs)
 
 
@@ -55,6 +57,10 @@ class DateTimePickerWidget(widgets.TextInput):
     """
     def __call__(self, field, **kwargs):
         kwargs['data-role'] = u'datetimepicker'
+        kwargs['data-date-format'] = u'yyyy-mm-dd hh:ii:ss'
+        kwargs['data-date-autoclose'] = u'true'
+        kwargs['data-date-today-btn'] = u'linked'
+        kwargs['data-date-today-highlight'] = u'true'
         return super(DateTimePickerWidget, self).__call__(field, **kwargs)
 
 

flask_admin/static/admin/js/form.js

@@ -106,10 +106,10 @@
                 processAjaxWidget($el, name);
                 return true;
             case 'datepicker':
-                $el.datepicker();
+                $el.datetimepicker({minView: 'month'});
                 return true;
             case 'datetimepicker':
-                $el.datepicker({displayTime: true});
+                $el.datetimepicker();
                 return true;
         }
       };

flask_admin/static/datepicker/bootstrap-datepicker.css

-.datepicker {
-  background-color: #ffffff;
-  border-color: #999;
-  border-color: rgba(0, 0, 0, 0.2);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-  display: none;
-  position: absolute;
-  z-index: 900;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 18px;
-  padding-bottom: 4px;
-  width: 218px;
-}
-.datepicker .nav {
-  font-weight: bold;
-  width: 100%;
-  padding: 4px 0;
-  background-color: #f5f5f5;
-  color: #808080;
-  border-bottom: 1px solid #ddd;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-  -moz-box-shadow: inset 0 1px 0 #ffffff;
-  box-shadow: inset 0 1px 0 #ffffff;
-  zoom: 1;
-}
-.datepicker .nav:before, .datepicker .nav:after {
-  display: table;
-  content: "";
-  zoom: 1;
-  *display: inline;
-}
-.datepicker .nav:after {
-  clear: both;
-}
-.datepicker .nav span {
-  display: block;
-  float: left;
-  text-align: center;
-  height: 28px;
-  line-height: 28px;
-  position: relative;
-}
-.datepicker .nav .bg {
-  width: 100%;
-  background-color: #fdf5d9;
-  height: 28px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.datepicker .nav .fg {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.datepicker .button {
-  cursor: pointer;
-  padding: 0 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.datepicker .button:hover {
-  background-color: #808080;
-  color: #ffffff;
-}
-.datepicker .months {
-  float: left;
-  margin-left: 4px;
-}
-.datepicker .months .name {
-  width: 72px;
-  padding: 0;
-}
-.datepicker .years {
-  float: right;
-  margin-right: 4px;
-}
-.datepicker .years .name {
-  width: 36px;
-  padding: 0;
-}
-.datepicker .dow, .datepicker .days div {
-  float: left;
-  width: 30px;
-  line-height: 25px;
-  text-align: center;
-}
-.datepicker .dow {
-  font-weight: bold;
-  color: #808080;
-}
-.datepicker .calendar {
-  padding: 4px;
-}
-.datepicker .days div {
-  cursor: pointer;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.datepicker .days div:hover {
-  background-color: #0064cd;
-  color: #ffffff;
-}
-.datepicker .overlap {
-  color: #bfbfbf;
-}
-.datepicker .today {
-  background-color: #fee9cc;
-}
-.datepicker .selected {
-  background-color: #bfbfbf;
-  color: #ffffff;
-}
-.datepicker .time {
-  clear: both;
-  padding-top: 8px;
-  margin-left: 4px;
-}
-.datepicker .time label {
-  text-align: center;
-}
-.datepicker .time input {
-  width: 200px;
-}

flask_admin/templates/admin/model/create.html

@@ -8,7 +8,7 @@
 {% block head %}
     {{ super() }}
     <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
-    <link href="{{ url_for('admin.static', filename='datepicker/bootstrap-datepicker.css') }}" rel="stylesheet">
+    <link href="{{ url_for('admin.static', filename='datetimepicker/bootstrap-datetimepicker.css') }}" rel="stylesheet">
 {% endblock %}
 
 {% block body %}
@@ -29,6 +29,6 @@
 
 {% block tail %}
   {{ super() }}
-  <script src="{{ url_for('admin.static', filename='datepicker/bootstrap-datepicker.js') }}"></script>
+  <script src="{{ url_for('admin.static', filename='datetimepicker/bootstrap-datetimepicker.js') }}"></script>
   <script src="{{ url_for('admin.static', filename='admin/js/form.js') }}"></script>
 {% endblock %}

flask_admin/templates/admin/model/edit.html

@@ -8,7 +8,7 @@
 {% block head %}
     {{ super() }}
     <link href="{{ url_for('admin.static', filename='select2/select2.css') }}" rel="stylesheet">
-    <link href="{{ url_for('admin.static', filename='datepicker/bootstrap-datepicker.css') }}" rel="stylesheet">
+    <link href="{{ url_for('admin.static', filename='datetimepicker/bootstrap-datetimepicker.css') }}" rel="stylesheet">
 {% endblock %}
 
 {% block body %}
@@ -20,6 +20,6 @@
 
 {% block tail %}
   {{ super() }}
-  <script src="{{ url_for('admin.static', filename='datepicker/bootstrap-datepicker.js') }}"></script>
+  <script src="{{ url_for('admin.static', filename='datetimepicker/bootstrap-datetimepicker.js') }}"></script>
   <script src="{{ url_for('admin.static', filename='admin/js/form.js') }}"></script>
 {% endblock %}