Material Design Date/Time picker

In this example below you will see how to do a Material Design Date/Time picker with some HTML / CSS and Javascript

An implementation of http://www.google.com/design/spec/components/pickers.html in AngularJS and some bootstrap just for helper classes (just the button classes).

Thumbnail
This awesome code was written by abennington, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright abennington ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Material Design Date/Time picker</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .time-date {
  font-size: 16px;
  overflow: hidden;
  border: none;
  max-width: 600px;
}
.time-date > .display {
  position: relative;
  width: 47%;
  height: 100%;
  cursor: pointer;
}
.time-date > .display > .title {
  background-color: #00796b;
  color: #e1e1e1;
  line-height: 2em;
}
.time-date > .display > .content {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 3.2rem;
  padding: 3rem;
  font-size: 2rem;
  background-color: #009688;
  color: #e1e1e1;
}
.time-date > .display > .content > .super-title {
  text-transform: uppercase;
}
.time-date > .display > .content > .main-title {
  font-size: 8rem;
}
.time-date > .display > .content > .main-title > small {
  font-size: 1.5rem;
  margin-left: 0.5rem;
}
.time-date > .display > .content > .sub-title {
  color: #8acfc8;
}
.time-date > .control {
  width: 53%;
  overflow-x: hidden;
  position: relative;
}
.time-date > .control > .slider {
  position: absolute !important;
  width: 200%;
  -webkit-transition: left 0.6s ease-in-out;
  -moz-transition: left 0.6s ease-in-out;
  -o-transition: left 0.6s ease-in-out;
  -ms-transition: left 0.6s ease-in-out;
  transition: left 0.6s ease-in-out;
}
.time-date > .control > .slider > .date-control,
.time-date > .control > .slider > .time-control,
.time-date > .control > .slider > .switch-control {
  float: left;
  height: 27.3rem;
}
.time-date > .control > .slider > .date-control,
.time-date > .control > .slider > .time-control {
  width: 45%;
}
.time-date > .control > .slider > .switch-control {
  width: 10%;
  cursor: pointer;
}
.time-date > .control > .slider > .switch-control > i.fa {
  margin-top: 12.65rem;
}
.time-date > .control > .slider > .switch-control > i.fa:first-child {
  margin-right: 1rem;
}
.time-date > .control > .slider > .switch-control > i.fa:last-child {
  margin-left: 1rem;
}
.time-date > .control > .slider > .date-control > .title {
  font-weight: 500;
  line-height: 2em;
}
.time-date > .control > .slider > .date-control > .title > span {
  cursor: pointer;
  position: relative;
}
.time-date > .control > .slider > .date-control > .title > span:hover {
  text-decoration: underline;
}
.time-date > .control > .slider > .date-control > .title > span > select {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.time-date > .control > .slider > .date-control > .title > input {
  border: none;
  width: 5.6rem;
}
.time-date > .control > .slider > .date-control > .headers {
  margin-top: -1rem;
  font-weight: 500;
  font-size: 1.3rem;
  padding-left: 2rem;
  color: #737373;
}
.time-date > .control > .slider > .date-control > .headers > .day-cell {
  cursor: default;
}
.time-date > .control > .slider > .date-control .day-cell {
  float: left;
  width: 3.6rem;
  height: 3.6rem;
  padding-top: 1rem;
  cursor: pointer;
  border-radius: 4rem;
}
.time-date > .control > .slider > .date-control > .days {
  font-size: 1.3rem;
  padding-left: 2rem;
  width: 27.720000000000002rem;
}
.time-date > .control > .slider > .date-control > .days .day-cell.today {
  color: #009688;
}
.time-date > .control > .slider > .date-control > .days .day-cell.selected {
  color: #fff;
  background-color: #009688;
}
.time-date > .control > .slider > .date-control > .days .day-cell:hover,
.time-date > .control > .slider > .date-control > .days .day-cell:active {
  color: #e6e6e6;
  background-color: #00baa9;
}
.time-date > .control > .slider > .time-control {
  position: relative;
}
.time-date > .control > .slider > .time-control > .buttons {
  position: absolute;
  bottom: 0px;
  left: 8px;
  right: 8px;
}
.time-date > .control > .slider > .time-control > .buttons > input {
  float: left;
  bottom: 50%;
  margin-bottom: -1.4rem;
  margin-left: -3rem;
  border: none;
  border-bottom: 1px solid #000;
  text-align: center;
  position: absolute;
  left: 50%;
}
.time-date > .control > .slider > .time-control > .buttons > button {
  border-radius: 100%;
  width: 5rem;
  height: 5rem;
}
.time-date > .control > .slider > .time-control > .clock {
  position: relative;
  width: 100%;
  padding-left: 50%;
  padding-top: 3rem;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face {
  position: relative;
  margin-left: -75px;
  margin-top: 1.5rem;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face:before {
  content: " ";
  background-color: #eceff1;
  position: absolute;
  top: -20px;
  left: -20px;
  height: 188px;
  width: 188px;
  border-radius: 94px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .center {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #202020;
  border-radius: 2px;
  z-index: 3;
  left: 74px;
  top: 73px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand {
  position: absolute;
  height: 4rem;
  width: 4rem;
  margin-left: -2rem;
  margin-top: -2rem;
  padding: 1rem;
  text-align: center;
  border-radius: 8rem;
  cursor: pointer;
  color: #009688;
  z-index: 2;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:hover,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:active,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:hover:before,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:active:before {
  color: #e6e6e6;
  background-color: #00baa9;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand.selected,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand.selected:before {
  color: #fff;
  background-color: #009688;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(2) {
  left: 112.5px;
  top: 10.048094699999993px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(2):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(3) {
  left: 139.95190530000002px;
  top: 37.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(3):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(4) {
  left: 150px;
  top: 75px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(4):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(5) {
  left: 139.95190530000002px;
  top: 112.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(5):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(6) {
  left: 112.5px;
  top: 139.95190530000002px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(6):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(7) {
  left: 75px;
  top: 150px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(7):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(8) {
  left: 37.5px;
  top: 139.95190530000002px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(8):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(9) {
  left: 10.048094699999993px;
  top: 112.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(9):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(10) {
  left: 0px;
  top: 75px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(10):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(11) {
  left: 10.048094699999993px;
  top: 37.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(11):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(12) {
  left: 37.5px;
  top: 10.048094699999993px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(12):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(13) {
  left: 75px;
  top: 0px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(13):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.time-date.date-mode > .control > .slider {
  left: 0%;
}
.time-date.time-mode > .display > .content {
  padding-top: 5.4rem;
}
.time-date.time-mode > .control > .slider {
  left: -100%;
}
.time-date.date-only > .control > .slider > .switch-control,
.time-date.date-only > .control > .slider > .time-control {
  display: none;
}
.time-date.date-only > .control > .slider > .date-control {
  width: 50%;
  padding-left: 1.4rem;
}
.time-date.time-only > .display > .content {
  top: 0px;
  padding-top: 8.2rem;
}
.time-date.time-only > .control > .slider > .switch-control,
.time-date.time-only > .control > .slider > .date-control {
  display: none;
}
.time-date.time-only > .control > .slider > .time-control {
  width: 50%;
}
.time-date > .display,
.time-date > .control {
  height: 27.3rem;
  float: left;
  text-align: center;
}
.time-date > .buttons {
  clear: both;
  padding: 1rem;
  text-align: right;
}
.time-date button,
.time-date .button {
  color: #009688 !important;
  font-weight: bold;
}
.time-date button:hover,
.time-date .button:hover,
.time-date button:active,
.time-date .button:active {
  color: #e6e6e6 !important;
  background-color: #00baa9;
}
.time-date button.active,
.time-date .button.active {
  color: #fff !important;
  background-color: #009688;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  
<div ng-app="testMod" ng-controller="testCtrl">
  <h1>Now has a Github repo @ <a href="https://simeonc.github.io/md-date-time/">https://simeonc.github.io/md-date-time/</a></h1>
  <p>Basic Mode: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date"></time-date-picker>
    </div>
  </div>
  <p>Start on Time: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date" default-mode="time"></time-date-picker>
    </div>
  </div>
  <p>Time Only: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date" display-mode="time"></time-date-picker>
    </div>
  </div>
  <p>Date Only: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date" display-mode="date"></time-date-picker>
    </div>
  </div>
  <script type="text/ng-template" id="time-date.tpl">
    <div class="time-date" ng-class="modeClass()">
      <div class="display" ng-click="modeSwitch()">
        <div class="title">{{display.title()}}</div>
        <div class="content">
          <div class="super-title">{{display.super()}}</div>
          <div class="main-title" ng-bind-html="display.main()"></div>
          <div class="sub-title">{{display.sub()}}</div>
        </div>
      </div>
      <div class="control">
        <div class="slider"> 
          <div class="date-control">
            <div class="title"><span class="month-part">{{date | date:'MMMM'}}
                <select ng-model="calendar._month" ng-change="calendar.monthChange()" ng-options="calendar._months.indexOf(month) as month for month in calendar._months"></select></span>
              <input class="year-part" ng-model="calendar._year" ng-change="calendar.monthChange()" type="number"/>
            </div>
            <div class="headers">
              <div class="day-cell">S</div>
              <div class="day-cell">M</div>
              <div class="day-cell">T</div>
              <div class="day-cell">W</div>
              <div class="day-cell">T</div>
              <div class="day-cell">F</div>
              <div class="day-cell">S</div>
            </div>
            <div class="days">
              <div class="day-cell" ng-style="{'margin-left': calendar.offsetMargin()}" ng-class="calendar.class(1)" ng-show="calendar.isVisible(1)" ng-click="calendar.select(1)">1</div>
              <div class="day-cell" ng-class="calendar.class(2)" ng-show="calendar.isVisible(2)" ng-click="calendar.select(2)">2</div>
              <div class="day-cell" ng-class="calendar.class(3)" ng-show="calendar.isVisible(3)" ng-click="calendar.select(3)">3</div>
              <div class="day-cell" ng-class="calendar.class(4)" ng-show="calendar.isVisible(4)" ng-click="calendar.select(4)">4</div>
              <div class="day-cell" ng-class="calendar.class(5)" ng-show="calendar.isVisible(5)" ng-click="calendar.select(5)">5</div>
              <div class="day-cell" ng-class="calendar.class(6)" ng-show="calendar.isVisible(6)" ng-click="calendar.select(6)">6</div>
              <div class="day-cell" ng-class="calendar.class(7)" ng-show="calendar.isVisible(7)" ng-click="calendar.select(7)">7</div>
              <div class="day-cell" ng-class="calendar.class(8)" ng-show="calendar.isVisible(8)" ng-click="calendar.select(8)">8</div>
              <div class="day-cell" ng-class="calendar.class(9)" ng-show="calendar.isVisible(9)" ng-click="calendar.select(9)">9</div>
              <div class="day-cell" ng-class="calendar.class(10)" ng-show="calendar.isVisible(10)" ng-click="calendar.select(10)">10</div>
              <div class="day-cell" ng-class="calendar.class(11)" ng-show="calendar.isVisible(11)" ng-click="calendar.select(11)">11</div>
              <div class="day-cell" ng-class="calendar.class(12)" ng-show="calendar.isVisible(12)" ng-click="calendar.select(12)">12</div>
              <div class="day-cell" ng-class="calendar.class(13)" ng-show="calendar.isVisible(13)" ng-click="calendar.select(13)">13</div>
              <div class="day-cell" ng-class="calendar.class(14)" ng-show="calendar.isVisible(14)" ng-click="calendar.select(14)">14</div>
              <div class="day-cell" ng-class="calendar.class(15)" ng-show="calendar.isVisible(15)" ng-click="calendar.select(15)">15</div>
              <div class="day-cell" ng-class="calendar.class(16)" ng-show="calendar.isVisible(16)" ng-click="calendar.select(16)">16</div>
              <div class="day-cell" ng-class="calendar.class(17)" ng-show="calendar.isVisible(17)" ng-click="calendar.select(17)">17</div>
              <div class="day-cell" ng-class="calendar.class(18)" ng-show="calendar.isVisible(18)" ng-click="calendar.select(18)">18</div>
              <div class="day-cell" ng-class="calendar.class(19)" ng-show="calendar.isVisible(19)" ng-click="calendar.select(19)">19</div>
              <div class="day-cell" ng-class="calendar.class(20)" ng-show="calendar.isVisible(20)" ng-click="calendar.select(20)">20</div>
              <div class="day-cell" ng-class="calendar.class(21)" ng-show="calendar.isVisible(21)" ng-click="calendar.select(21)">21</div>
              <div class="day-cell" ng-class="calendar.class(22)" ng-show="calendar.isVisible(22)" ng-click="calendar.select(22)">22</div>
              <div class="day-cell" ng-class="calendar.class(23)" ng-show="calendar.isVisible(23)" ng-click="calendar.select(23)">23</div>
              <div class="day-cell" ng-class="calendar.class(24)" ng-show="calendar.isVisible(24)" ng-click="calendar.select(24)">24</div>
              <div class="day-cell" ng-class="calendar.class(25)" ng-show="calendar.isVisible(25)" ng-click="calendar.select(25)">25</div>
              <div class="day-cell" ng-class="calendar.class(26)" ng-show="calendar.isVisible(26)" ng-click="calendar.select(26)">26</div>
              <div class="day-cell" ng-class="calendar.class(27)" ng-show="calendar.isVisible(27)" ng-click="calendar.select(27)">27</div>
              <div class="day-cell" ng-class="calendar.class(28)" ng-show="calendar.isVisible(28)" ng-click="calendar.select(28)">28</div>
              <div class="day-cell" ng-class="calendar.class(29)" ng-show="calendar.isVisible(29)" ng-click="calendar.select(29)">29</div>
              <div class="day-cell" ng-class="calendar.class(30)" ng-show="calendar.isVisible(30)" ng-click="calendar.select(30)">30</div>
              <div class="day-cell" ng-class="calendar.class(31)" ng-show="calendar.isVisible(31)" ng-click="calendar.select(31)">31</div>
            </div>
          </div>
          <div class="button switch-control" ng-click="modeSwitch()"><i class="fa fa-clock-o"></i><i class="fa fa-calendar"></i></div>
          <div class="time-control">
            <div class="clock">
              <div class="clock-face">
                <div class="center"></div>
                <div class="hand" ng-click="clock.setHour(1)" ng-class="{'selected': clock._hour() == 1}">1</div>
                <div class="hand" ng-click="clock.setHour(2)" ng-class="{'selected': clock._hour() == 2}">2</div>
                <div class="hand" ng-click="clock.setHour(3)" ng-class="{'selected': clock._hour() == 3}">3</div>
                <div class="hand" ng-click="clock.setHour(4)" ng-class="{'selected': clock._hour() == 4}">4</div>
                <div class="hand" ng-click="clock.setHour(5)" ng-class="{'selected': clock._hour() == 5}">5</div>
                <div class="hand" ng-click="clock.setHour(6)" ng-class="{'selected': clock._hour() == 6}">6</div>
                <div class="hand" ng-click="clock.setHour(7)" ng-class="{'selected': clock._hour() == 7}">7</div>
                <div class="hand" ng-click="clock.setHour(8)" ng-class="{'selected': clock._hour() == 8}">8</div>
                <div class="hand" ng-click="clock.setHour(9)" ng-class="{'selected': clock._hour() == 9}">9</div>
                <div class="hand" ng-click="clock.setHour(10)" ng-class="{'selected': clock._hour() == 10}">10</div>
                <div class="hand" ng-click="clock.setHour(11)" ng-class="{'selected': clock._hour() == 11}">11</div>
                <div class="hand" ng-click="clock.setHour(12)" ng-class="{'selected': clock._hour() == 12}">12</div>
              </div>
            </div>
            <div class="buttons">
              <button class="btn btn-link pull-left" ng-click="clock.setAM(true)" ng-class="{'active': clock.isAM()}" type="button">AM</button>
              <input value="30" type="number" min="0" max="59" ng-model="clock._minutes"/>
              <button class="btn btn-link pull-right" ng-click="clock.setAM(false)" ng-class="{'active': !clock.isAM()}" type="button">PM</button>
            </div>
          </div>
        </div>
      </div>
      <div class="buttons">
        <button class="btn btn-link" ng-click="setNow()" type="button">Now</button>
        <button class="btn btn-link" ng-click="cancel()" type="button">Cancel</button>
        <button class="btn btn-link" ng-click="save()" type="button">OK</button>
      </div>
    </div>
  </script>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/abennington/material-design-datetime-picker-JXQPod */
.time-date {
  font-size: 16px;
  overflow: hidden;
  border: none;
  max-width: 600px;
}
.time-date > .display {
  position: relative;
  width: 47%;
  height: 100%;
  cursor: pointer;
}
.time-date > .display > .title {
  background-color: #00796b;
  color: #e1e1e1;
  line-height: 2em;
}
.time-date > .display > .content {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 3.2rem;
  padding: 3rem;
  font-size: 2rem;
  background-color: #009688;
  color: #e1e1e1;
}
.time-date > .display > .content > .super-title {
  text-transform: uppercase;
}
.time-date > .display > .content > .main-title {
  font-size: 8rem;
}
.time-date > .display > .content > .main-title > small {
  font-size: 1.5rem;
  margin-left: 0.5rem;
}
.time-date > .display > .content > .sub-title {
  color: #8acfc8;
}
.time-date > .control {
  width: 53%;
  overflow-x: hidden;
  position: relative;
}
.time-date > .control > .slider {
  position: absolute !important;
  width: 200%;
  -webkit-transition: left 0.6s ease-in-out;
  -moz-transition: left 0.6s ease-in-out;
  -o-transition: left 0.6s ease-in-out;
  -ms-transition: left 0.6s ease-in-out;
  transition: left 0.6s ease-in-out;
}
.time-date > .control > .slider > .date-control,
.time-date > .control > .slider > .time-control,
.time-date > .control > .slider > .switch-control {
  float: left;
  height: 27.3rem;
}
.time-date > .control > .slider > .date-control,
.time-date > .control > .slider > .time-control {
  width: 45%;
}
.time-date > .control > .slider > .switch-control {
  width: 10%;
  cursor: pointer;
}
.time-date > .control > .slider > .switch-control > i.fa {
  margin-top: 12.65rem;
}
.time-date > .control > .slider > .switch-control > i.fa:first-child {
  margin-right: 1rem;
}
.time-date > .control > .slider > .switch-control > i.fa:last-child {
  margin-left: 1rem;
}
.time-date > .control > .slider > .date-control > .title {
  font-weight: 500;
  line-height: 2em;
}
.time-date > .control > .slider > .date-control > .title > span {
  cursor: pointer;
  position: relative;
}
.time-date > .control > .slider > .date-control > .title > span:hover {
  text-decoration: underline;
}
.time-date > .control > .slider > .date-control > .title > span > select {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.time-date > .control > .slider > .date-control > .title > input {
  border: none;
  width: 5.6rem;
}
.time-date > .control > .slider > .date-control > .headers {
  margin-top: -1rem;
  font-weight: 500;
  font-size: 1.3rem;
  padding-left: 2rem;
  color: #737373;
}
.time-date > .control > .slider > .date-control > .headers > .day-cell {
  cursor: default;
}
.time-date > .control > .slider > .date-control .day-cell {
  float: left;
  width: 3.6rem;
  height: 3.6rem;
  padding-top: 1rem;
  cursor: pointer;
  border-radius: 4rem;
}
.time-date > .control > .slider > .date-control > .days {
  font-size: 1.3rem;
  padding-left: 2rem;
  width: 27.720000000000002rem;
}
.time-date > .control > .slider > .date-control > .days .day-cell.today {
  color: #009688;
}
.time-date > .control > .slider > .date-control > .days .day-cell.selected {
  color: #fff;
  background-color: #009688;
}
.time-date > .control > .slider > .date-control > .days .day-cell:hover,
.time-date > .control > .slider > .date-control > .days .day-cell:active {
  color: #e6e6e6;
  background-color: #00baa9;
}
.time-date > .control > .slider > .time-control {
  position: relative;
}
.time-date > .control > .slider > .time-control > .buttons {
  position: absolute;
  bottom: 0px;
  left: 8px;
  right: 8px;
}
.time-date > .control > .slider > .time-control > .buttons > input {
  float: left;
  bottom: 50%;
  margin-bottom: -1.4rem;
  margin-left: -3rem;
  border: none;
  border-bottom: 1px solid #000;
  text-align: center;
  position: absolute;
  left: 50%;
}
.time-date > .control > .slider > .time-control > .buttons > button {
  border-radius: 100%;
  width: 5rem;
  height: 5rem;
}
.time-date > .control > .slider > .time-control > .clock {
  position: relative;
  width: 100%;
  padding-left: 50%;
  padding-top: 3rem;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face {
  position: relative;
  margin-left: -75px;
  margin-top: 1.5rem;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face:before {
  content: " ";
  background-color: #eceff1;
  position: absolute;
  top: -20px;
  left: -20px;
  height: 188px;
  width: 188px;
  border-radius: 94px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .center {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #202020;
  border-radius: 2px;
  z-index: 3;
  left: 74px;
  top: 73px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand {
  position: absolute;
  height: 4rem;
  width: 4rem;
  margin-left: -2rem;
  margin-top: -2rem;
  padding: 1rem;
  text-align: center;
  border-radius: 8rem;
  cursor: pointer;
  color: #009688;
  z-index: 2;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:hover,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:active,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:hover:before,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:active:before {
  color: #e6e6e6;
  background-color: #00baa9;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand.selected,
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand.selected:before {
  color: #fff;
  background-color: #009688;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(2) {
  left: 112.5px;
  top: 10.048094699999993px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(2):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(3) {
  left: 139.95190530000002px;
  top: 37.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(3):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(4) {
  left: 150px;
  top: 75px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(4):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(5) {
  left: 139.95190530000002px;
  top: 112.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(5):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(6) {
  left: 112.5px;
  top: 139.95190530000002px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(6):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(7) {
  left: 75px;
  top: 150px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(7):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(8) {
  left: 37.5px;
  top: 139.95190530000002px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(8):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(9) {
  left: 10.048094699999993px;
  top: 112.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(9):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(10) {
  left: 0px;
  top: 75px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(10):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(11) {
  left: 10.048094699999993px;
  top: 37.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(11):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(12) {
  left: 37.5px;
  top: 10.048094699999993px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(12):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(13) {
  left: 75px;
  top: 0px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(13):before {
  content: " ";
  position: absolute;
  left: 2rem;
  top: 2rem;
  height: 75px;
  width: 2px;
  z-index: -1;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.time-date.date-mode > .control > .slider {
  left: 0%;
}
.time-date.time-mode > .display > .content {
  padding-top: 5.4rem;
}
.time-date.time-mode > .control > .slider {
  left: -100%;
}
.time-date.date-only > .control > .slider > .switch-control,
.time-date.date-only > .control > .slider > .time-control {
  display: none;
}
.time-date.date-only > .control > .slider > .date-control {
  width: 50%;
  padding-left: 1.4rem;
}
.time-date.time-only > .display > .content {
  top: 0px;
  padding-top: 8.2rem;
}
.time-date.time-only > .control > .slider > .switch-control,
.time-date.time-only > .control > .slider > .date-control {
  display: none;
}
.time-date.time-only > .control > .slider > .time-control {
  width: 50%;
}
.time-date > .display,
.time-date > .control {
  height: 27.3rem;
  float: left;
  text-align: center;
}
.time-date > .buttons {
  clear: both;
  padding: 1rem;
  text-align: right;
}
.time-date button,
.time-date .button {
  color: #009688 !important;
  font-weight: bold;
}
.time-date button:hover,
.time-date .button:hover,
.time-date button:active,
.time-date .button:active {
  color: #e6e6e6 !important;
  background-color: #00baa9;
}
.time-date button.active,
.time-date .button.active {
  color: #fff !important;
  background-color: #009688;
}


/*Downloaded from https://www.codeseek.co/abennington/material-design-datetime-picker-JXQPod */
(function() {
  angular.module('testMod', []).controller('testCtrl', function($scope) {
    return $scope.date = new Date();
  }).directive('timeDatePicker', [
    '$filter',
    '$sce',
    function($filter,
    $sce) {
      return {
        restrict: 'AE',
        replace: true,
        scope: {
          _modelValue: '=ngModel'
        },
        require: 'ngModel',
        templateUrl: 'time-date.tpl',
        link: function(scope,
    element,
    attrs,
    ngModel) {
          var ref;
          scope._mode = (ref = attrs.defaultMode) != null ? ref : 'date';
          scope._displayMode = attrs.displayMode;
          ngModel.$render = function() {
            scope.date = ngModel.$modelValue != null ? new Date(ngModel.$modelValue) : new Date();
            scope.calendar._year = scope.date.getFullYear();
            scope.calendar._month = scope.date.getMonth();
            return scope.clock._minutes = scope.date.getMinutes();
          };
          scope.save = function() {
            return scope._modelValue = scope.date;
          };
          return scope.cancel = function() {
            return ngModel.$render();
          };
        },
        controller: [
          '$scope',
          function(scope) {
            scope.date = new Date();
            scope.display = {
              title: function() {
                if (scope._mode === 'date') {
                  return $filter('date')(scope.date,
          'EEEE h:mm a');
                } else {
                  return $filter('date')(scope.date,
          'MMMM d yyyy');
                }
              },
              super: function() {
                if (scope._mode === 'date') {
                  return $filter('date')(scope.date,
          'MMM');
                } else {
                  return '';
                }
              },
              main: function() {
                return $sce.trustAsHtml(scope._mode === 'date' ? $filter('date')(scope.date,
          'd') : `${$filter('date')(scope.date,
          'h:mm')}<small>${$filter('date')(scope.date,
          'a')}</small>`);
              },
              sub: function() {
                if (scope._mode === 'date') {
                  return $filter('date')(scope.date,
          'yyyy');
                } else {
                  return $filter('date')(scope.date,
          'HH:mm');
                }
              }
            };
            scope.calendar = {
              _month: 0,
              _year: 0,
              _months: ["January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"],
              offsetMargin: function() {
                return `${new Date(this._year,
          this._month).getDay() * 3.6}rem`;
              },
              isVisible: function(d) {
                return new Date(this._year,
          this._month,
          d).getMonth() === this._month;
              },
              class: function(d) {
                if (new Date(this._year,
          this._month,
          d).getTime() === new Date(scope.date.getTime()).setHours(0,
          0,
          0,
          0)) {
                  return "selected";
                } else if (new Date(this._year,
          this._month,
          d).getTime() === new Date().setHours(0,
          0,
          0,
          0)) {
                  return "today";
                } else {
                  return "";
                }
              },
              select: function(d) {
                return scope.date.setFullYear(this._year,
          this._month,
          d);
              },
              monthChange: function() {
                if ((this._year == null) || isNaN(this._year)) {
                  this._year = new Date().getFullYear();
                }
                scope.date.setFullYear(this._year,
          this._month);
                if (scope.date.getMonth() !== this._month) {
                  return scope.date.setDate(0);
                }
              }
            };
            scope.clock = {
              _minutes: 0,
              _hour: function() {
                var _h;
                _h = scope.date.getHours();
                _h = _h % 12;
                if (_h === 0) {
                  return 12;
                } else {
                  return _h;
                }
              },
              setHour: function(h) {
                if (h === 12 && this.isAM()) {
                  h = 0;
                }
                h += !this.isAM() ? 12 : 0;
                if (h === 24) {
                  h = 12;
                }
                return scope.date.setHours(h);
              },
              setAM: function(b) {
                if (b && !this.isAM()) {
                  return scope.date.setHours(scope.date.getHours() - 12);
                } else if (!b && this.isAM()) {
                  return scope.date.setHours(scope.date.getHours() + 12);
                }
              },
              isAM: function() {
                return scope.date.getHours() < 12;
              }
            };
            scope.$watch('clock._minutes',
          function(val) {
              if ((val != null) && val !== scope.date.getMinutes()) {
                return scope.date.setMinutes(val);
              }
            });
            scope.setNow = function() {
              return scope.date = new Date();
            };
            scope._mode = 'date';
            scope.modeClass = function() {
              if (scope._displayMode != null) {
                scope._mode = scope._displayMode;
              }
              if (scope._displayMode === 'time') {
                return 'time-only';
              } else if (scope._displayMode === 'date') {
                return 'date-only';
              } else if (scope._mode === 'date') {
                return 'date-mode';
              } else {
                return 'time-mode';
              }
            };
            return scope.modeSwitch = function() {
              var ref;
              return scope._mode = (ref = scope._displayMode) != null ? ref : scope._mode === 'date' ? 'time' : 'date';
            };
          }
        ]
      };
    }
  ]);

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxPQUFPLENBQUMsTUFBUixDQUFlLFNBQWYsRUFBMEIsRUFBMUIsQ0FDQSxDQUFDLFVBREQsQ0FDWSxVQURaLEVBQ3dCLFFBQUEsQ0FBQyxNQUFELENBQUE7V0FDdEIsTUFBTSxDQUFDLElBQVAsR0FBYyxJQUFJLElBQUosQ0FBQTtFQURRLENBRHhCLENBR0EsQ0FBQyxTQUhELENBR1csZ0JBSFgsRUFHNkI7SUFBQyxTQUFEO0lBQVksTUFBWjtJQUFvQixRQUFBLENBQUMsT0FBRDtJQUFVLElBQVYsQ0FBQTthQUMvQztRQUFBLFFBQUEsRUFBVSxJQUFWO1FBQ0EsT0FBQSxFQUFTLElBRFQ7UUFFQSxLQUFBLEVBQ0U7VUFBQSxXQUFBLEVBQWE7UUFBYixDQUhGO1FBSUEsT0FBQSxFQUFTLFNBSlQ7UUFLQSxXQUFBLEVBQWEsZUFMYjtRQU1BLElBQUEsRUFBTSxRQUFBLENBQUMsS0FBRDtJQUFRLE9BQVI7SUFBaUIsS0FBakI7SUFBd0IsT0FBeEIsQ0FBQTtBQUNKLGNBQUE7VUFBQSxLQUFLLENBQUMsS0FBTiw2Q0FBa0M7VUFDbEMsS0FBSyxDQUFDLFlBQU4sR0FBcUIsS0FBSyxDQUFDO1VBQzNCLE9BQU8sQ0FBQyxPQUFSLEdBQWtCLFFBQUEsQ0FBQSxDQUFBO1lBQ2hCLEtBQUssQ0FBQyxJQUFOLEdBQWdCLDJCQUFILEdBQTZCLElBQUksSUFBSixDQUFTLE9BQU8sQ0FBQyxXQUFqQixDQUE3QixHQUErRCxJQUFJLElBQUosQ0FBQTtZQUM1RSxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQWYsR0FBdUIsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFYLENBQUE7WUFDdkIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxNQUFmLEdBQXdCLEtBQUssQ0FBQyxJQUFJLENBQUMsUUFBWCxDQUFBO21CQUN4QixLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVos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Qlo7SUFEK0MsQ0FBcEI7R0FIN0I7QUFBQSIsInNvdXJjZXNDb250ZW50IjpbImFuZ3VsYXIubW9kdWxlKCd0ZXN0TW9kJywgW10pXG4uY29udHJvbGxlciAndGVzdEN0cmwnLCAoJHNjb3BlKSAtPlxuICAkc2NvcGUuZGF0ZSA9IG5ldyBEYXRlKClcbi5kaXJlY3RpdmUgJ3RpbWVEYXRlUGlja2VyJywgWyckZmlsdGVyJywgJyRzY2UnLCAoJGZpbHRlciwgJHNjZSkgLT5cbiAgcmVzdHJpY3Q6ICdBRSdcbiAgcmVwbGFjZTogdHJ1ZVxuICBzY29wZTpcbiAgICBfbW9kZWxWYWx1ZTogJz1uZ01vZGVsJ1xuICByZXF1aXJlOiAnbmdNb2RlbCdcbiAgdGVtcGxhdGVVcmw6ICd0aW1lLWRhdGUudHBsJ1xuICBsaW5rOiAoc2NvcGUsIGVsZW1lbnQsIGF0dHJzLCBuZ01vZGVsKSAtPlxuICAgIHNjb3BlLl9tb2RlID0gYXR0cnMuZGVmYXVsdE1vZGUgPyAnZGF0ZSdcbiAgICBzY29wZS5fZGlzcGxheU1vZGUgPSBhdHRycy5kaXNwbGF5TW9kZVxuICAgIG5nTW9kZWwuJHJlbmRlciA9IC0+XG4gICAgICBzY29wZS5kYXRlID0gaWYgbmdNb2RlbC4kbW9kZWxWYWx1ZT8gdGhlbiBuZXcgRGF0ZSBuZ01vZGVsLiRtb2RlbFZhbHVlIGVsc2UgbmV3IERhdGUoKVxuICAgICAgc2NvcGUuY2FsZW5kYXIuX3llYXIgPSBzY29wZS5kYXRlLmdldEZ1bGxZZWFyKClcbiAgICAgIHNjb3BlLmNhbGVuZGFyLl9tb250aCA9IHNjb3BlLmRhdGUuZ2V0TW9udGgoKVxuICAgICAgc2NvcGUuY2xvY2suX21pbnV0ZXMgPSBzY29wZS5kYXRlLmdldE1pbnV0ZXMoKVxuICAgIHNjb3BlLnNhdmUgPSAtPiBzY29wZS5fbW9kZWxWYWx1ZSA9IHNjb3BlLmRhdGVcbiAgICBzY29wZS5jYW5jZWwgPSAtPiBuZ01vZGVsLiRyZW5kZXIoKVxuICBjb250cm9sbGVyOiBbJyRzY29wZScsIChzY29wZSkgLT5cbiAgICBzY29wZS5kYXRlID0gbmV3IERhdGUoKVxuICAgIHNjb3BlLmRpc3BsYXkgPVxuICAgICAgdGl0bGU6IC0+XG4gICAgICAgIGlmIHNjb3BlLl9tb2RlIGlzICdkYXRlJyB0aGVuICRmaWx0ZXIoJ2RhdGUnKSBzY29wZS5kYXRlLCAnRUVFRSBoOm1tIGEnXG4gICAgICAgIGVsc2UgJGZpbHRlcignZGF0ZScpIHNjb3BlLmRhdGUsICdNTU1NIGQgeXl5eSdcbiAgICAgIHN1cGVyOiAtPlxuICAgICAgICBpZiBzY29wZS5fbW9kZSBpcyAnZGF0ZScgdGhlbiAkZmlsdGVyKCdkYXRlJykgc2NvcGUuZGF0ZSwgJ01NTSdcbiAgICAgICAgZWxzZSAnJ1xuICAgICAgbWFpbjogLT4gJHNjZS50cnVzdEFzSHRtbChcbiAgICAgICAgaWYgc2NvcGUuX21vZGUgaXMgJ2RhdGUnIHRoZW4gJGZpbHRlcignZGF0ZScpIHNjb3BlLmRhdGUsICdkJ1xuICAgICAgICBlbHNlIFwiI3skZmlsdGVyKCdkYXRlJykgc2NvcGUuZGF0ZSwgJ2g6bW0nfTxzbWFsbD4jeyRmaWx0ZXIoJ2RhdGUnKSBzY29wZS5kYXRlLCAnYSd9PC9zbWFsbD5cIlxuICAgICAgKVxuICAgICAgc3ViOiAtPlxuICAgICAgICBpZiBzY29wZS5fbW9kZSBpcyAnZGF0ZScgdGhlbiAkZmlsdGVyKCdkYXRlJykgc2NvcGUuZGF0ZSwgJ3l5eXknXG4gICAgICAgIGVsc2UgJGZpbHRlcignZGF0ZScpIHNjb3BlLmRhdGUsICdISDptbSdcbiAgICBzY29wZS5jYWxlbmRhciA9XG4gICAgICBfbW9udGg6IDBcbiAgICAgIF95ZWFyOiAwXG4gICAgICBfbW9udGhzOiBbXCJKYW51YXJ5XCIsXCJGZWJydWFyeVwiLFwiTWFyY2hcIixcIkFwcmlsXCIsXCJNYXlcIixcIkp1bmVcIixcIkp1bHlcIixcIkF1Z3VzdFwiLFwiU2VwdGVtYmVyXCIsXCJPY3RvYmVyXCIsXCJOb3ZlbWJlclwiLFwiRGVjZW1iZXJcIl1cbiAgICAgIG9mZnNldE1hcmdpbjogLT4gXCIje25ldyBEYXRlKEBfeWVhciwgQF9tb250aCkuZ2V0RGF5KCkgKiAzLjZ9cmVtXCJcbiAgICAgIGlzVmlzaWJsZTogKGQpIC0+IG5ldyBEYXRlKEBfeWVhciwgQF9tb250aCwgZCkuZ2V0TW9udGgoKSBpcyBAX21vbnRoXG4gICAgICBjbGFzczogKGQpIC0+XG4gICAgICAgIGlmIG5ldyBEYXRlKEBfeWVhciwgQF9tb250aCwgZCkuZ2V0VGltZSgpIGlzIG5ldyBEYXRlKHNjb3BlLmRhdGUuZ2V0VGltZSgpKS5zZXRIb3VycygwLDAsMCwwKSB0aGVuIFwic2VsZWN0ZWRcIlxuICAgICAgICBlbHNlIGlmIG5ldyBEYXRlKEBfeWVhciwgQF9tb250aCwgZCkuZ2V0VGltZSgpIGlzIG5ldyBEYXRlKCkuc2V0SG91cnMoMCwwLDAsMCkgdGhlbiBcInRvZGF5XCJcbiAgICAgICAgZWxzZSBcIlwiXG4gICAgICBzZWxlY3Q6IChkKSAtPiBzY29wZS5kYXRlLnNldEZ1bGxZZWFyIEBfeWVhciwgQF9tb250aCwgZFxuICAgICAgbW9udGhDaGFuZ2U6IC0+XG4gICAgICAgIGlmIG5vdCBAX3llYXI/IG9yIGlzTmFOIEBfeWVhciB0aGVuIEBfeWVhciA9IG5ldyBEYXRlKCkuZ2V0RnVsbFllYXIoKVxuICAgICAgICBzY29wZS5kYXRlLnNldEZ1bGxZZWFyIEBfeWVhciwgQF9tb250aFxuICAgICAgICBpZiBzY29wZS5kYXRlLmdldE1vbnRoKCkgaXNudCBAX21vbnRoIHRoZW4gc2NvcGUuZGF0ZS5zZXREYXRlIDBcbiAgICBzY29wZS5jbG9jayA9XG4gICAgICBfbWludXRlczogMFxuICAgICAgX2hvdXI6IC0+XG4gICAgICAgIF9oID0gc2NvcGUuZGF0ZS5nZXRIb3VycygpXG4gICAgICAgIF9oID0gX2ggJSAxMlxuICAgICAgICByZXR1cm4gaWYgX2ggaXMgMCB0aGVuIDEyIGVsc2UgX2hcbiAgICAgIHNldEhvdXI6IChoKSAtPlxuICAgICAgICBpZiBoIGlzIDEyIGFuZCBAaXNBTSgpIHRoZW4gaCA9IDBcbiAgICAgICAgaCArPSBpZiBub3QgQGlzQU0oKSB0aGVuIDEyIGVsc2UgMFxuICAgICAgICBpZiBoIGlzIDI0IHRoZW4gaCA9IDEyXG4gICAgICAgIHNjb3BlLmRhdGUuc2V0SG91cnMgaFxuICAgICAgc2V0QU06IChiKSAtPiBpZiBiIGFuZCBub3QgQGlzQU0oKSB0aGVuIHNjb3BlLmRhdGUuc2V0SG91cnMoc2NvcGUuZGF0ZS5nZXRIb3VycygpIC0gMTIpIGVsc2UgaWYgbm90IGIgYW5kIEBpc0FNKCkgdGhlbiBzY29wZS5kYXRlLnNldEhvdXJzKHNjb3BlLmRhdGUuZ2V0SG91cnMoKSArIDEyKVxuICAgICAgaXNBTTogLT4gc2NvcGUuZGF0ZS5nZXRIb3VycygpIDwgMTJcbiAgICBzY29wZS4kd2F0Y2ggJ2Nsb2NrLl9taW51dGVzJywgKHZhbCkgLT5cbiAgICAgIGlmIHZhbD8gYW5kIHZhbCBpc250IHNjb3BlLmRhdGUuZ2V0TWludXRlcygpIHRoZW4gc2NvcGUuZGF0ZS5zZXRNaW51dGVzIHZhbFxuICAgIHNjb3BlLnNldE5vdyA9IC0+IHNjb3BlLmRhdGUgPSBuZXcgRGF0ZSgpXG4gICAgc2NvcGUuX21vZGUgPSAnZGF0ZSdcbiAgICBzY29wZS5tb2RlQ2xhc3MgPSAtPlxuICAgICAgaWYgc2NvcGUuX2Rpc3BsYXlNb2RlPyB0aGVuIHNjb3BlLl9tb2RlID0gc2NvcGUuX2Rpc3BsYXlNb2RlXG4gICAgICBpZiBzY29wZS5fZGlzcGxheU1vZGUgaXMgJ3RpbWUnIHRoZW4gJ3RpbWUtb25seSdcbiAgICAgIGVsc2UgaWYgc2NvcGUuX2Rpc3BsYXlNb2RlIGlzICdkYXRlJyB0aGVuICdkYXRlLW9ubHknXG4gICAgICBlbHNlIGlmIHNjb3BlLl9tb2RlIGlzICdkYXRlJyB0aGVuICdkYXRlLW1vZGUnXG4gICAgICBlbHNlICd0aW1lLW1vZGUnXG4gICAgc2NvcGUubW9kZVN3aXRjaCA9IC0+IHNjb3BlLl9tb2RlID0gc2NvcGUuX2Rpc3BsYXlNb2RlID8gaWYgc2NvcGUuX21vZGUgaXMgJ2RhdGUnIHRoZW4gJ3RpbWUnIGVsc2UgJ2RhdGUnXG5dXSJdfQ==
//# sourceURL=coffeescript

Comments