From: Andrey Kutejko <andy128k@gmail.com>
Date: Mon, 16 Apr 2018 05:56:04 +0000 (+0200)
Subject: use flatpickr for picking dates and datetimes
X-Git-Tag: 0.6~15
X-Git-Url: https://git.andy128k.dev/?a=commitdiff_plain;h=4ce825224ee6f5229948b69c5625c869dda3af39;p=ipf.git

use flatpickr for picking dates and datetimes
---

diff --git a/composer.json b/composer.json
index cfd7712..8911269 100644
--- a/composer.json
+++ b/composer.json
@@ -24,11 +24,10 @@
     "andy128k/pegp": "0.1.*@dev",
     "andy128k/routeexpression": "dev-master",
     "andy128k/ipf-legacy-template": "dev-master",
-    "bower-asset/jquery-ui": "~1",
-    "bower-asset/jqueryui-timepicker-addon": "dev-master",
     "npm-asset/jquery": "~2",
     "npm-asset/tablednd": "^1.0@dev",
-    "npm-asset/tinymce": "^4.7"
+    "npm-asset/tinymce": "^4.7",
+    "npm-asset/flatpickr": "^4.3@dev"
   },
   "require-dev": {
     "phpunit/phpunit": "4.4.*"
diff --git a/composer.lock b/composer.lock
index dc663b3..228f1b5 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "0832ee56c3ffe8771f66bb1d0b23f3a3",
+    "content-hash": "69fb0e48db3769923764fdf1212a7e24",
     "packages": [
         {
             "name": "andy128k/ipf-legacy-template",
@@ -192,101 +192,6 @@
             "description": "Route expression",
             "time": "2015-01-11T10:36:51+00:00"
         },
-        {
-            "name": "bower-asset/jquery",
-            "version": "2.2.4",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/jquery/jquery-dist.git",
-                "reference": "c0185ab7c75aab88762c5aae780b9d83b80eda72"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/jquery/jquery-dist/zipball/c0185ab7c75aab88762c5aae780b9d83b80eda72",
-                "reference": "c0185ab7c75aab88762c5aae780b9d83b80eda72",
-                "shasum": ""
-            },
-            "type": "bower-asset-library",
-            "extra": {
-                "bower-asset-main": "dist/jquery.js",
-                "bower-asset-ignore": [
-                    "package.json"
-                ]
-            },
-            "license": [
-                "MIT"
-            ],
-            "keywords": [
-                "browser",
-                "javascript",
-                "jquery",
-                "library"
-            ],
-            "time": "2016-05-20T17:24:43+00:00"
-        },
-        {
-            "name": "bower-asset/jquery-ui",
-            "version": "1.12.1",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/components/jqueryui.git",
-                "reference": "44ecf3794cc56b65954cc19737234a3119d036cc"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/components/jqueryui/zipball/44ecf3794cc56b65954cc19737234a3119d036cc",
-                "reference": "44ecf3794cc56b65954cc19737234a3119d036cc",
-                "shasum": ""
-            },
-            "require": {
-                "bower-asset/jquery": ">=1.6"
-            },
-            "type": "bower-asset-library",
-            "extra": {
-                "bower-asset-main": [
-                    "jquery-ui.js"
-                ],
-                "bower-asset-ignore": []
-            },
-            "license": [
-                "MIT"
-            ],
-            "time": "2016-09-16T05:47:55+00:00"
-        },
-        {
-            "name": "bower-asset/jqueryui-timepicker-addon",
-            "version": "dev-master",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/trentrichardson/jQuery-Timepicker-Addon.git",
-                "reference": "f9415cdac7516c1f8beff0ceb99c8f913915c7e2"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/trentrichardson/jQuery-Timepicker-Addon/zipball/f9415cdac7516c1f8beff0ceb99c8f913915c7e2",
-                "reference": "f9415cdac7516c1f8beff0ceb99c8f913915c7e2",
-                "shasum": ""
-            },
-            "type": "bower-asset-library",
-            "extra": {
-                "bower-asset-main": [
-                    "dist/jquery-ui-timepicker-addon.js",
-                    "dist/jquery-ui-timepicker-addon.css"
-                ],
-                "bower-asset-ignore": [
-                    "/CONTRIBUTING.md",
-                    "/Gruntfile.js",
-                    "/README.md",
-                    "/composer.json",
-                    "/jquery-ui-timepicker-addon.json",
-                    "/lib",
-                    "/package.json",
-                    "/src",
-                    "/test"
-                ]
-            },
-            "time": "2016-04-20T19:26:28+00:00"
-        },
         {
             "name": "d11wtq/boris",
             "version": "dev-master",
@@ -803,6 +708,102 @@
             ],
             "time": "2017-07-24T09:37:08+00:00"
         },
