JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/ng-template" id="templateCalendarPicker">
    <div class='input-group date datepicker_format' id='datepicker'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>	
</script>

<div ng-controller="mainController">
     <form class="form">
        <div class="form-group">
            <label for="firstName">Date </label>
            <div class="input-group date date_control" datetimepicker ng-model="date1" kind="date"></div>  
        </div>
        <div class="form-group">
            <label for="firstName">Time </label>
            <div class="input-group date date_control" datetimepicker ng-model="date2" kind="time"></div>  
        </div>
        <div class="form-group">
            <label for="firstName">Date/Time </label>
            <div class="input-group date date_control" datetimepicker ng-model="date3" kind="datetime"></div>
        </div>
        <div class="form-group">
            <label for="firstName">Month </label>
            <div class="input-group date date_control" datetimepicker ng-model="date4" kind="month"></div>  
        </div>
        <div class="form-group">
            <label for="firstName">Year </label>
            <div class="input-group date date_control" datetimepicker ng-model="date5" kind="year"></div>  
  ...

CSS

body {
    padding: 30px;
}

.date_control {
    margin: 0 0 3px 0;
    width: 200px;
}

JavaScript

angular.module('myApp', [])
.controller('mainController', function($scope) {
    $scope.date1 = '2015-09-01';
    $scope.date2 = '2015-09-01 23:59';
    $scope.date3 = '2015-09-16 11:35:25';
    $scope.date4 = '2015-09';
    $scope.date5 = '2015';
})
.directive('datetimepicker', [

  function() {
    var link;
    link = function(scope, element, attr, ngModel) {
        var format = '';
        switch(scope.kind) {
        	case 'time':
                format = 'HH:mm';
                break;
        	case 'datetime':
                format = 'YYYY-MM-DD HH:mm';
                break;
        	case 'month':
                format = 'YYYY-MM';
                break;
        	case 'year':
                format = 'YYYY';
                break;
            default:
                format = 'YYYY-MM-DD';
                break;
        }
        element = $(element);
        element.datetimepicker({
            format: format,
          	defaultDate: scope.date
      	});
        element.on('dp.change', function(event) {
            scope.$apply(function() {
                scope.date = event.date._d;
            });
        });
        scope.$watch('date', function(value, oldValue) {
        	if(value != oldValue) {
                element.data('DateTimePicker').date(scope.date);
            }
        });
    };

    return {
      restrict: 'A',
      scope: {
          date: '=ngModel',
          kind: '@'
      },
      link: link,
      templateUrl: 'templateCalendarPicker'
    };
  }
])