I have two datepickers, one representing start date and another the end date.
I am using angular-ui.
How to make each one to function independently.
EDIT:
And also how to make the 2 datepickers to appear on the same line
Here is plunkr demo
HTML code
<body ng-controller="DatepickerDemoCtrl">
<br><br><br>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<script type="text/javascript" src="bootstrap-select.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Thanks in advance
Demo: http://plnkr.co/edit/rGJndx1sXK9u8WCXSMFS?p=preview
JS:
angular.module("myApp", ['ngAnimate', 'ui.bootstrap'])
.controller('DatepickerDemoCtrl', function($scope) {
$scope.today = function() {
$scope.dt1 = new Date();
$scope.dt2 = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt1 = null;
$scope.dt2 = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = true;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 2);
$scope.events = [{
date: tomorrow,
status: 'full'
}, {
date: afterTomorrow,
status: 'partially'
}];
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
})
.controller("mainctrl", function($scope) {
$scope.courses = [{
"name": "Java",
"level": "I"
}, {
"name": "Python",
"level": "I"
}, {
"name": "Nodejs",
"level": "A"
}];
$scope.caller = function() {
console.log($scope.inputvalue);
};
})
.filter('inArray', function($filter) {
return function(list, arrayFilter, element) {
return $filter("filter")(list, function(listItem) {
return !arrayFilter || arrayFilter.length == 0 || arrayFilter.indexOf(listItem[element]) != -1;
});
};
});
HTML:
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
I am not sure if this is good way to do but I did it in this way. May be someone can correct me on this.
basically you just need to seperate the scope variable, that opens both datepickers.
scope.openFirst = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.openedFirst = true;
};
You could use the same function for both datepickers too and add an argument to the function.
http://plnkr.co/edit/df0GQfnh4g1Os3DwcK0V?p=preview
This is very rudimentary but can give you the right idea and works.
just elaborating on K K's comment
Use different is-open attribute and then pass the attribute in through the ng-click function.Also use different ng-models
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>
inside controller add the passing argument
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
Related
See this Plunkr :
http://plnkr.co/edit/gSTqtxfcEjrYLt1mIzVD?p=preview
I have taken this from an eg. given at https://angular-ui.github.io/bootstrap/ for a demo of date picker.
In the heading, My Date when I am selecting a date 2016-06-15 from the date picker, the model which is bound shows date as 2016-06-14.
so always there is a mismatch of 1 day.
This post angular bootstrap datepicker mismatch between view and model
suggested to apply date filter to the view.
However, it is only a patch up as when I am posting to an api, I still get 2016-06-14 on the server.
Is this a bug or is there some work around for it ?
HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerPopupDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<br/>
<h2> My Date</h2>
Date is : {{dt1 | date : 'dd/MM/yyyy'}}
Real Date is : {{dt1}}
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="popup3.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open3()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<input type="text" class="form-control" ng-model="dt1 | date" />
</div>
<div class="row">
<div class="col-md-6">
<label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>
</body>
</html>
Script :
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.open3 = function() {
$scope.popup3.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
$scope.popup3 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
});
I solved it by adding this in the model.
ng-model-options="{timezone: 'UTC'}"
See the updated plunkr here.
http://plnkr.co/edit/x0WLHNG7l5VBRU5tN8Q1?p=preview
I think, time zone is causing this issue. Please refer the below URL:
https://gist.github.com/weberste/354a3f0a9ea58e0ea0de
I have a form with a ui-bootstrap datepicker. I want to prevent the date from being in the past.
I set the min-date setting on the directive to a new Date() as shown below. This correctly prevents selection of dates in the past when using the popup, however I can still type in a date in the past and this validates OK.
How can I enforce min-date validation on dates that are typed in?
Plunkr: https://plnkr.co/edit/EHO1BG8BspNMvsoKT30l?p=preview
Html:
<div class="input-group">
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup1.opened"
min-date="minDate"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
name="dt"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
JS:
app.controller('MainCtrl', function($scope) {
$scope.dt = new Date();
$scope.minDate = new Date();
$scope.format = "dd/MM/yyyy";
$scope.altInputFormats = ['d!/M!/yyyy'];
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.popup1 = {
opened: false
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};
});
This should work correctly, I have added changeHandler function in your controller and called it on ng-change of input.
Html:
<div class="input-group">
<input type="text"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="popup1.opened"
min-date="minDate"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
ng-change="changeHandler()"
name="dt"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
JS:
app.controller('MainCtrl', function($scope) {
$scope.dt = new Date();
$scope.minDate = new Date();
$scope.format = "dd/MM/yyyy";
$scope.altInputFormats = ['d!/M!/yyyy'];
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.popup1 = {
opened: false
};
$scope.changeHandler = function () {
$scope.dateForm.dt.$setValidity('$valid', $scope.dt.getTime() >= $scope.minDate.getTime());
}
$scope.open1 = function() {
$scope.popup1.opened = true;
};
});
I have a simple code, 2 dates with uib-datepicker-popup:
<div>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.initDate" is-open="status1.opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'initDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.endDate" is-open="status2.opened" close-text="Close" min-date="{{minEndDate}}" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'endDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
I need to dynamically set a minimum date in the second date from the first date.
I have tried different ways and no one of them work
$scope.open = function($event, date) {
if(date === 'initDate'){
$scope.status1.opened = true;
}else if(date === 'endDate'){
$scope.status2.opened = true;
}
};
$scope.status1 = {
opened: false
};
$scope.status2 = {
opened: false
};
$scope.adSearch.initDate = null;
$scope.minEndDate = $scope.adSearch.initDate;
$scope.$watch('adSearch.initDate', function(v){
console.log(v);
$scope.minEndDate = v;
});
This is what i have in my controller at this moment, it is something I have found that works for datepicker from ui-bootstrap, but does not work for uib-datepicker.
<html ng-app="ui.bootstrap.demo">
<head>
<link rel="stylesheet" href="bootstrap.css">
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="ui-bootstrap-tpls-1.1.1.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.minDate = new Date();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.minDate = $scope.dt;
$scope.popup2.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.format = 'dd-MMMM-yyyy';
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
});
</script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" show-button-bar="false" min-date="minDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
check this. the minDate var in $scope is set when open2() fn is called(i.e when the end date popup is popped. Use ng-Click()
This is an old question but some people might still find this useful for the newer versions. I am currently using angular-ui-bootstrap, version 2.2.0.
Arrive Date
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="arriveDateOptions"
ng-model="arriveDatePicked"
is-open="arriveDateCalendarOpened"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openArriveDateCalendar()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
Departure Date
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="departureDateOptions"
ng-model="departureDatePicked"
is-open="departureDateCalendarOpened"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDepartureDateCalendar()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
My controller looks like this:
$scope.formatDate = 'dd-MMMM-yyyy';
$scope.arriveDateCalendarOpened = false;
$scope.departureDateCalendarOpened = false;
var today = new Date();
var minDepartureDate = new Date();
minDepartureDate.setDate(today.getDate() + 7);
$scope.arriveDatePicked = today;
$scope.departureDatePicked = minDepartureDate;
$scope.arriveDateOptions = {
maxDate: new Date(2020, 5, 22),
minDate: today
};
$scope.departureDateOptions = {
maxDate: new Date(2020, 5, 22),
minDate: today
};
I am not sure about the old versions of ui-boostrap and how they used to work, but in this version we can set the minimum and the maximum date in the datepicker-options attribute.
In order to update the departureDate on the fly when the arriveDate changes, we need to force that when we open the departureDate calendar. (in my case, when the openDepartureDateCalendar() function is called)
$scope.openArriveDateCalendar = function () {
$scope.arriveDateCalendarOpened = true;
};
$scope.openDepartureDateCalendar = function () {
$scope.departureDateOptions.minDate = $scope.arriveDatePicked;
$scope.departureDateCalendarOpened = true;
};
you need to update your ui bootstrap version to atleast release 0.14.0
here
is the migration info from old version to new.
uib-datepicker has a big problem when you want to update the model from another date, I changed my mind and tried something different that works for angular too (using jquery-ui datepicker).
this are the 2 directives that i used and worked well:
.directive('startDateCalendar', [
function() {
return function(scope, element) {
scope.$watch('filterDate.endDate', (function(newValue) {
element.datepicker('option', 'maxDate', newValue);
}), true);
return element.datepicker({
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
maxDate: scope.filterDate.endDate,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(date) {
scope.filterDate.initDate = date;
var dateHelper = date.split('-');
scope.adSearch.initDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
scope.dateSearch();
scope.$apply();
}
});
};
}])
.directive('endDateCalendar', [
function() {
return function(scope, element) {
scope.$watch('filterDate.initDate', (function(newValue) {
element.datepicker('option', 'minDate', newValue);
}), true);
return element.datepicker({
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
minDate: scope.filterDate.initDate,
onSelect: function(date) {
scope.filterDate.endDate = date;
var dateHelper = date.split('-');
scope.adSearch.endDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
scope.dateSearch();
return scope.$apply();
}
});
};
}])
this is the html:
<input type="text" start-date-calendar="" ng-model="filterDate.initDate" placeholder="Start Date" class="form-control" readonly="readonly" />
<input type="text" end-date-calendar="" ng-model="filterDate.endDate" placeholder="End Date" class="form-control" readonly="readonly"/>
I was having a similar issues setting the minDate in version 2.5.0.
I tried all the answers here and none of them worked for me, I was able to get the minDate to update dynamically just by casting it to a new Date().
HTML:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label id="lbl"></label>
<p class="input-group" style="max-width:280px;">
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="DepartureDate" is-open="departureDate" datepicker-options="departureDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="departureDate = !departureDate"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label id="lbl"></label>
<p class="input-group" style="max-width:280px;">
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="ArrivalDate" is-open="arrivalDate" datepicker-options="arrivalDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ArrivalDateClick()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
Code:
$scope.departureDateOptions = {
minDate: new Date()
};
$scope.arrivalDateOptions = {
minDate: null
};
$scope.ArrivalDateClick = function () {
$scope.ArrivalDate = $scope.DepartureDate;
$scope.arrivalDateOptions.minDate = new Date($scope.DepartureDate);
$scope.arrivalDate = !$scope.arrivalDate;
};
$scope.ArrivalDateClick();
I'm trying to display angular ui datepicker with day header (Format of day in week header) with 2 letters
the defualt in 3 letters and is defined by attr format-day-header="EEE"
where can i find the option for 2 letters?
(Ive tried 'EE' it just writes EE in the header).
the plunker is plunker link
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$scope.status.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.status = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 2);
$scope.events =
[
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i=0;i<$scope.events.length;i++){
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="dt" format-day-header="EEE" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</body>
</html>
I had this same problem, searched for EEE in ui-bootstrap.js / ui-bootstrap-tpls.js files, they are using regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|') for feeding the value for EEE attributes.
Better Way
Update the provider $locale's SHORTDAY using $provide.decorator
myApp.config(['$provide', Decorate]);
function Decorate($provide) {
$provide.decorator('$locale', function ($delegate) {
var value = $delegate.DATETIME_FORMATS;
value.SHORTDAY = [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
];
return $delegate;
});
};
Wrote this article Customizing Angular-UI Bootstrap’ Directives for more customization you may want to do.
Other Way
You have to search for SHORTDAY in angular.js which you're using and edit it according to your need.
Ex:
"SHORTDAY": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
This should work :)
Also you can create a new association of EE (in ui-bootstrap or ui-bootstrap-tpls) and define it in Angular.js with value you want, haven't tried but should work.
Tell me if there's any better way of doing this.
The format for two letters would be
format-day-header="EEEEEE"
That should return Mo, Tu, and so on.
The date picker seems to be only working on the first click and then after that it won't pop up. I am guessing it has something to do with some crossed variable or function definitions, but I can't figure out how to fix it.
Here is the code:
http://plnkr.co/edit/ridTspMBHE1iphrSobQr?p=preview
HTML
<div ng-controller="ModalDemoCtrl">
<button class="btn btn-info" ng-click="open_modal()">Edit</button>
<script type="text/ng-template" id="notificationInput.html">
<div class="modal-header">
<h3 class="modal-title">My Modal</h3>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="n_title">Title</label>
<input type="text" class="form-control" id="n_title" value="{{selectedNotification.title}}">
</div>
<div class="form-group">
<label for="n_release">Release</label>
<p class="input-group">
<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
Javascript
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
$scope.open_modal = function(notification) {
$scope.selectedNotification = notification;
var modalInstance = $modal.open({
templateUrl: 'notificationInput.html',
controller: ModalInstanceCtrl,
scope: $scope
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.initDate = new Date('2016-15-20');
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
};
As you are using it inside modal there is scope issue. You just need to use $parent.opened instead opened.
Modified HTML
<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
Working DEMO
This has worked for me:
In html replace is-open="opened" by is-open="field.opened"
and the same in the controller, replace
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
by
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.field.opened = true;
};