+        {
+            "name": "npm-asset/flatpickr",
+            "version": "4.4.4",
+            "dist": {
+                "type": "tar",
+                "url": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.4.4.tgz",
+                "reference": null,
+                "shasum": "fdeb083ca3d580eecb822a4080f67b06f0294fc7"
+            },
+            "require-dev": {
+                "npm-asset/autoprefixer-stylus": "dev-default|*",
+                "npm-asset/babel--core": ">=7.0.0-beta.42,<8.0.0",
+                "npm-asset/babel--plugin-proposal-object-rest-spread": ">=7.0.0-beta.42,<8.0.0",
+                "npm-asset/babel--plugin-proposal-optional-catch-binding": ">=7.0.0-beta.42,<8.0.0",
+                "npm-asset/babel--preset-env": ">=7.0.0-beta.42,<8.0.0",
+                "npm-asset/babel-plugin-transform-object-rest-spread": ">=6.26.0,<7.0.0",
+                "npm-asset/chokidar": "2.0.3",
+                "npm-asset/coveralls": ">=3.0.0,<4.0.0",
+                "npm-asset/fs-extra": ">=5.0.0,<6.0.0",
+                "npm-asset/glob": "dev-default|*",
+                "npm-asset/husky": ">=0.14.3,<0.15.0",
+                "npm-asset/jest": "22.4.3",
+                "npm-asset/lint-staged": ">=7.0.0,<8.0.0",
+                "npm-asset/magic-string": ">=0.24.0,<0.25.0",
+                "npm-asset/npm-run-all": ">=4.1.1,<5.0.0",
+                "npm-asset/prettier": ">=1.11.1,<2.0.0",
+                "npm-asset/rollup": ">=0.57.1,<0.58.0",
+                "npm-asset/rollup-plugin-babel": ">=4.0.0-beta.3,<5.0.0",
+                "npm-asset/rollup-plugin-livereload": ">=0.6.0,<0.7.0",
+                "npm-asset/rollup-plugin-serve": ">=0.4.2,<0.5.0",
+                "npm-asset/rollup-plugin-typescript": ">=0.8.1,<0.9.0",
+                "npm-asset/rtlcss": ">=2.2.1,<3.0.0",
+                "npm-asset/source-map": ">=0.7.2,<0.8.0",
+                "npm-asset/stylus": "dev-default|*",
+                "npm-asset/ts-jest": "22.4.2",
+                "npm-asset/ts-node": ">=5.0.1,<6.0.0",
+                "npm-asset/types--acorn": ">=4.0.3,<5.0.0",
+                "npm-asset/types--chokidar": ">=1.7.5,<2.0.0",
+                "npm-asset/types--fs-extra": ">=5.0.1,<6.0.0",
+                "npm-asset/types--glob": ">=5.0.35,<6.0.0",
+                "npm-asset/types--jest": ">=22.2.0,<23.0.0",
+                "npm-asset/types--jquery": ">=3.3.1,<4.0.0",
+                "npm-asset/types--node": ">=9.4.7,<10.0.0",
+                "npm-asset/types--stylus": ">=0.48.29,<0.49.0",
+                "npm-asset/types--uglify-js": ">=3.0.0,<4.0.0",
+                "npm-asset/typescript": ">=2.7.2,<3.0.0",
+                "npm-asset/uglify-js": ">=3.3.16,<4.0.0"
+            },
+            "type": "npm-asset-library",
+            "extra": {
+                "npm-asset-bugs": {
+                    "url": "https://github.com/chmln/flatpickr/issues"
+                },
+                "npm-asset-main": "dist/flatpickr.js",
+                "npm-asset-directories": [],
+                "npm-asset-repository": {
+                    "type": "git",
+                    "url": "git+https://github.com/chmln/flatpickr.git"
+                },
+                "npm-asset-scripts": {
+                    "build": "run-s build:pre build:build build:post",
+                    "build:pre": "rm -rf dist && mkdir -p dist/themes",
+                    "build:build": "ts-node build.ts",
+                    "build:post": "sh ./emitDeclarations.sh",
+                    "start": "npm run build:build -- --dev",
+                    "rollup:start": "rollup -w -c",
+                    "rollup:build": "rollup -c",
+                    "test": "run-s test:typecheck test:unit",
+                    "test:typecheck": "tsc -p src --noEmit",
+                    "test:unit": "jest --config .jest.json",
+                    "coveralls": "jest --config .jest.json --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+                    "precommit": "lint-staged"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Gregory",
+                    "email": "gregory.mkv@gmail.com"
+                }
+            ],
+            "description": "A lightweight, powerful javascript datetime picker",
+            "homepage": "https://chmln.github.io/flatpickr",
+            "keywords": [
+                "calendar",
+                "date",
+                "datetimepicker",
+                "javascript",
+                "lightweight",
+                "picker",
+                "time"
+            ],
+            "time": "2018-04-07T20:49:05+00:00"
+        },
         {
             "name": "npm-asset/jquery",
             "version": "2.2.4",
@@ -2032,8 +2033,8 @@
         "andy128k/pegp": 20,
         "andy128k/routeexpression": 20,
         "andy128k/ipf-legacy-template": 20,
-        "bower-asset/jqueryui-timepicker-addon": 20,
-        "npm-asset/tablednd": 20
+        "npm-asset/tablednd": 20,
+        "npm-asset/flatpickr": 20
     },
     "prefer-stable": false,
     "prefer-lowest": false,
