add code

polozin · Apr 5, 2018 · 4e83548 · 4e83548
1 parent ac8cba6
commit 4e83548
Show file tree

Hide file tree

Showing 11 changed files with 14,802 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,13 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/.idea/date-and-time-picker.iml b/.idea/date-and-time-picker.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md b/README.md
@@ -1,2 +1,12 @@
 # date-and-time-picker
-Jquery plagin
+Jquery plugin witch moment js
+
+
+ settings..
+selectData: default 'now' to set data paste string like '2016-04-05 10:00'  in date format
+locale: default 'en' enable any language from moment js
+dateFormat: default 'YYYY-MM-DD HH:mm' string in format from moment.js
+positionShift: { top: 20, left: 0}
+title: 'Select Date and Time'
+buttonTitle: 'Select'
+
diff --git a/css/datetimepicker.css b/css/datetimepicker.css
@@ -0,0 +1,34 @@
+.cursorily{ cursor: pointer;}
+.hov:hover{ color: #000;}
+.ico-size{font-size: 16px;}
+.ico-size-month{font-size: 26px!important; line-height: 26px!important;}
+.ico-size-large{ font-size: 40px!important; line-height: 30px;}
+.dtp_main{ border: solid 1px #eee; border-radius: 3px; background-color: #fff; padding: 8px 0 8px 8px;}
+.dtp_main span, .dtp_main i{ display: inline-block; padding-right: 8px;}
+.dtp_modal-win{position: fixed;left: 0; top: 0; width: 100%; height: 100%;
+    z-index: 999; background-color: #eeeeee; opacity: 0.6;}
+.dtp_modal-content{ background-color: #fff; border-radius: 10px; width: 624px;
+    position: absolute; z-index: 1000; top: 100px; left: 100px; font-size: 16px;font-weight: normal;}
+.dtp_modal-content-no-time{ background-color: #fff; border-radius: 10px; width: 312px;
+    position: absolute; z-index: 1000; top: 100px; left: 100px; font-size: 16px;font-weight: normal;}
+.dtp_modal-title{ border-bottom: solid 3px #01adff; padding: 16px 36px; margin-bottom: 16px;  font-size: 22px; }
+.dtp_modal-cell-date{ width: 312px;  float: right; margin-bottom: 22px; margin-top: 6px;}
+.dtp_modal-cell-time{width: 311px; float: left; direction: ltr; border-right: solid 1px #000;}
+.dtp_modal-months{ color: #7d7d7d; text-align: center; font-size: 20px; padding: 0 20px;}
+.dtp_modal-months span{ display: inline-block; padding: 10px 20px; width: 182px;}
+.dtp_modal-calendar{ width: 266px; margin-left: 22px; }
+.dtp_modal-calendar-cell{ width: 38px; padding: 7px 0; display: inline-block; text-align: center;}
+.dtp_modal-colored{ color: #01adff; }
+.dtp_modal-grey{ color: #7d7d7d; }
+.dtp_modal-cell-selected{ background-color: #01adff; border-radius: 48%;  transition: background-color 1s ease-out;}
+.dtp_modal-time-block{ height: 212px; width: 310px; }
+.dpt_modal-button{ background-color: #01adff; color: #fff; font-size: 24px; padding: 8px 40px; float: left;
+    text-align: center; display: inline-block; margin-left: 22px; cursor: pointer; border: solid 1px #fff;
+border-radius: 3px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
+.dtp_modal-time-line{ text-align: center; color: #7d7d7d; font-size: 20px; padding-top: 15px;  }
+.dtp_modal-time-mechanic{ padding-top: 16px;}
+.dtp_modal-append{ color: #7d7d7d; padding-left: 108px; font-weight: normal; }
+.dtp_modal-midle{ display: inline-block; width: 40px; }
+.dtp_modal-midle-dig{display: inline-block; width: 16px; text-align: center; }
+.dtp_modal-digits{ font-size: 50px; padding-left: 96px;}
+.dtp_modal-digit{  }
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="css/datetimepicker.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="js/moment-with-locales.js"></script>
+    <script type="text/javascript" src="js/datetimepicker.js"></script>
+    <style>
+        body{ background-color: beige; direction: ltr;}
+    </style>
+    <script type="text/javascript">
+    $(document).ready( function () {
+        $('#picker').dateTimePicker();
+        $('#picker-no-time').dateTimePicker({ showTime: false, dateFormat: 'DD/MM/YYYY'});
+    })
+    </script>
+    <title>Date Time Picker</title>
+</head>
+<body>
+<div style="width: 250px; margin: 50px auto;">
+    <div id="picker" </div>
+    <input type="hidden" id="result" value="" />
+</div>
+<div style="width: 250px; margin: 50px auto;">
+    <div id="picker-no-time"></div>
+    <input type="hidden" id="result2" value="" />
+</div>
+</body>
+</html>