jquery-ui: replace datetime-picker by flatpickr

website/agenda/planung/calendar.cgi

@@ -103,16 +103,14 @@ if (
     template::process( $config, 'print', template::check( $config, 'default.html' ),
         $headerParams );
     print q{
-        <link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
         <link rel="stylesheet" href="css/calendar.css" type="text/css" /> 
-
+        <link rel="stylesheet" href="css/flatpickr.min.css" type="text/css" /> 
-        <script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
+        <script src="js/flatpickr.js" type="text/javascript"></script>
         <script src="js/calendar.js" type="text/javascript"></script>
         <script src="js/datetime.js" type="text/javascript"></script>
     };
     if ( $params->{list} eq '1' ) {
         print q{
-            <!--<link href="css/theme.default.css" rel="stylesheet">-->
             <script src="js/jquery.tablesorter.min.js"></script>
             <style>#content{ top:5rem; position:relative; }</style>
         };
@@ -1299,8 +1297,8 @@ sub addCalendarButton {
     #add calendar button
     my $content = qq{
         <div id="previous_month"><a id="previous">&laquo;</a></div>
-        <div id="selectDate">
+        <div id="selectDate" data-toggle>
-            <input id="start_date"/>
+            <input id="start_date" data-input/>
             <div id="current_date">$calendar->{month} $calendar->{year}</div>
         </div>
         <div id="next_month"><a id="next">&raquo;</a></div>

website/agenda/planung/css/default.css

@@ -673,6 +673,11 @@ ul.tabContainer li:last-child{
     border-top-right-radius:0.5rem;
 }
 
+#content .editor input.datetimepicker{
+    padding-left:0;
+    padding-right:0;
+}
+
 #content #dialog{
     position:absolute;
     z-index:1000;

website/agenda/planung/css/jquery-ui-timepicker.css

@@ -1,52 +0,0 @@
-.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
-.ui-timepicker-div dl { text-align: left; }
-.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
-.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
-.ui-timepicker-div td { font-size: 90%; }
-.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
-.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
-
-.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
-.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
-
-.ui-timepicker-rtl{ direction: rtl; }
-.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
-.ui-timepicker-rtl dl dt{ float: right; clear: right; }
-.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
-
-/* Shortened version style */
-.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
-.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
-.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
-.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
-.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
-.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
-.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
-
-/* customizations */
-.ui-corner-all,
-.ui-datepicker-div,
-.ui-datepicker-header,
-.ui-datepicker-header select{
-    border-radius:0!important;
-    border:0;
-}
-.ui-datepicker-header select{
-    padding:6px;
-}
-.ui-datepicker td span,
-.ui-datepicker td a{
-    padding:6px;
-    border:0;
-}
-
-.ui-datepicker .ui-state-default{
-    border:0;
-}
-

website/agenda/planung/js/calendar.js

@@ -299,7 +299,7 @@ function getNearestDatetime(){
             }
         }
     );
-    return date+" "+hour+":"+minute+ " ";
+    return date+" "+hour+":"+minute+ ":00";
 }
 
 var mouseX=0;
