Angular Bootstrap UI Datepicker and BootStrap Timepicker

Validating End-Date based on the value of Start-Date « using Angular Bootstrap UI Datepicker plugin.

by Yashwanth M

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Lightweight-Folding-Menu-Plugin-For-jQuery-treemenu-js/jquery.treemenu.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.js"></script>
<body ng-app="schedulerModule" ng-controller="schedulerController">

<div class="main-container-panel">

<div class="col-md-7 col-xs-12">
<div class="panel panel-light-grey">
<div class="panel-heading">Scheduler Duration Policy</div>
<div class="panel-body">

  <div class="clearfix"></div>
  
  <!-- <div class="form-group brd-line">
	<div>
	  <div class="col-sm-12">
		<div class="radio-inline">
		  <input type="radio" name="time" value="duration"><strong> Time</strong>
		</div>
	  </div>
	  <div id="constantTime" class="col-sm-12 mrgin-top-10">
		<div class="timeCls">
		  <div class="col-md-6 widCls-30">Hours:
			<input type="number" min="0" max="23" data-ng-value="{{timeIn_Hours}}" data-ng-model="timeIn_Hours">
		  </div>
		  <div class="col-md-6 widCls-30">Minutes:
			<input type="number" min="0"...

CSS

/* Panel CSS « Element center - https://stackoverflow.com/a/31289170/5081877*/
.main-container-panel {
	//width: 700px !important;	
	position:fixed; left: 50%; top: 50%;	
	-ms-transform: translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%, -50%);
}
.panel-group .panel-heading {
    border-bottom: 0;
}
.panel-light-grey > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    font-size: 13px;
    padding: 8px 10px;
}
.radioButton-top {
    color: #333;
    background-color: #f5f5f5;
    font-size: 13px;
    padding: 8px 10px;
}
.panel {
    border-radius: 2px !important;
}
.panel-light-grey {
    //background: #f5f5f5;
    border: 1px solid #eee !important;
}
.panel-body {
    padding: 15px;
}
.mrgin-top-10 {
    margin-top: 10px;
}
.form-group { // Overridng - bootstrap.css
    margin-bottom: 15px;
}
.brd-line {
	border:1px solid #eee; margin:10px 1px !important; padding:10px 2px;       width:100%; float:left;
}

// Time Radio button
// Used jQuery-treemenu - http://www.jqueryscript.net/demo/Lightweight-Folding-Menu-Plugin-For-jQuery-treemenu-js/
.timeCls {
    margin-top: 5px;
}
.widCls-30 {
   width: 80%;
    float: left;
   margin: 10px;
}

// Scheduler Calendar - bootstrap-datepicker3.standalone.min.css
@media (min-width: 992px) // // Overridng - bootstrap.css
.col-md-6 {
    width: 50%;
}

.input-group-addon .fa-calendar, .fa-clock-o {
    color: #26A69B;
}

JavaScript

(function(){
	"use strict";
	var demoModule = angular.module('schedulerModule', ["ui.bootstrap"]);
	demoModule.controller('schedulerController', ['$scope', schedulerControllerFun]);
	
	function schedulerControllerFun ($scope){
		$scope.dateFormat = 'yyyy-MM-dd';
		var today = new Date();
		
		// uib-datepicker-popup="{{dateFormat}}" datepicker-options="availableDateOptions" ng-model="AvailableDate" ng-change="ChangeExpiryMinDate(AvailableDate)"
		$scope.AvailableDate = today;
		// uib-datepicker-popup="{{dateFormat}}" datepicker-options="expireDateOptions" ng-model="ExpireDate"
		$scope.ExpireDate = today;
		
		
		$scope.$watch(`AvailableDate`, function(newValue, oldValue) {
			console.log('Password Watch list « Old:',oldValue,'\t New:',newValue);
		});

		/* https://angular-ui.github.io/bootstrap/#!#datepicker
		uib-datepicker settings « datepicker-options:
		showWeeks (Default: true) - Whether to display week numbers based on starting from the year.
		startingDay (Default: $locale.DATETIME_FORMATS.FIRSTDAYOFWEEK) - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
		
		formatDayTitle (Default: MMMM yyyy - August 1990) - Format of title when selecting day. For eg, Aug 90, 08 1990, ...
		formatDay (Default: dd) - Format of day in month.
		formatDayHeader (Default: EEE - Mon ) - Format of day in week header. For eg, EE - Mo
		
		formatMonthTitle (Default: yyyy - 1990) - Format of title when selecting month.
		formatMonth (Default: MMMM - January) - Format of month in year. For eg, MMM - Jan
		monthColumns (Default: 3) - Number of columns displayed in month selection.
		
		yearRows (Default: 4) - Number of rows displayed in year selection.
		yearColumns (Default: 5) - Number of columns displayed in year selection.
		*/
		$scope.availableDateOptions = {
			startingDay: 1, // MON - 1 [ 0-6 (0=Sunday, ..., 6=Saturday). ]
			showWeeks : false,
			
			formatDay: 'd',
			
			yearRows: 3,
			yearColumns: 4,
			
			minDate: today,
			maxDate: new Date(2030, 5,...