{"id":1421,"date":"2023-05-10T10:25:13","date_gmt":"2023-05-10T07:25:13","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1421"},"modified":"2023-05-10T10:25:15","modified_gmt":"2023-05-10T07:25:15","slug":"date-and-time-picker","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1421\/","title":{"rendered":"Date and Time Picker"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Date and Time Picker\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/IAmzCocYnO4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\"> &lt;div class=&quot;app-container&quot; ng-app=&quot;dateTimeApp&quot; ng-controller=&quot;dateTimeCtrl as ctrl&quot; ng-cloak&gt;\n\t\t\n    &lt;div date-picker\n       datepicker-title=&quot;Select Date&quot;\n       picktime=&quot;true&quot;\n       pickdate=&quot;true&quot;\n       pickpast=&quot;false&quot;\n       mondayfirst=&quot;false&quot;\n       custom-message=&quot;You have selected&quot;\n       selecteddate=&quot;ctrl.selected_date&quot;\n       updatefn=&quot;ctrl.updateDate(newdate)&quot;&gt;\n    \n      &lt;div class=&quot;datepicker&quot;\n         ng-class=&quot;{\n          'am': timeframe == 'am',\n          'pm': timeframe == 'pm',\n          'compact': compact\n        }&quot;&gt;\n        &lt;div class=&quot;datepicker-header&quot;&gt;\n          &lt;div class=&quot;datepicker-title&quot; ng-if=&quot;datepicker_title&quot;&gt;{{ datepickerTitle }}&lt;\/div&gt;\n          &lt;div class=&quot;datepicker-subheader&quot;&gt;{{ customMessage }} {{ selectedDay }} {{ monthNames[localdate.getMonth()] }} {{ localdate.getDate() }}, {{ localdate.getFullYear() }}&lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;datepicker-calendar&quot;&gt;\n          &lt;div class=&quot;calendar-header&quot;&gt;\n            &lt;div class=&quot;goback&quot; ng-click=&quot;moveBack()&quot; ng-if=&quot;pickdate&quot;&gt;\n              &lt;svg width=&quot;30&quot; height=&quot;30&quot;&gt;\n                &lt;path fill=&quot;none&quot; stroke=&quot;#0DAD83&quot; stroke-width=&quot;3&quot; d=&quot;M19,6 l-9,9 l9,9&quot;\/&gt;\n              &lt;\/svg&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;current-month-container&quot;&gt;{{ currentViewDate.getFullYear() }} {{ currentMonthName() }}&lt;\/div&gt;\n            &lt;div class=&quot;goforward&quot; ng-click=&quot;moveForward()&quot; ng-if=&quot;pickdate&quot;&gt;\n              &lt;svg width=&quot;30&quot; height=&quot;30&quot;&gt;\n                &lt;path fill=&quot;none&quot; stroke=&quot;#0DAD83&quot; stroke-width=&quot;3&quot; d=&quot;M11,6 l9,9 l-9,9&quot; \/&gt;\n              &lt;\/svg&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;calendar-day-header&quot;&gt;\n            &lt;span ng-repeat=&quot;day in days&quot; class=&quot;day-label&quot;&gt;{{ day.short }}&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;calendar-grid&quot; ng-class=&quot;{false: 'no-hover'}[pickdate]&quot;&gt;\n            &lt;div\n              ng-class=&quot;{'no-hover': !day.showday}&quot;\n              ng-repeat=&quot;day in month&quot;\n              class=&quot;datecontainer&quot;\n              ng-style=&quot;{'margin-left': calcOffset(day, $index)}&quot;\n              track by $index&gt;\n              &lt;div class=&quot;datenumber&quot; ng-class=&quot;{'day-selected': day.selected }&quot; ng-click=&quot;selectDate(day)&quot;&gt;\n                {{ day.daydate }}\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;timepicker&quot; ng-if=&quot;picktime == 'true'&quot;&gt;\n          &lt;div ng-class=&quot;{'am': timeframe == 'am', 'pm': timeframe == 'pm' }&quot;&gt;\n            &lt;div class=&quot;timepicker-container-outer&quot; selectedtime=&quot;time&quot; timetravel&gt;\n              &lt;div class=&quot;timepicker-container-inner&quot;&gt;\n                &lt;div class=&quot;timeline-container&quot; ng-mousedown=&quot;timeSelectStart($event)&quot; sm-touchstart=&quot;timeSelectStart($event)&quot;&gt;\n                  &lt;div class=&quot;current-time&quot;&gt;\n                    &lt;div class=&quot;actual-time&quot;&gt;{{ time }}&lt;\/div&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;timeline&quot;&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;hours-container&quot;&gt;\n                    &lt;div class=&quot;hour-mark&quot; ng-repeat=&quot;hour in getHours() track by $index&quot;&gt;&lt;\/div&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;div class=&quot;display-time&quot;&gt;\n                  &lt;div class=&quot;decrement-time&quot; ng-click=&quot;adjustTime('decrease')&quot;&gt;\n                    &lt;svg width=&quot;24&quot; height=&quot;24&quot;&gt;\n                      &lt;path stroke=&quot;white&quot; stroke-width=&quot;2&quot; d=&quot;M8,12 h8&quot;\/&gt;\n                    &lt;\/svg&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;time&quot; ng-class=&quot;{'time-active': edittime.active}&quot;&gt;\n                    &lt;input type=&quot;text&quot; class=&quot;time-input&quot; ng-model=&quot;edittime.input&quot; ng-keydown=&quot;changeInputTime($event)&quot; ng-focus=&quot;edittime.active = true; edittime.digits = [];&quot; ng-blur=&quot;edittime.active = false&quot;\/&gt;\n                    &lt;div class=&quot;formatted-time&quot;&gt;{{ edittime.formatted }}&lt;\/div&gt;\n                  &lt;\/div&gt;\n                  &lt;div class=&quot;increment-time&quot; ng-click=&quot;adjustTime('increase')&quot;&gt;\n                    &lt;svg width=&quot;24&quot; height=&quot;24&quot;&gt;\n                      &lt;path stroke=&quot;white&quot; stroke-width=&quot;2&quot; d=&quot;M12,7 v10 M7,12 h10&quot;\/&gt;\n                    &lt;\/svg&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;div class=&quot;am-pm-container&quot;&gt;\n                  &lt;div class=&quot;am-pm-button&quot; ng-click=&quot;changetime('am');&quot;&gt;am&lt;\/div&gt;\n                  &lt;div class=&quot;am-pm-button&quot; ng-click=&quot;changetime('pm');&quot;&gt;pm&lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        \n        &lt;div class=&quot;buttons-container&quot;&gt;\n          &lt;div class=&quot;cancel-button&quot;&gt;CANCEL&lt;\/div&gt;\n          &lt;div class=&quot;save-button&quot;&gt;SAVE&lt;\/div&gt;\n        &lt;\/div&gt;\n        \n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.2\/jquery.min.js&quot;&gt;&lt;\/script&gt; \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.5.2\/angular.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">[ng\\:cloak], [ng-cloak], .ng-cloak {\n\tdisplay: none;\n  }\n  \n  * {\n\tbox-sizing: border-box;\n  }\n  \n  html, body {\n\tmargin: 0;\n\tbackground: #222;\n  }\n  \n  .app-container {\n\tborder-radius: 4px;\n\toverflow: hidden;\n\twidth: 720px;\n\theight: auto;\n\tmax-width: 100%;\n\tposition: absolute;\n\ttop: 120px;\n\tleft: 0;\n\tright: 0;\n\tmargin: auto;\n  }\n  \n  .buttons-container {\n\tposition: absolute;\n\tbottom: 15px;\n\tright: 0;\n\theight: 40px;\n\tfont-family: &quot;Roboto&quot;, sans-serif;\n  }\n  \n  .cancel-button,\n  .save-button {\n\tfloat: left;\n\theight: 40px;\n\tline-height: 40px;\n\tpadding: 0 15px;\n\tborder-radius: 2px;\n\tmargin-right: 15px;\n\tcursor: pointer;\n\ttransition: all 0.15s ease;\n  }\n  \n  .cancel-button {\n\tbackground: white;\n\tcolor: #0DAD83;\n  }\n  \n  .save-button {\n\tbackground: #0DAD83;\n\tcolor: white;\n  }\n  \n  \/* Datepicker Stuff *\/\n  .datepicker {\n\tposition: relative;\n\twidth: 100%;\n\tdisplay: block;\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\t-o-user-select: none;\n\tuser-select: none;\n\tfont-family: &quot;Roboto&quot;, sans-serif;\n\toverflow: hidden;\n\ttransition: background 0.15s ease;\n  }\n  \n  .datepicker.am {\n\tbackground-image: url('https:\/\/images.unsplash.com\/photo-1465488867967-ffb57e7f0a89?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1170&amp;q=80');\n\tbackground-position: top;\n\t\n  }\n  \n  .datepicker.pm {\n\tbackground-image: url('https:\/\/images.unsplash.com\/photo-1495616811223-4d98c6e9c869?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1332&amp;q=80');\n\tbackground-position: left;\n  }\n  \n  .datepicker-header {\n\twidth: 100%;\n\tcolor: white;\n\toverflow: hidden;\n  }\n  \n  .datepicker-title {\n\twidth: 50%;\n\tfloat: left;\n\theight: 60px;\n\tline-height: 60px;\n\tpadding: 0 15px;\n\ttext-align: left;\n\tfont-size: 20px;\n  }\n  \n  .datepicker-subheader {\n\twidth: 50%;\n\tfloat: left;\n\theight: 60px;\n\tline-height: 60px;\n\tfont-size: 14px;\n\tpadding: 0 15px;\n\ttext-align: right;\n  }\n  \n  .datepicker-calendar {\n\twidth: 50%;\n\tfloat: left;\n\tpadding: 20px 15px 15px;\n\tmax-width: 400px;\n\tdisplay: block;\n  }\n  \n  .calendar-header {\n\tcolor: black;\n\tfont-weight: bolder;\n\ttext-align: center;\n\tfont-size: 18px;\n\tpadding: 10px 0;\n\tposition: relative;\n  }\n  \n  .current-month-container {\n\tdisplay: inline-block;\n\theight: 30px;\n\tposition: relative;\n  }\n  \n  .goback,\n  .goforward {\n\theight: 30px;\n\twidth: 30px;\n\tborder-radius: 30px;\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tposition: relative;\n\ttop: -4px;\n  }\n  \n  .goback path,\n  .goforward path {\n\ttransition: stroke 0.15s ease;\n  }\n  \n  .goback {\n\tfloat: left;\n\tmargin-left: 3.8%;\n  }\n  \n  .goforward {\n\tfloat: right;\n\tmargin-right: 3.8%;\n  }\n  \n  .calendar-day-header {\n\twidth: 100%;\n\tposition: relative;\n  }\n  \n  .day-label {\n\tcolor: #8A8A8A;\n\tpadding: 5px 0;\n\twidth: 14.2857142%;\n\tdisplay: inline-block;\n\ttext-align: center;\n  }\n  \n  .datecontainer {\n\twidth: 14.2857142%;\n\tdisplay: inline-block;\n\ttext-align: center;\n\tpadding: 4px 0;\n  }\n  \n  .datenumber {\n\tmax-width: 35px;\n\tmax-height: 35px;\n\tline-height: 35px;\n\tmargin: 0 auto;\n\t\/* color: #8A8A8A; *\/\n\tposition: relative;\n\ttext-align: center;\n\tcursor: pointer;\n\tz-index: 1;\n\ttransition: all 0.25s cubic-bezier(0.7, -0.12, 0.2, 1.12);\n  }\n  \n  .no-hover .datenumber,\n  .no-hover .datenumber:hover,\n  .no-hover .datenumber:before,\n  .no-hover .datenumber:hover::before {\n\tcursor: default;\n\tcolor: #8A8A8A;\n\tbackground: transparent;\n\topacity: 0.5;\n  }\n  \n  .no-hover .datenumber.day-selected {\n\tcolor: white;\n  }\n  \n  .datenumber:hover {\n\tcolor: white;\n  }\n  \n  .datenumber:before {\n\tcontent: &quot;&quot;;\n\tdisplay: block;\n\tposition: absolute;\n\theight: 35px;\n\twidth: 35px;\n\tborder-radius: 100px;\n\tz-index: -1;\n\tbackground: transparent;\n\ttransform: scale(0.75);\n\ttransition: all 0.25s cubic-bezier(0.7, -0.12, 0.2, 1.12);\n\ttransition-property: background, transform, color, border;\n  }\n  \n  .datenumber:hover::before {\n\tbackground: #FFAB91;\n\ttransform: scale(1);\n  }\n  \n  .day-selected {\n\tcolor: white;\n  }\n  \n  .datenumber.day-selected:before {\n\tbackground: #FF6E40;\n\ttransform: scale(1);\n\t-webkit-animation: select-date 0.25s forwards;\n\tanimation: select-date 0.25s forwards;\n  }\n  \n  @-webkit-keyframes select-date {\n\t0% {\n\t  background: #FFAB91;\n\t}\n\t100% {\n\t  background: #FF6E40;\n\t}\n  }\n  @keyframes select-date {\n\t0% {\n\t  background: #FFAB91;\n\t}\n\t100% {\n\t  background: #FF6E40;\n\t}\n  }\n  \/* timepicker styles *\/\n  .timepicker-container-outer {\n\twidth: 50%;\n\tmax-width: 700px;\n\tfloat: left;\n\tdisplay: block;\n\tpadding: 40px 30px 30px;\n\tposition: relative;\n\ttop: 50px;\n\toverflow: hidden;\n\t-webkit-tap-highlight-color: transparent;\n\ttransition: background 0.15s ease;\n  }\n  \n  .timepicker-container-inner {\n\twidth: 100%;\n\theight: 100%;\n\tmax-width: 320px;\n\tmargin: 0 auto;\n\tposition: relative;\n\tdisplay: block;\n  }\n  \n  .timeline-container {\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 100%;\n\theight: 36px;\n  }\n  \n  .current-time {\n\tdisplay: block;\n\tposition: absolute;\n\tz-index: 1;\n\twidth: 40px;\n\theight: 40px;\n\tborder-radius: 20px;\n\ttop: -25px;\n\tleft: -20px;\n\tcursor: pointer;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n  }\n  \n  .current-time::after {\n\tcontent: &quot;&quot;;\n\tdisplay: block;\n\twidth: 40px;\n\theight: 40px;\n\tposition: absolute;\n\tbackground: #FF6E40;\n\ttransition: all 0.15s ease;\n\ttransform: rotate(45deg);\n\tborder-radius: 20px 20px 3px 20px;\n\tz-index: -1;\n\ttop: 0;\n  }\n  \n  .actual-time {\n\tcolor: white;\n\tline-height: 40px;\n\tfont-size: 12px;\n\ttext-align: center;\n\ttransition: all 0.15s ease;\n  }\n  \n  .timeline {\n\tdisplay: block;\n\tz-index: 1;\n\twidth: 100%;\n\theight: 2px;\n\tposition: absolute;\n\tbottom: 0;\n  }\n  \n  .timeline::before, .timeline::after {\n\tcontent: &quot;&quot;;\n\tdisplay: block;\n\twidth: 2px;\n\theight: 10px;\n\ttop: -6px;\n\tposition: absolute;\n\tbackground: #0DAD83;\n\tleft: -1px;\n\ttransition: background 0.15s ease;\n  }\n  \n  .timeline::after {\n\tleft: auto;\n\tright: -1px;\n  }\n  \n  .hours-container {\n\tdisplay: block;\n\tz-index: 0;\n\twidth: 100%;\n\theight: 10px;\n\tposition: absolute;\n\ttop: 31px;\n\tleft: 1px;\n  }\n  \n  .hour-mark {\n\twidth: 2px;\n\tdisplay: block;\n\tfloat: left;\n\theight: 4px;\n\tbackground: #0DAD83;\n\tposition: relative;\n\tmargin-left: calc((100% \/ 12) - 2px);\n\ttransition: background 0.15s ease;\n  }\n  \n  .hour-mark:nth-child(3n) {\n\theight: 6px;\n\ttop: -1px;\n  }\n  \n  .display-time {\n\twidth: calc(60% - 30px);\n\tdisplay: block;\n\tmargin-top: 30px;\n\theight: 36px;\n\tline-height: 36px;\n\toverflow: hidden;\n\tfloat: left;\n\tposition: relative;\n\tfont-size: 20px;\n\ttext-align: center;\n\ttransition: color 0.15s ease;\n  }\n  \n  .decrement-time,\n  .increment-time {\n\tcursor: pointer;\n\tposition: absolute;\n\tdisplay: block;\n\twidth: 24px;\n\theight: 24px;\n\tline-height: 24px;\n\ttop: 6px;\n\tfont-size: 20px;\n  }\n  \n  .decrement-time {\n\tleft: 0;\n\ttext-align: left;\n  }\n  \n  .increment-time {\n\tright: 0;\n\ttext-align: right;\n  }\n  \n  .increment-time path,\n  .decrement-time path {\n\ttransition: all 0.15s ease;\n  }\n  \n  .time {\n\twidth: calc(100% - 48px);\n\tposition: relative;\n\tleft: 24px;\n\theight: 36px;\n  }\n  .time:after {\n\tcontent: &quot;&quot;;\n\theight: 2px;\n\twidth: 100%;\n\tposition: absolute;\n\tbottom: 0;\n\tbackground: white;\n\tleft: 0;\n\tright: 0;\n\topacity: 0.5;\n\ttransition: all 0.15s ease;\n  }\n  \n  .time.time-active:after {\n\tdisplay: none;\n  }\n  \n  .time-input {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\theight: 34px;\n\tline-height: 34px;\n\tbottom: 2px;\n\twidth: 100%;\n\tborder: none;\n\tbackground: none;\n\ttext-align: center;\n\tcolor: white;\n\tfont-size: inherit;\n\topacity: 0;\n\ttransition: all 0.15s ease;\n\tcursor: pointer;\n  }\n  .time-input:focus, .time-input:active {\n\toutline: none;\n  }\n  \n  .formatted-time {\n\tcursor: pointer;\n  }\n  \n  .time-input:focus {\n\tcursor: auto;\n  }\n  .time-input:focus ~ .formatted-time {\n\tborder-radius: 2px;\n\tbackground: #0DAD83;\n\tcolor: white;\n\tcursor: default;\n  }\n  \n  .am-pm-container {\n\twidth: 40%;\n\tpadding-left: 15px;\n\tfloat: right;\n\theight: 36px;\n\tline-height: 36px;\n\tdisplay: block;\n\tposition: relative;\n\tmargin-top: 30px;\n  }\n  \n  .am-pm-button {\n\twidth: calc(50% - 5px);\n\theight: 36px;\n\tline-height: 36px;\n\tbackground: #2196F3;\n\ttext-align: center;\n\tcolor: white;\n\tborder-radius: 4px;\n\tfloat: left;\n\tcursor: pointer;\n  }\n  \n  .am-pm-button:first-child {\n\tbackground: #0DAD83;\n\tcolor: white;\n  }\n  \n  .am-pm-button:last-child {\n\tbackground: white;\n\tcolor: #0DAD83;\n\tmargin-left: 10px;\n  }\n  \n  @-webkit-keyframes select-date-pm {\n\t0% {\n\t  background: rgba(255, 255, 255, 0.5);\n\t}\n\t100% {\n\t  background: #FFF;\n\t}\n  }\n  @keyframes select-date-pm {\n\t0% {\n\t  background: rgba(255, 255, 255, 0.5);\n\t}\n\t100% {\n\t  background: #FFF;\n\t}\n  }\n  .datepicker.am .datepicker-header {\n\tcolor: white;\n\tbackground: #0DAD83;\n  }\n  .datepicker.am .current-time::after {\n\tbackground: #0DAD83;\n  }\n  .datepicker.am .actual-time {\n\tcolor: white;\n  }\n  .datepicker.am .display-time {\n\tcolor: #FF6E40;\n  }\n  .datepicker.am .time-input {\n\tcolor: #FF693C;\n  }\n  .datepicker.am .time:after {\n\tbackground: #FF693C;\n  }\n  .datepicker.am .increment-time path,\n  .datepicker.am .decrement-time path {\n\tstroke: #FF693C;\n  }\n  \n  .datepicker.pm .datepicker-header {\n\tbackground: white;\n\tcolor: #FF693C;\n  }\n  .datepicker.pm .datepicker-subheader {\n\tcolor: #0DAD83;\n  }\n  .datepicker.pm .goback:before,\n  .datepicker.pm .goback:after,\n  .datepicker.pm .goforward:before,\n  .datepicker.pm .goforward:after {\n\tbackground: rgb(255, 255, 255);\n  }\n  .datepicker.pm .day-label {\n\tcolor: white;\n  }\n  .datepicker.pm .datenumber {\n\tcolor: white;\n  }\n  .datepicker.pm .datenumber:hover::before {\n\tbackground: rgba(255, 255, 255, 0.5);\n\ttransform: scale(1);\n  }\n  .datepicker.pm .datenumber.day-selected {\n\tcolor: #FF693C;\n  }\n  .datepicker.pm .datenumber.day-selected:before {\n\tbackground: white;\n\t-webkit-animation: select-date-pm 0.25s forwards;\n\tanimation: select-date-pm 0.25s forwards;\n  }\n  .datepicker.pm .current-month-container {\n\tcolor: white;\n  }\n  .datepicker.pm .current-time::after {\n\tbackground: white;\n  }\n  .datepicker.pm .actual-time {\n\tcolor: #FF6E40;\n  }\n  .datepicker.pm .display-time {\n\tcolor: white;\n  }\n  .datepicker.pm .timeline::before, .datepicker.pm .pm .timeline::after {\n\tbackground: white;\n  }\n  .datepicker.pm .hour-mark {\n\tbackground: white;\n  }\n  .datepicker.pm .am-pm-button:last-child {\n\tcolor: #FF6E40;\n  }\n  .datepicker.pm .cancel-button {\n\tbackground: none;\n\tcolor: white;\n  }\n  .datepicker.pm .save-button {\n\tbackground: white;\n\tcolor: #FF693C;\n  }\n  .datepicker.pm .goback path,\n  .datepicker.pm .goforward path {\n\tstroke: white;\n  }\n  .datepicker.pm .time-input:focus ~ .formatted-time {\n\tbackground: white;\n\tcolor: #FF693C;\n  }\n  \n  .datepicker.compact .datepicker-title,\n  .datepicker.compact .datepicker-subheader {\n\twidth: 100%;\n\ttext-align: center;\n  }\n  .datepicker.compact .datepicker-title {\n\theight: 50px;\n\tline-height: 50px;\n  }\n  .datepicker.compact .datepicker-subheader {\n\theight: 30px;\n\tline-height: 30px;\n  }\n  .datepicker.compact .display-time {\n\twidth: 60%;\n\tfont-size: 20px;\n\tline-height: 36px;\n  }\n  .datepicker.compact .app-container {\n\twidth: 100%;\n  }\n  .datepicker.compact .datepicker-calendar {\n\twidth: 100%;\n\tmargin: 0 auto;\n\tfloat: none;\n  }\n  .datepicker.compact .timepicker-container-outer {\n\twidth: 100%;\n\tmargin: 0 auto;\n\tfloat: none;\n\ttop: -15px;\n  }\n  .datepicker.compact .buttons-container {\n\tposition: relative;\n\tfloat: right;\n  }<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">var app = angular.module('dateTimeApp', []);\n\napp.controller('dateTimeCtrl', function ($scope) {\n\tvar ctrl = this;\n\t\n\tctrl.selected_date = new Date();\n\tctrl.selected_date.setHours(10);\n\tctrl.selected_date.setMinutes(0);\n\t\n\tctrl.updateDate = function (newdate) {\n\t\t\n\t\t\/\/ Do something with the returned date here.\n\t\t\n\t\tconsole.log(newdate);\n\t};\n});\n\n\/\/ Date Picker\napp.directive('datePicker', function ($timeout, $window) {\n    return {\n        restrict: 'AE',\n        scope: {\n            selecteddate: &quot;=&quot;,\n            updatefn: &quot;&amp;&quot;,\n            open: &quot;=&quot;,\n            datepickerTitle: &quot;@&quot;,\n            customMessage: &quot;@&quot;,\n            picktime: &quot;@&quot;,\n            pickdate: &quot;@&quot;,\n            pickpast: '=',\n\t\t\tmondayfirst: '@'\n        },\n\t\ttransclude: true,\n        link: function (scope, element, attrs, ctrl, transclude) {\n\t\t\ttransclude(scope, function(clone, scope) {\n\t\t\t\telement.append(clone);\n\t\t\t});\n\t\t\t\n            if (!scope.selecteddate) {\n                scope.selecteddate = new Date();\n            }\n\n            if (attrs.datepickerTitle) {\n                scope.datepicker_title = attrs.datepickerTitle;\n            }\n\n            scope.days = [\n                { &quot;long&quot;:&quot;Sunday&quot;,&quot;short&quot;:&quot;Sun&quot; },\n                { &quot;long&quot;:&quot;Monday&quot;,&quot;short&quot;:&quot;Mon&quot; },\n                { &quot;long&quot;:&quot;Tuesday&quot;,&quot;short&quot;:&quot;Tue&quot; },\n                { &quot;long&quot;:&quot;Wednesday&quot;,&quot;short&quot;:&quot;Wed&quot; },\n                { &quot;long&quot;:&quot;Thursday&quot;,&quot;short&quot;:&quot;Thu&quot; },\n                { &quot;long&quot;:&quot;Friday&quot;,&quot;short&quot;:&quot;Fri&quot; },\n                { &quot;long&quot;:&quot;Saturday&quot;,&quot;short&quot;:&quot;Sat&quot; },\n            ];\n\t\t\tif (scope.mondayfirst == 'true') {\n\t\t\t\tvar sunday = scope.days[0];\n\t\t\t\tscope.days.shift();\n\t\t\t\tscope.days.push(sunday);\n\t\t\t}\n\n            scope.monthNames = [\n                &quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;\n            ];\n\n            function getSelected() {\n                if (scope.currentViewDate.getMonth() == scope.localdate.getMonth()) {\n                    if (scope.currentViewDate.getFullYear() == scope.localdate.getFullYear()) {\n                        for (var number in scope.month) {\n                            if (scope.month[number].daydate == scope.localdate.getDate()) {\n                                scope.month[number].selected = true;\n\t\t\t\t\t\t\t\tif (scope.mondayfirst == 'true') {\n\t\t\t\t\t\t\t\t\tif (parseInt(number) === 0) {\n\t\t\t\t\t\t\t\t\t\tnumber = 6;\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tnumber = number - 1;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tscope.selectedDay = scope.days[scope.month[number].dayname].long;\n\t\t\t\t\t\t\t}\n                        }\n                    }\n                }\n            }\n\n            function getDaysInMonth() {\n                var month = scope.currentViewDate.getMonth();\n                var date = new Date(scope.currentViewDate.getFullYear(), month, 1);\n                var days = [];\n                var today = new Date();\n                while (date.getMonth() === month) {\n                    var showday = true;\n                    if (!scope.pickpast &amp;&amp; date &lt; today) {\n                        showday = false;\n                    }\n                    if (today.getDate() == date.getDate() &amp;&amp;\n                        today.getYear() == date.getYear() &amp;&amp;\n                        today.getMonth() == date.getMonth()) {\n                        showday = true;\n                    }\n                    var day = new Date(date);\n                    var dayname = day.getDay();\n                    var daydate = day.getDate();\n                    days.push({ 'dayname': dayname, 'daydate': daydate, 'showday': showday });\n                    date.setDate(date.getDate() + 1);\n                }\n                scope.month = days;\n            }\n\n            function initializeDate() {\n                scope.currentViewDate = new Date(scope.localdate);\n                scope.currentMonthName = function () {\n                    return scope.monthNames[scope.currentViewDate.getMonth()];\n                };\n                getDaysInMonth();\n                getSelected();\n            }\n\n            \/\/ Takes selected time and date and combines them into a date object\n            function getDateAndTime(localdate) {\n                var time = scope.time.split(':');\n                if (scope.timeframe == 'am' &amp;&amp; time[0] == '12') {\n                    time[0] = 0;\n                } else if (scope.timeframe == 'pm' &amp;&amp; time[0] !== '12') {\n                    time[0] = parseInt(time[0]) + 12;\n                }\n                return new Date(localdate.getFullYear(), localdate.getMonth(), localdate.getDate(), time[0], time[1]);                \n            }\n\n            \/\/ Convert to UTC to account for different time zones\n            function convertToUTC(localdate) {\n                var date_obj = getDateAndTime(localdate);\n                var utcdate = new Date(date_obj.getUTCFullYear(), date_obj.getUTCMonth(), date_obj.getUTCDate(), date_obj.getUTCHours(), date_obj.getUTCMinutes());\n                return utcdate;\n            }\n            \/\/ Convert from UTC to account for different time zones\n            function convertFromUTC(utcdate) {\n                localdate = new Date(utcdate);\n                return localdate;\n            }\n\n            \/\/ Returns the format of time desired for the scheduler, Also I set the am\/pm\n            function formatAMPM(date) {\n                var hours = date.getHours();\n                var minutes = date.getMinutes();\n                hours &gt;= 12 ? scope.changetime('pm') : scope.changetime('am');\n                hours = hours % 12;\n                hours = hours ? hours : 12; \/\/ the hour '0' should be '12'\n                minutes = minutes &lt; 10 ? '0' + minutes : minutes;\n                var strTime = hours + ':' + minutes;\n                return strTime;\n            }\n\t\t\t\n            scope.$watch('open', function() {\n                if (scope.selecteddate !== undefined &amp;&amp; scope.selecteddate !== null) {\n                    scope.localdate = convertFromUTC(scope.selecteddate);\n                } else {\n                    scope.localdate = new Date();\n                    scope.localdate.setMinutes(Math.round(scope.localdate.getMinutes() \/ 60) * 30);\n                }\n\t\t\t\tscope.time = formatAMPM(scope.localdate);\n\t\t\t\tscope.setTimeBar(scope.localdate);\n\t\t\t\tinitializeDate();\n\t\t\t\tscope.updateInputTime();\n            });\n\n            scope.selectDate = function (day) {\n\n                if (scope.pickdate == &quot;true&quot; &amp;&amp; day.showday) {\n                    for (var number in scope.month) {\n                        var item = scope.month[number];\n                        if (item.selected === true) {\n                            item.selected = false;\n                        }\n                    }\n                    day.selected = true;\n                    scope.selectedDay = scope.days[day.dayname].long;\n                    scope.localdate = new Date(scope.currentViewDate.getFullYear(), scope.currentViewDate.getMonth(), day.daydate);\n                    initializeDate(scope.localdate);\n                    scope.updateDate();\n                }\n            };\n\n            scope.updateDate = function () {\n                if (scope.localdate) {\n                    var newdate = getDateAndTime(scope.localdate);\n                    scope.updatefn({newdate:newdate});\n                }\n            };\n\n            scope.moveForward = function () {\n                scope.currentViewDate.setMonth(scope.currentViewDate.getMonth() + 1);\n                if (scope.currentViewDate.getMonth() == 12) {\n                    scope.currentViewDate.setDate(scope.currentViewDate.getFullYear() + 1, 0, 1);\n                }\n                getDaysInMonth();\n                getSelected();\n            };\n\n            scope.moveBack = function () {\n                scope.currentViewDate.setMonth(scope.currentViewDate.getMonth() - 1);\n                if (scope.currentViewDate.getMonth() == -1) {\n                    scope.currentViewDate.setDate(scope.currentViewDate.getFullYear() - 1, 0, 1);\n                }\n                getDaysInMonth();\n                getSelected();\n            };\n\n            scope.calcOffset = function (day, index) {\n                if (index === 0) {\n                    var offset = (day.dayname * 14.2857142) + '%';\n\t\t\t\t\tif (scope.mondayfirst == 'true') {\n\t\t\t\t\t\toffset = ((day.dayname - 1) * 14.2857142) + '%';\n\t\t\t\t\t}\n                    return offset;\n                }\n            };\n            \n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\t\t\/\/ Check size of parent element, apply class \/\/\n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\t\t\tscope.checkWidth = function (apply) {\n\t\t\t\tvar parent_width = element.parent().width();\n\t\t\t\tif (parent_width &lt; 620) {\n\t\t\t\t\tscope.compact = true;\n\t\t\t\t} else {\n\t\t\t\t\tscope.compact = false;\n\t\t\t\t}\n\t\t\t\tif (apply) {\n\t\t\t\t\tscope.$apply();\n\t\t\t\t}\n\t\t\t};\n\t\t\tscope.checkWidth(false);\n\t\t\t\n            \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n            \/\/ Time Picker Code \/\/\n            \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n            if (scope.picktime) {\n                var currenttime;\n                var timeline;\n                var timeline_width;\n                var timeline_container;\n                var sectionlength;\n\n                scope.getHours = function () {\n                    var hours = new Array(11);\n                    return hours;\n                };\n\n                scope.time = &quot;12:00&quot;;\n                scope.hour = 12;\n                scope.minutes = 0;\n                scope.currentoffset = 0;\n\n                scope.timeframe = 'am';\n\n                scope.changetime = function(time) {\n                    scope.timeframe = time;\n                    scope.updateDate();\n\t\t\t\t\tscope.updateInputTime();\t\t\t\t\t\n                };\n\t\t\t\t\n\t\t\t\tscope.edittime = {\n\t\t\t\t\tdigits: []\n\t\t\t\t};\n\t\t\t\t\n\t\t\t\tscope.updateInputTime = function () {\n\t\t\t\t\tscope.edittime.input = scope.time + ' ' + scope.timeframe;\n\t\t\t\t\tscope.edittime.formatted = scope.edittime.input;\n\t\t\t\t};\n\t\t\t\t\n\t\t\t\tscope.updateInputTime();\n\t\t\t\t\n\t\t\t\tfunction checkValidTime (number) {\n\t\t\t\t\tvalidity = true;\n\t\t\t\t\tswitch (scope.edittime.digits.length) {\n\t\t\t\t\t\tcase 0:\n\t\t\t\t\t\t\tif (number === 0) {\n\t\t\t\t\t\t\t\tvalidity = false;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 1:\n\t\t\t\t\t\t\tif (number &gt; 5) {\n\t\t\t\t\t\t\t\tvalidity = false;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tvalidity = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 2:\n\t\t\t\t\t\t\tvalidity = true;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 3:\n\t\t\t\t\t\t\tif (scope.edittime.digits[0] &gt; 1) {\n\t\t\t\t\t\t\t\tvalidity = false;\n\t\t\t\t\t\t\t} else if (scope.edittime.digits[1] &gt; 2) {\n\t\t\t\t\t\t\t\tvalidity = false;\n\t\t\t\t\t\t\t} else if (scope.edittime.digits[2] &gt; 5) {\n\t\t\t\t\t\t\t\tvalidity = false;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\telse {\n\t\t\t\t\t\t\t\tvalidity = true;\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 4:\n\t\t\t\t\t\t\tvalidity = false;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\treturn validity;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tfunction formatTime () {\n\t\t\t\t\tvar time = &quot;&quot;;\n\t\t\t\t\tif (scope.edittime.digits.length == 1) {\n\t\t\t\t\t\ttime = &quot;--:-&quot; + scope.edittime.digits[0];\n\t\t\t\t\t} else if (scope.edittime.digits.length == 2) {\n\t\t\t\t\t\ttime = &quot;--:&quot; + scope.edittime.digits[0] + scope.edittime.digits[1];\n\t\t\t\t\t} else if (scope.edittime.digits.length == 3) {\n\t\t\t\t\t\ttime = &quot;-&quot; + scope.edittime.digits[0] + ':' + scope.edittime.digits[1] + scope.edittime.digits[2];\n\t\t\t\t\t} else if (scope.edittime.digits.length == 4) {\n\t\t\t\t\t\ttime = scope.edittime.digits[0] + scope.edittime.digits[1].toString() + ':' + scope.edittime.digits[2] + scope.edittime.digits[3];\n\t\t\t\t\t\tconsole.log(time);\n\t\t\t\t\t}\n\t\t\t\t\treturn time + ' ' + scope.timeframe;\n\t\t\t\t};\n\t\t\t\t\n\t\t\t\tscope.changeInputTime = function (event) {\n\t\t\t\t\tvar numbers = {48:0,49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9};\n\t\t\t\t\tif (numbers[event.which] !== undefined) {\n\t\t\t\t\t\tif (checkValidTime(numbers[event.which])) {\n\t\t\t\t\t\t\tscope.edittime.digits.push(numbers[event.which]);\n\t\t\t\t\t\t\tconsole.log(scope.edittime.digits);\n\t\t\t\t\t\t\tscope.time_input = formatTime();\n\t\t\t\t\t\t\tscope.time = numbers[event.which] + ':00';\n\t\t\t\t\t\t\tscope.updateDate();\n\t\t\t\t\t\t\tscope.setTimeBar();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (event.which == 65) {\n\t\t\t\t\t\tscope.timeframe = 'am';\n\t\t\t\t\t\tscope.time_input = scope.time + ' ' + scope.timeframe;\n\t\t\t\t\t} else if (event.which == 80) {\n\t\t\t\t\t\tscope.timeframe = 'pm';\n\t\t\t\t\t\tscope.time_input = scope.time + ' ' + scope.timeframe;\n\t\t\t\t\t} else if (event.which == 8) {\n\t\t\t\t\t\tscope.edittime.digits.pop();\n\t\t\t\t\t\tscope.time_input = formatTime();\n\t\t\t\t\t\tconsole.log(scope.edittime.digits);\n\t\t\t\t\t}\n\t\t\t\t\tscope.edittime.formatted = scope.time_input;\n\t\t\t\t\t\/\/ scope.edittime.input = formatted;\n\t\t\t\t};\n\t\t\t\t\n                var pad2 = function (number) {\n                    return (number &lt; 10 ? '0' : '') + number;\n                };\n           \n                scope.moving = false;\n                scope.offsetx = 0;\n                scope.totaloffset = 0;\n                scope.initializeTimepicker = function () {\n                    currenttime = $('.current-time');\n                    timeline = $('.timeline');\n                    if (timeline.length &gt; 0) {\n                        timeline_width = timeline[0].offsetWidth;\n                    }\n                    timeline_container = $('.timeline-container');\n                    sectionlength = timeline_width \/ 24 \/ 6;\n                };\n\n                angular.element($window).on('resize', function () {\n                    scope.initializeTimepicker();\n                    if (timeline.length &gt; 0) {\n                        timeline_width = timeline[0].offsetWidth;\n                    }\n                    sectionlength = timeline_width \/ 24;\n\t\t\t\t\tscope.checkWidth(true);\n                });\n           \n                scope.setTimeBar = function (date) {\n\t\t\t\t\tcurrenttime = $('.current-time');\n\t\t\t\t\tvar timeline_width = $('.timeline')[0].offsetWidth;\n                    var hours = scope.time.split(':')[0];\n\t\t\t\t\tif (hours == 12) {\n\t\t\t\t\t\thours = 0;\n\t\t\t\t\t}\n\t\t\t\t\tvar minutes = scope.time.split(':')[1];\n\t\t\t\t\tvar minutes_offset = (minutes \/ 60) * (timeline_width \/ 12);\n\t\t\t\t\tvar hours_offset = (hours \/ 12) * timeline_width;\n\t\t\t\t\tscope.currentoffset = parseInt(hours_offset + minutes_offset - 1);\n                    currenttime.css({\n\t\t\t\t\t\ttransition: 'transform 0.4s ease',\n                        transform: 'translateX(' + scope.currentoffset + 'px)',\n                    });\n                };\n\n                scope.getTime = function () {\n                    \/\/ get hours\n                    var percenttime = (scope.currentoffset + 1) \/ timeline_width;\n                    var hour = Math.floor(percenttime * 12);\n                    var percentminutes = (percenttime * 12) - hour;\n\t\t\t\t\tvar minutes = Math.round((percentminutes * 60) \/ 5) * 5;\n                    if (hour === 0) {\n                        hour = 12;\n                    }\n\t\t\t\t\tif (minutes == 60) {\n\t\t\t\t\t\thour += 1;\n\t\t\t\t\t\tminutes = 0;\n\t\t\t\t\t}\n\n                    scope.time = hour + &quot;:&quot; + pad2(minutes);\n\t\t\t\t\tscope.updateInputTime();\n                    scope.updateDate();\n                };\n           \n                var initialized = false;\n\n                element.on('touchstart', function() {\n                    if (!initialized) {\n                        element.find('.timeline-container').on('touchstart', function (event) {\n                            scope.timeSelectStart(event);\n                        });\n                        initialized = true;\n                    }\n                });\n\n                scope.timeSelectStart = function (event) {\n                    scope.initializeTimepicker();\n                    var timepicker_container = element.find('.timepicker-container-inner');\n\t\t\t\t\tvar timepicker_offset = timepicker_container.offset().left;\n                    if (event.type == 'mousedown') {\n                        scope.xinitial = event.clientX;\n                    } else if (event.type == 'touchstart') {\n                        scope.xinitial = event.originalEvent.touches[0].clientX;\n                    }\n                    scope.moving = true;\n                    scope.currentoffset = scope.xinitial - timepicker_container.offset().left;\n                    scope.totaloffset = scope.xinitial - timepicker_container.offset().left;\n\t\t\t\t\tconsole.log(timepicker_container.width());\n\t\t\t\t\tif (scope.currentoffset &lt; 0) {\n\t\t\t\t\t\tscope.currentoffset = 0;\n\t\t\t\t\t} else if (scope.currentoffset &gt; timepicker_container.width()) {\n\t\t\t\t\t\tscope.currentoffset = timepicker_container.width();\n\t\t\t\t\t}\n\t\t\t\t\tcurrenttime.css({\n                        transform: 'translateX(' + scope.currentoffset + 'px)',\n                        transition: 'none',\n                        cursor: 'ew-resize',\n                    });\n                    scope.getTime();\n                };\n           \n                angular.element($window).on('mousemove touchmove', function (event) {\n                    if (scope.moving === true) {\n                        event.preventDefault();\n                        if (event.type == 'mousemove') {\n                            scope.offsetx = event.clientX - scope.xinitial;\n                        } else if (event.type == 'touchmove') {\n                            scope.offsetx = event.originalEvent.touches[0].clientX - scope.xinitial;\n                        }\n                        var movex = scope.offsetx + scope.totaloffset;\n                        if (movex &gt;= 0 &amp;&amp; movex &lt;= timeline_width) {\n                            currenttime.css({\n                                transform: 'translateX(' + movex + 'px)',\n                            });\n                            scope.currentoffset = movex;\n                        } else if (movex &lt; 0) {\n                            currenttime.css({\n                                transform: 'translateX(0)',\n                            });\n                            scope.currentoffset = 0;\n                        } else {\n                            currenttime.css({\n                                transform: 'translateX(' + timeline_width + 'px)',\n                            });\n                            scope.currentoffset = timeline_width;\n                        }\n                        scope.getTime();\n                        scope.$apply();\n                    }\n                });\n           \n                angular.element($window).on('mouseup touchend', function (event) {\n                    if (scope.moving) {\n                        \/\/ var roundsection = Math.round(scope.currentoffset \/ sectionlength);\n                        \/\/ var newoffset = roundsection * sectionlength;\n                        \/\/ currenttime.css({\n                        \/\/     transition: 'transform 0.25s ease',\n                        \/\/     transform: 'translateX(' + (newoffset - 1) + 'px)',\n                        \/\/     cursor: 'pointer',\n                        \/\/ });\n                        \/\/ scope.currentoffset = newoffset;\n                        \/\/ scope.totaloffset = scope.currentoffset;\n                        \/\/ $timeout(function () {\n                        \/\/     scope.getTime();\n                        \/\/ }, 250);\n                    }\n                    scope.moving = false;\n                });\n\n                scope.adjustTime = function (direction) {\n                    event.preventDefault();\n                    scope.initializeTimepicker();\n                    var newoffset;\n                    if (direction == 'decrease') {\n                        newoffset = scope.currentoffset - sectionlength;\n                    } else if (direction == 'increase') {\n                        newoffset = scope.currentoffset + sectionlength;\n                    }\n                    if (newoffset &lt; 0 || newoffset &gt; timeline_width) {\n                        if (newoffset &lt; 0) {\n                            newoffset = timeline_width - sectionlength;\n                        } else if (newoffset &gt; timeline_width) {\n                            newoffset = 0 + sectionlength;\n                        }\n                        if (scope.timeframe == 'am') {\n                            scope.timeframe = 'pm';\n                        }\n                        else if (scope.timeframe == 'pm') {\n                            scope.timeframe = 'am';\n                        }\n                    }\n                    currenttime.css({\n                        transition: 'transform 0.4s ease',\n                        transform: 'translateX(' + (newoffset - 1) + 'px)',\n                    });\n                    scope.currentoffset = newoffset;\n                    scope.totaloffset = scope.currentoffset;\n                    scope.getTime();\n                };\n            }\n\n            \/\/ End Timepicker Code \/\/\n\n        }\n    };\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[78,17],"class_list":["post-1421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements","tag-date-picker","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1421"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1421\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1421\/revisions\/1423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1422"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}