diff --git a/ipf/admin/app.php b/ipf/admin/app.php
index 058bfe8..28090c1 100644
--- a/ipf/admin/app.php
+++ b/ipf/admin/app.php
@@ -77,7 +77,6 @@ class IPF_Admin_App extends IPF_Application
             'assets/css/admin.css' => 'admin/admin.css',
             'assets/css/print.css' => 'admin/admin-print.css',
             'assets/css/login.css' => 'admin/login.css',
-            'jquery-ui/themes/smoothness/images' => 'admin/images',
         );
     }
 
diff --git a/ipf/admin/assets/css/admin.css b/ipf/admin/assets/css/admin.css
index 2cbe0e5..41436fa 100644
--- a/ipf/admin/assets/css/admin.css
+++ b/ipf/admin/assets/css/admin.css
@@ -1,6 +1,5 @@
 /*= require base.css */
 /*= require changelists.css */
 /*= require forms.css */
-/*= require jquery-ui/themes/smoothness/jquery-ui.min.css */
-/*= require jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.min.css */
+/*= require flatpickr/dist/flatpickr.min.css */
 
diff --git a/ipf/admin/assets/js/admin.js b/ipf/admin/assets/js/admin.js
index 9a9a0e3..94432e7 100644
--- a/ipf/admin/assets/js/admin.js
+++ b/ipf/admin/assets/js/admin.js
@@ -1,11 +1,16 @@
 //= require jquery/dist/jquery.min.js
-//= require jquery-ui/jquery-ui.min.js
-//= require jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.min.js
-//= require jqueryui-timepicker-addon/dist/i18n/jquery-ui-timepicker-addon-i18n.min.js
+//= require flatpickr/dist/flatpickr.min.js
 //= require tablednd/dist/jquery.tablednd.min.js
 //= require tinymce.js
 
 $(function(){
+    function initWidget(selector, init) {
+        var elements = document.querySelectorAll(selector);
+        for (var i = 0; i < elements.length; ++i) {
+            init(elements[i]);
+        }
+    }
+
     $('.toggle-sidebar').on('change', function() {
         $('body').toggleClass('pushed');
         return false;
@@ -39,20 +44,12 @@ $(function(){
         });
     });
 
-    $('.dateinput').each(function(){
-        var opts = {
-            dateFormat: $(this).data('format') || 'yy-mm-dd'
-        };
-        $(this).datepicker(opts);
-    });
-
-    $('.datetimeinput').each(function(){
-        var opts = {
-            dateFormat: $(this).data('dateformat') || 'yy-mm-dd',
-            timeFormat: $(this).data('timeformat') || 'HH-mm-ss'
-        };
-        $(this).datetimepicker(opts);
-    });
+    function initDatePicker(defaultFormat, element) {
+        flatpickr(element, {
+            defaultDate: element.val,
+            dateFormat: element.dataset.format || defaultFormat
+        });
+    }
 
     $('.checkgroup').closest('ul').each(function(){
         var master = $(this),
@@ -65,6 +62,9 @@ $(function(){
         });
     });
 
+    initWidget('.dateinput', initDatePicker.bind(null, 'Y-m-d'));
+    initWidget('.datetimeinput', initDatePicker.bind(null, 'Y-m-d H-i-s'));
+
     // html
     function ipf_filebrowser(filebrowser_url, field_name, url, type, win) {
         tinyMCE.activeEditor.windowManager.open({
diff --git a/ipf/form/widget/dateinput.php b/ipf/form/widget/dateinput.php
index 40af6b1..19a7ee4 100644
--- a/ipf/form/widget/dateinput.php
+++ b/ipf/form/widget/dateinput.php
@@ -20,7 +20,7 @@ class IPF_Form_Widget_DateInput extends IPF_Form_Widget_Input
             $value = IPF_Format::formatDate($this->format, strtotime($value));
 
         $extra_attrs['class'] = 'dateinput';
-        $extra_attrs['data-format'] = IPF_Format::makeDateFormat($this->format, IPF_Format::$pickerControls);
+        $extra_attrs['data-format'] = IPF_Format::makeDateFormat($this->format, IPF_Format::$dateControls);
         return parent::render($name, $value, $extra_attrs);
     }
 
diff --git a/ipf/form/widget/datetimeinput.php b/ipf/form/widget/datetimeinput.php
index 6fa1c7f..62c9e96 100644
--- a/ipf/form/widget/datetimeinput.php
+++ b/ipf/form/widget/datetimeinput.php
@@ -20,8 +20,7 @@ class IPF_Form_Widget_DatetimeInput extends IPF_Form_Widget_Input
             $value = IPF_Format::formatDate($this->format, strtotime($value.' GMT'));
 
         $extra_attrs['class'] = 'datetimeinput';
-        $extra_attrs['data-dateformat'] = IPF_Format::makeDateFormat($this->format, IPF_Format::$pickerControls);
-        $extra_attrs['data-timeformat'] = IPF_Format::makeTimeFormat($this->format, IPF_Format::$pickerControls);
+        $extra_attrs['data-format'] = IPF_Format::makeFormat($this->format, IPF_Format::$dateControls);
         return parent::render($name, $value, $extra_attrs);
     }