<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.4/mask.min.js"></script>
<script src="ui-bootstrap-fontawesome-0.3.0.min.js"></script>
<script src="example.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerPopupDemoCtrl">
<h1>AngularUI Bootstrap Datepicker + AngularUI Mask Bluezzz</h1>
<div class="card">
<div class="card-block">
<h4 class="card-title">Case 1</h4>
<ul>
<li>ui-mask: 99/99/9999 - works and restricts input</li>
<li>uib-datepicker-popup: ddMMyyyy - Have to remove "/" from date format because of mask.</li>
<li>date value is OK for submitting</li>
</ul>
<p class="card-text">Date picker always loads current month even if previously selected date is another month. Everything else seems to work. My theory is that calendar component is expecting the "ddMMyyyy" format but mask gives it "dd/MM/yyyy"</p>
<span class="input-group">
<input name="date1" id="date1" type="text" class="form-control"
uib-datepicker-popup="ddMMyyyy" ui-mask="99/99/9999" placeholder="DD/MM/YYYY"
ng-model="date1" ng-required="true"
is-open="popup1.opened" datepicker-options="dateOptions" show-button-bar="false"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="fa fa-calendar fa-1"></i></button>
</span>
</span>
<span>Date value: {{date1}}</span>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Case 2</h4>
<ul>
<li>ui-mask: 99/99/9999 - works and restricts input</li>
<li>uib-datepicker-popup: dd/MM/yyyy - Include "/" in date format.</li>
<li>date value is undefined after picking a date from the picker</li>
</ul>
<p class="card-text">Visually, everything seems to work. But on date select, date value is undefined. My theory is that date value container expects the "dd/MM/yyyy" format but the mask causes only "ddMMyyyy" to be set, which is invalid.</p>
<span class="input-group">
<input name="date2" id="date2" type="text" class="form-control"
uib-datepicker-popup="dd/MM/yyyy" ui-mask="99/99/9999" placeholder="DD/MM/YYYY"
ng-model="date2" ng-required="true"
is-open="popup2.opened" datepicker-options="dateOptions" show-button-bar="false"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="fa fa-calendar fa-1"></i></button>
</span>
</span>
<span>Date value: {{date2}}</span>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Case 3</h4>
<ul>
<li>ui-mask: not used. input is not restricted</li>
<li>uib-datepicker-popup: dd/MM/yyyy - Include "/" in date format.</li>
<li>date value is OK for submitting</li>
</ul>
<p class="card-text">Everything works. Except we have no input mask.</p>
<span class="input-group">
<input name="date3" id="date3" type="text" class="form-control"
uib-datepicker-popup="dd/MM/yyyy" placeholder="DD/MM/YYYY"
ng-model="date3" ng-required="true"
is-open="popup3.opened" datepicker-options="dateOptions" show-button-bar="false"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open3()"><i class="fa fa-calendar fa-1"></i></button>
</span>
</span>
<span>Date value: {{date3}}</span>
</div>
</div>
</div>
</body>
</html>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.mask']);
angular.module('ui.bootstrap.demo')
.controller('DatepickerPopupDemoCtrl', function($scope) {
$scope.date1 = moment().startOf('day').toDate();
$scope.date2 = moment().startOf('day').toDate();
$scope.date3 = moment().startOf('day').toDate();
$scope.dateOptions = {
formatYear: 'yyyy',
showWeeks: false
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.popup1 = {
opened: false
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
$scope.open3 = function() {
$scope.popup3.opened = true;
};
$scope.popup3 = {
opened: false
};
});
/*
* ui-bootstrap-fontawesome
* https://github.com/maxfierke/ui-bootstrap-fontawesome
* Version: 0.3.0 - 2016-04-08
* License: MIT
*/
angular.module("ui.bootstrap.fontawesome",["ui.bootstrap.fontawesome.tpls","ui.bootstrap.carousel","ui.bootstrap.datepicker","ui.bootstrap.rating","ui.bootstrap.timepicker"]),angular.module("ui.bootstrap.fontawesome.tpls",["uib/template/carousel/carousel.html","uib/template/datepicker/day.html","uib/template/datepicker/month.html","uib/template/datepicker/year.html","uib/template/rating/rating.html","uib/template/timepicker/timepicker.html"]),angular.module("uib/template/carousel/carousel.html",[]).run(["$templateCache",function(a){a.put("uib/template/carousel/carousel.html",'<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">\n <div class="carousel-inner" ng-transclude></div>\n <a role="button" href class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">\n <span aria-hidden="true" class="fa fa-chevron-left"></span>\n <span class="sr-only">previous</span>\n </a>\n <a role="button" href class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">\n <span aria-hidden="true" class="fa fa-chevron-right"></span>\n <span class="sr-only">next</span>\n </a>\n <ol class="carousel-indicators" ng-show="slides.length > 1">\n <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">\n <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>\n </li>\n </ol>\n</div>\n')}]),angular.module("uib/template/datepicker/day.html",[]).run(["$templateCache",function(a){a.put("uib/template/datepicker/day.html",'<table class="uib-daypicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">\n <thead>\n <tr>\n <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="fa fa-chevron-left"></i></button></th>\n <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>\n <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="fa fa-chevron-right"></i></button></th>\n </tr>\n <tr>\n <th ng-if="showWeeks" class="text-center"></th>\n <th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th>\n </tr>\n </thead>\n <tbody>\n <tr class="uib-weeks" ng-repeat="row in rows track by $index">\n <td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>\n <td ng-repeat="dt in row" class="uib-day text-center" role="gridcell"\n id="{{::dt.uid}}"\n ng-class="::dt.customClass">\n <button type="button" class="btn btn-default btn-sm"\n uib-is-class="\n \'btn-info\' for selectedDt,\n \'active\' for activeDt\n on dt"\n ng-click="select(dt.date)"\n ng-disabled="::dt.disabled"\n tabindex="-1"><span ng-class="::{\'text-muted\': dt.secondary, \'text-info\': dt.current}">{{::dt.label}}</span></button>\n </td>\n </tr>\n </tbody>\n</table>\n')}]),angular.module("uib/template/datepicker/month.html",[]).run(["$templateCache",function(a){a.put("uib/template/datepicker/month.html",'<table class="uib-monthpicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">\n <thead>\n <tr>\n <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="fa fa-chevron-left"></i></button></th>\n <th><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>\n <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="fa fa-chevron-right"></i></button></th>\n </tr>\n </thead>\n <tbody>\n <tr class="uib-months" ng-repeat="row in rows track by $index">\n <td ng-repeat="dt in row" class="uib-month text-center" role="gridcell"\n id="{{::dt.uid}}"\n ng-class="::dt.customClass">\n <button type="button" class="btn btn-default"\n uib-is-class="\n \'btn-info\' for selectedDt,\n \'active\' for activeDt\n on dt"\n ng-click="select(dt.date)"\n ng-disabled="::dt.disabled"\n tabindex="-1"><span ng-class="::{\'text-info\': dt.current}">{{::dt.label}}</span></button>\n </td>\n </tr>\n </tbody>\n</table>\n')}]),angular.module("uib/template/datepicker/year.html",[]).run(["$templateCache",function(a){a.put("uib/template/datepicker/year.html",'<table class="uib-yearpicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">\n <thead>\n <tr>\n <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="fa fa-chevron-left"></i></button></th>\n <th colspan="{{::columns - 2}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>\n <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="fa fa-chevron-right"></i></button></th>\n </tr>\n </thead>\n <tbody>\n <tr class="uib-years" ng-repeat="row in rows track by $index">\n <td ng-repeat="dt in row" class="uib-year text-center" role="gridcell"\n id="{{::dt.uid}}"\n ng-class="::dt.customClass">\n <button type="button" class="btn btn-default"\n uib-is-class="\n \'btn-info\' for selectedDt,\n \'active\' for activeDt\n on dt"\n ng-click="select(dt.date)"\n ng-disabled="::dt.disabled"\n tabindex="-1"><span ng-class="::{\'text-info\': dt.current}">{{::dt.label}}</span></button>\n </td>\n </tr>\n </tbody>\n</table>\n')}]),angular.module("uib/template/rating/rating.html",[]).run(["$templateCache",function(a){a.put("uib/template/rating/rating.html",'<span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}" aria-valuetext="{{title}}">\n <span ng-repeat-start="r in range track by $index" class="sr-only">({{ $index < value ? \'*\' : \' \' }})</span>\n <i ng-repeat-end ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="fa" ng-class="$index < value && (r.stateOn || \'fa-star\') || (r.stateOff || \'fa-star-o\')" ng-attr-title="{{r.title}}"></i>\n</span>\n')}]),angular.module("uib/template/timepicker/timepicker.html",[]).run(["$templateCache",function(a){a.put("uib/template/timepicker/timepicker.html",'<table class="uib-timepicker">\n <tbody>\n <tr class="text-center" ng-show="::showSpinners">\n <td class="uib-increment hours"><a ng-click="incrementHours()" ng-class="{disabled: noIncrementHours()}" class="btn btn-link" ng-disabled="noIncrementHours()" tabindex="{{::tabindex}}"><span class="fa fa-chevron-up"></span></a></td>\n <td> </td>\n <td class="uib-increment minutes"><a ng-click="incrementMinutes()" ng-class="{disabled: noIncrementMinutes()}" class="btn btn-link" ng-disabled="noIncrementMinutes()" tabindex="{{::tabindex}}"><span class="fa fa-chevron-up"></span></a></td>\n <td ng-show="showSeconds"> </td>\n <td ng-show="showSeconds" class="uib-increment seconds"><a ng-click="incrementSeconds()" ng-class="{disabled: noIncrementSeconds()}" class="btn btn-link" ng-disabled="noIncrementSeconds()" tabindex="{{::tabindex}}"><span class="fa fa-chevron-up"></span></a></td>\n <td ng-show="showMeridian"></td>\n </tr>\n <tr>\n <td class="form-group uib-time hours" ng-class="{\'has-error\': invalidHours}">\n <input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="noIncrementHours()" ng-blur="blur()">\n </td>\n <td class="uib-separator">:</td>\n <td class="form-group uib-time minutes" ng-class="{\'has-error\': invalidMinutes}">\n <input style="width:50px;" type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="noIncrementMinutes()" ng-blur="blur()">\n </td>\n <td ng-show="showSeconds" class="uib-separator">:</td>\n <td class="form-group uib-time seconds" ng-class="{\'has-error\': invalidSeconds}" ng-show="showSeconds">\n <input style="width:50px;" type="text" placeholder="SS" ng-model="seconds" ng-change="updateSeconds()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="noIncrementSeconds()" ng-blur="blur()">\n </td>\n <td ng-show="showMeridian" class="uib-time am-pm"><button type="button" ng-class="{disabled: noToggleMeridian()}" class="btn btn-default text-center" ng-click="toggleMeridian()" ng-disabled="noToggleMeridian()" tabindex="{{::tabindex}}">{{meridian}}</button></td>\n </tr>\n <tr class="text-center" ng-show="::showSpinners">\n <td class="uib-decrement hours"><a ng-click="decrementHours()" ng-class="{disabled: noDecrementHours()}" class="btn btn-link" ng-disabled="noDecrementHours()" tabindex="{{::tabindex}}"><span class="fa fa-chevron-down"></span></a></td>\n <td> </td>\n <td class="uib-decrement minutes"><a ng-click="decrementMinutes()" ng-class="{disabled: noDecrementMinutes()}" class="btn btn-link" ng-disabled="noDecrementMinutes()" tabindex="{{::tabindex}}"><span class="fa fa-chevron-down"></span></a></td>\n <td ng-show="showSeconds"> </td>\n <td ng-show="showSeconds" class="uib-decrement seconds"><a ng-click="decrementSeconds()" ng-class="{disabled: noDecrementSeconds()}" class="btn btn-link" ng-disabled="noDecrementSeconds()" tabindex="{{::tabindex}}"><span class="fa fa-chevron-down"></span></a></td>\n <td ng-show="showMeridian"></td>\n </tr>\n </tbody>\n</table>\n')}]);