@@ -375,19 +375,16 @@ function show_schedule_series_dialog(project_id, studio_id, series_id, start_dat
 function setDatePicker(){
 
     initRegions(region);
-    
+    var datePicker=showDatePicker('#selectDate', {
-    registerDatePicker(
+        wrap:true,
-        '#start_date', {
+        onSelect : function(dates, inst) {
-            showWeek: true,
+            var date = dates[0];
-            onSelect : function(dateText, inst) {
+            var url  = setUrlParameter(window.location.href, 'date', formatDate(date));
-                var url=setUrlParameter(window.location.href,'date',dateText);
+            loadCalendar(url);    
-                loadCalendar(url);    
-            }
         }
-    );
+    });
-    
+    datePicker.setDate(parseDateTime(getUrlParameter("date")));
-    var date=getUrlParameter("date");
+    $('#selectDate').on('click', () => datePicker.toggle() );
-    $('#start_date').datepicker("setDate", date);
 }
 
 // add name=value to current url
@@ -431,16 +428,6 @@ function initTodayButton(){
     return true;
 }
 
-function initSelectDate(){
-    $('#selectDate').on('click', function(){
-        if($('#ui-datepicker-div').css("display")=="block"){
-            $('#start_date').datepicker("hide");
-        }else{
-            $('#start_date').datepicker("show");
-        }
-    });
-}
-
 function initCalendarMenu(){
     //add filters to header
     var html='';
@@ -459,7 +446,6 @@ function initCalendarMenu(){
     setFilter();
     setDatePicker();
     initTodayButton();
-    initSelectDate();
     resizeCalendarMenu();
 }
 
@@ -889,9 +875,13 @@ function handleGrid(id){
     if (project_id<0)   return;
     if (studio_id<0)    return;
 
-    var start_date=getNearestDatetime();
+    var start_date = getNearestDatetime();
     $('#series_date').attr('value',start_date);
-    showDateTimePicker('#series_date');
+    var date=parseDateTime(start_date);
+    showDateTimePicker('#series_date', {
+        date: start_date
+    });
+    
 
     show_schedule_series_dialog(project_id, studio_id, series_id, start_date);
 }

website/agenda/planung/js/datetime.js

@@ -1,119 +1,27 @@
-
-// wrapper for date time picker with callback function
 function showDateTimePicker(selector, options){
-    $(selector).each( function(){
+    var defaults = {
-        // init on first select
+        locale: { firstDayOfWeek: 1 },
-        $(this).on('click', function(){
+        enableTime: true,
-            if ($(this).hasClass("hasDatepicker")) return;
+        time_24hr: true
-
+    }
-            var defaultOptions={
+    if (options){
-                dateFormat: "yy-mm-dd",
+        if (options["onSelect"]) defaults["onChange"] = options["onSelect"];
-                timeFormat: "HH:mm",
+        if (options["onChange"]) defaults["onChange"] = options["onChange"];
-                stepMinute: 5,
+    }
-                firstDay: 1,
+    var elem = $(selector).flatpickr(defaults);
-                showOtherMonths: true,
+    if (options && options.date) elem.setDate(options.date);
-                selectOtherMonths: true,
-                changeMonth: true,
-                changeYear: true,
-                showWeek: true,         
-            }
-
-            //recursively merge options
-            $.extend(true, defaultOptions, options); 
-
-            $(this).datetimepicker(defaultOptions);
-
-            // set date and time from input field
-            var datetime=$(this).attr('value');
-            if ((datetime != null) && (datetime != "")){
-                var datetime=parseDateTime(datetime);
-                $(this).datetimepicker('setDate', datetime);
-                $(this).datetimepicker('setTime', datetime);
-            }
-
-            if((region !=null) && (region !='' ) && (region != 'en')){
-                $(this).datetimepicker( $.timepicker.regional[ region+"" ] );
-            }
-            //show if has been initialized on first click            
-            $(this).focus();
-        });
-    });
 }
 
-// show date picker on first select with callback function
 function showDatePicker(selector, options){
-
+    var defaults = {
-    $(selector).each( function(){
+        locale: { firstDayOfWeek: 1 },
-        // init on first select
+    }
-        var activator=$(this);
+    if (options){
-        if ((options!=null)&&(options.activator!=null)) activator=$(options.activator);
+        if (options["onSelect"]) defaults["onChange"] = options["onSelect"];
-        
+        if (options["onChange"]) defaults["onChange"] = options["onChange"];
-        activator.on('click', function(){
+        if (options["wrap"]) defaults["wrap"] = options["wrap"];
-            if ($(this).hasClass("hasDatepicker")) return;
+    }
-
+    return $(selector).flatpickr(defaults);
-            var defaultOptions={
-                dateFormat: "yy-mm-dd",
-                timeFormat: "HH:mm",
-                showTimePicker: false,
-                firstDay: 1,
-                showOtherMonths: true,
-                selectOtherMonths: true,        
-                changeMonth: true,
-                changeYear: true,        
-                showWeek: true,         
-            }
-
-            //recursively merge options
-            $.extend(true, defaultOptions, options); 
-            $(this).datepicker(defaultOptions);
-
-            // set date from input field
-            var datetime=$(this).attr('value');
-            if ((datetime != null) && (datetime != "")){
-               $(this).datepicker('setDate', datetime);
-            }
-
-            if((region !=null) && (region !='' ) && (region != 'en')){
-               $(this).datepicker( $.datepicker.regional[ region+"" ] );
-            }
-            //show if has been initialized on first click
-            $(this).focus();
-        });
-    });
-}
-
-// date picker with direct registration
-function registerDatePicker(selector, options){
-
-    $(selector).each( function(){
-        var defaultOptions={
-            dateFormat: "yy-mm-dd",
-            timeFormat: "HH:mm",
-            showTimePicker: false,
-            firstDay: 1,
-            showOtherMonths: true,
-            selectOtherMonths: true,        
-            changeMonth: true,
-            changeYear: true,        
-            showWeek: true,         
-        }
-
-        //recursively merge options
-        $.extend(true, defaultOptions, options); 
-        $(this).datepicker(defaultOptions);
-
-        // set date from input field
-        var datetime=$(this).attr('value');
-        if ((datetime != null) && (datetime != "")){
-           $(this).datepicker('setDate', datetime);
-        }
-
-        if((region !=null) && (region !='' ) && (region != 'en')){
-           $(this).datepicker( $.datepicker.regional[ region+"" ] );
-        }
-        //show if has been initialized on first click
-        $(this).focus();
-    });
 }
 
 function showYearPicker(selector, options){
@@ -221,7 +129,6 @@ function getWeekday(date){
     if (loc['weekday_Fr']!=null) weekdays[4]=loc['weekday_Fr'];
     if (loc['weekday_Sa']!=null) weekdays[5]=loc['weekday_Sa'];
     if (loc['weekday_Su']!=null) weekdays[6]=loc['weekday_Su'];
-    //console.log(weekdays);
 
     return weekdays[(date.getDay()-1+7)%7]+','
 }

website/agenda/planung/studio-timeslots.cgi

@@ -71,8 +71,6 @@ if ( $action eq 'show_dates' ) {
     print "Content-Type:text/html\n\n";
 } else {
     print q{
-	    <script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
-	    <link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
 	    <link href="css/theme.default.css" rel="stylesheet">
 
 	<script src="js/jquery.tablesorter.min.js"></script>

website/agenda/planung/templates/assignments.html

@@ -1,12 +1,7 @@
 <TMPL_IF .allow.scan_series_events>
-
-	<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
-	<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
     <script src="js/jquery.autosize.min.js" type="text/javascript"></script>
-
 	<link href="css/theme.default.css" rel="stylesheet">
 	<script src="js/jquery.tablesorter.min.js"></script>
-	
     <script src="js/image.js" type="text/javascript"></script>
     <script>
         var event_id='<TMPL_VAR event_id>';

website/agenda/planung/templates/comments.html

@@ -4,14 +4,6 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title><TMPL_VAR .doc.title></title>
     <link type="text/css" href="css/comment.css" rel="stylesheet"/>
-    <!--
-    <link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
-    <script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
-
-    <script src="js/series.js" type="text/javascript"></script>
-    <script src="js/edit-event.js" type="text/javascript"></script>
-    <script src="js/image.js" type="text/javascript"></script>
-    -->
     <script src="js/jquery.autosize.min.js" type="text/javascript"></script>
     <script src="js/comment.js" type="text/javascript"></script>
     <script src="js/page-leave-handler.js" type="text/javascript"></script>
@@ -28,9 +20,6 @@
             );
         </TMPL_IF>
     </script>
-    <style>
-    
-    </style>
 </head>
 <body>
 

website/agenda/planung/templates/edit-event.html

@@ -6,11 +6,10 @@
     <link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
     <link href="css/event.css" type="text/css" rel="stylesheet"/> 
     <link type="text/css" href="css/comment.css" rel="stylesheet"/>    
+    <link rel="stylesheet" href="css/flatpickr.min.css" type="text/css" />    
 
     <!-- for edit series-->
-    <script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
+    <script src="js/flatpickr.js" type="text/javascript"></script>
-    <script src="js/jquery.autosize.min.js" type="text/javascript"></script>
-
     <script src="js/series.js" type="text/javascript"></script>
     <script src="js/edit-event.js" type="text/javascript"></script>
     <script src="js/image.js" type="text/javascript"></script>

website/agenda/planung/templates/edit-series.html

@@ -1,13 +1,7 @@
 <TMPL_IF .allow.read_series>
-
-	<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
-	<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
-
     <script src="js/jquery.autosize.min.js" type="text/javascript"></script>
 	<link href="css/theme.default.css" rel="stylesheet">
-
 	<script src="js/jquery.tablesorter.min.js"></script>
-	
     <script src="js/image.js" type="text/javascript"></script>
     <script>
         var region='<TMPL_VAR loc.region>';

website/agenda/planung/templates/edit-work-time.html

@@ -1,13 +1,9 @@
 <TMPL_IF .allow.read_series>
 
 	<script src="js/datetime.js" type="text/javascript"></script>
-<!--	<script src="js/localization.js" type="text/javascript"></script> -->
 	<link rel="stylesheet" href="css/work-time.css" type="text/css" /> 
 
-	<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
-	<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
     <script src="js/jquery.autosize.min.js" type="text/javascript"></script>
-
 	<link href="css/theme.default.css" rel="stylesheet">
 	<script src="js/jquery.tablesorter.min.js"></script>
 	

website/agenda/planung/templates/header-head.html

@@ -2,11 +2,12 @@
 var event_manager=0;
 </script>
 
-<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css" /> 
 <link rel="stylesheet" href="css/default.css" type="text/css" /> 
+<link rel="stylesheet" href="css/flatpickr.min.css" type="text/css" /> 
 
 <script src="js/jquery.min.js" type="text/javascript"></script>
-<script src="js/jquery-ui.min.js" type="text/javascript"></script>
+<script src="js/flatpickr.js" type="text/javascript"></script>
+
 <script src="js/default.js" type="text/javascript"></script>
 <script src="js/history.js" type="text/javascript"></script>
 <script src="js/localization.js" type="text/javascript"></script>

website/agenda/planung/templates/projects.html

@@ -1,5 +1,3 @@
-<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
-<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
 <script src="js/image.js" type="text/javascript"></script>
 
 <script type="text/javascript">
@@ -11,7 +9,6 @@
 <TMPL_IF .allow.create_project>
 <div style="clear:both" class="newproject">
     <button onclick="add_project('<TMPL_VAR name>')"><TMPL_VAR .loc.button_add_project></button><br/>
-
     <div id="edit_new" class="panel project editor" style="clear:both;display:none">
         <form method="post">
             <input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">

website/agenda/planung/templates/show-playout.html

@@ -1,11 +1,6 @@
-<link href="css/jquery-ui-timepicker.css" type="text/css" rel="stylesheet" /> 
-<script src="js/jquery-ui-timepicker.js" type="text/javascript"></script>
-
 <script src="js/jquery.autosize.min.js" type="text/javascript"></script>
 <link href="css/theme.default.css" rel="stylesheet">
-
 <script src="js/jquery.tablesorter.min.js"></script>
-
 <script src="js/image.js" type="text/javascript"></script>
 
 <table id="playout-table" class="table">