AngularJS: angular-ui datepicker directive

by Premchand R

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<div ng-app="testMod">
<div ng-controller="testCtrl">
  <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"></time-date-picker>
    </div>
  </div>
  <script type="text/ng-template" id="time-date.tpl">
    <div ng-class="modeClass()" class="time-date">
      <div class="display">
        <div class="title" ng-click="modeSwitch('year')">{{display.title() || YYYY}}</div>
        <div class="content">
          <div ng-bind-html="display.main()" class="main-title" ng-click="modeSwitch('date')"></div>
          <div ng-click="modeSwitch('time')" class="clockWrapper switch-control">
            <i class="fa fa-clock-o"></i>
          </div>
        </div>
      </div>
      <div class="control">
        <div class="slider">
          <div class="date-control">
            <div class="title">

              <div class="monthSelector row">
                <span class="col-xs-2 pointer" ng-click="calendar.monthChange(true)"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
                <span class="month-part col-xs-8 text-center"><strong>{{date | date:"MMMM...

SCSS

.modal-dialog{
          width: 300px !important;
    }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
        border: none !important;
    }
      .time-date {   
     /* font-size: 16px;*/
      overflow: hidden;
      border: none;
      max-width: 600px;
    }

.time-date > .display {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.time-date > .display > .title {
 
  text-align: left;
}

.time-date > .display > .content {
 
}

.time-date > .display > .content > .super-title {
  text-transform: uppercase;
}

.time-date > .display > .content > .main-title {
  /*font-size: 8rem;*/
  text-align: left;
  width: 70%;
}

.time-date > .display > .content > .main-title > large {
  font-size: 2rem;  
}

.time-date > .display > .content > .sub-title {
  color: #8acfc8;
}

.time-date > .control {
  width:100%;
  position: relative;
}

.time-date > .control > .slider {
  position: absolute !important;
  width: 300%;
  transition: left 0.6s ease-in-out;
}

.time-date > .control > .slider > .date-control,
.time-date > .control > .slider > .time-control,
.time-date > .control > .slider > .year-control,
.time-date > .control > .slider > .switch-control {
  float: left;
  height: 27.3rem;
}

.time-date > .control > .slider > .date-control,
.time-date > .control > .slider > .time-control,
.time-date > .control > .slider > .year-control {
  width:33.333%;
  color: #999;
}

.time-date > .control > .slider > .switch-control {
  width: 10%;
  cursor: pointer;
}
.time-date > .control > .slider > .date-control > .title,
.time-date > .control > .slider > .year-control > .title {
  font-weight: 400;
  line-height: 3em;
}

/*.time-date > .control > .slider > .date-control > .title > span {
  cursor: pointer;
  position: relative;
  text-align: center;
  display: block;
  font-weight: 200;  
}*/

.time-date > .control > .slider > .date-control > .title >...

JavaScript

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');
               }
             },*/
            title: function() {
              /*if (scope._mode === 'date') {
                return $filter('date')(scope.date, 'yyyy');
              } else if (scope._mode === 'time') {
                //return $filter('date')(scope.date, 'MMMM d yyyy');
                return $filter('date')(scope.date, 'yyyy');
              }*/
              return $filter('date')(scope.date, 'yyyy');
            },
            "super": function() {
              if (scope._mode === 'date') {
                return...