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();
Related
I want to set value of query params with a datepicker, but when I try it the data won't display. I have include ng-model into my query params but doesn't work.
Here is my .js file, I want to pass dt and dt2 into query params in http get
app.controller("repcont", ['$scope','$http',function($scope,$http){
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
$scope.dt2 = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyyMMdd'];
$scope.format = $scope.formats[0];
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
$scope.cari = function () {
$http.get('......./rpt?a='+$scope.dt+'b='+$scope.dt2).then(function(response){
$scope.report = response.data;
here is my .html file
<div class="col-md-2">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" />
<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-2">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt2" is-open="popup2.opened"/>
<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>
<button type="button" class="btn btn-primary" ng-click="cari()"> Search </button>
</div>
</div>
<div class="jarak">
<table class="table table-bordered">
<thead>
<th>Tanggal</th>
<th>Jumlah Bayar</th>
<th>Jumlah Failed</th>
<th>Jumlah Closed</th>
<th>Jumlah Unflag</th>
</thead>
<tbody ng-repeat="item in report">
<tr>
<td>{{item.paydate}}</td>
<td>{{item.sumpaid}}</td>
<td>{{item.sumfail}}</td>
<td>{{item.sumclose}}</td>
<td>{{item.sumflag}}</td>
<p>Total Rows : {{report.length}}</p>
</tr>
</tbody>
</table>
Here is the result of my report:
following code is angularjs code. I have used ui-bootstrap datepicker.So how can i restrict future month.
$scope.format = "MMMM-yyyy";
$scope.dateOptions = {
minMode: 'month',
maxdate : new Date()
};
$scope.open2 = function () {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
HTML code:
input type="text" class="form-control" ng-model="dt" ng-change="dateChanged()" uib-datepicker-popup="{{format}}" is-open="popup2.opened"
datepicker-options="dateOptions" datepicker-mode="'month'" ng-required="true"
id="datepicker" show-button-bar="false" readonly required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()">
<i class="glyphicon glyphicon-calendar" id="calendar"></i>
</button>
</span>
To disable future date selection in AngularJS UI bootstrap datepicker we need to set the model value to max-date property as today's date.
angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myApp').controller('myCntrl', function($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.dateformat = "MM/dd/yyyy";
$scope.today();
$scope.showcalendar = function($event) {
$scope.showdp = true;
};
$scope.showdp = false;
$scope.dtmax = new Date();
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
Date:
<input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" max-date="dtmax" />
<span>
<button type="button" class="btn btn-default" ng-click="showcalendar($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
source : source
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'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.
With uibootstrap's datepicker,I have a single page with two controls, one is starttime and one is endtime.
I want the following; when I set starttime ,the endtime's min-date is start time. But when I click the endtime I would like the fielded set to "" the.first time.
<p class="input-group">
<input class="form-control" datepicker-popup ng-model="view.starttime" is-open="dateSet.opened.startTime" min-date="'2015-05-02'" max-date="'2015-06-22'" datepicker-options="dateSet.dateOptions" date-disabled="dateSet.disabled(date, mode)" ng-required="true" show-weeks="flase" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dateSet.openFn($event,'startTime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<input class="form-control" datepicker-popup ng-model="view.endtime" is-open="dateSet.opened.endTime" min-date="view.starttime" max-date="'2015-06-22'" datepicker-options="dateSet.dateOptions" date-disabled="dateSet.dateSet.disabled(date, mode)" ng-required="true" show-weeks="flase"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dateSet.openFn($event,'endTime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
This works for me (forked from the bootstrap demo)
$scope.updateEndDate = true;
$scope.$watch('startDate', function(val) {
if($scope.updateEndDate) $scope.endDate = val;
});
$scope.click = function() {
if ($scope.updateEndDate)
{
$scope.updateEndDate = false;
$scope.endDate = "";
}
};
HTML
{{updateEndDate}}
<div class="col-md-6">
<p class="input-group">
<input name="startDate" type="text" class="form-control"
ng-model="startDate"
is-open="opened"
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
ng-focus="click()"
name="endDate" type="text" class="form-control"
ng-model="endDate"
is-open="opened"
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>
Plunk http://plnkr.co/edit/HfihvKanQsERr4wFq9VE?p=preview
If I understood correctly, you want to set the min-date on the 'end date' picker to be the value of the 'start date' picker, BUT you want to initialize the end date picker to be null.
To do this, you need to initialize the end date to a null value. In your case, that would be $scope.view = {endtime: ''};. Since you didn't provide your controller code or a demo, I just created a simple demo below that matches what I think you want to accomplish.
var app = angular.module('daterange.demo', ['ui.bootstrap'])
.config(function(datepickerConfig, datepickerPopupConfig) {
datepickerConfig.formatYear = 'yy';
datepickerConfig.startingDay = 1;
datepickerConfig.showWeeks = false;
datepickerPopupConfig.datepickerPopup = "shortDate";
datepickerPopupConfig.closeText = "Close";
});
app.controller('DatepickerPopupDemoCtrl', function($scope) {
$scope.startdt = new Date();
$scope.enddt = '';
$scope.opened = {
startdt: false,
enddt: false
};
$scope.open = function($event, picker) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened[picker] = true;
};
$scope.$watch('startdt', function(newval) {
if ($scope.enddt !== '' && newval > $scope.enddt) {
$scope.enddt = newval;
}
});
$scope.setRangeClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(12, 0, 0, 0);
var startDay = new Date($scope.startdt).setHours(12, 0, 0, 0);
var endDay = new Date($scope.enddt).setHours(12, 0, 0, 0);
if (dayToCheck >= startDay && dayToCheck < endDay) {
return 'range';
}
}
return '';
};
});
#import "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css";
.btn-default[disabled], .btn-default.disabled {
background-color: #999;
}
.range>.btn-default {
background-color: #5bb75b;
}
.range button span {
color: #fff;
font-weight: bold;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="daterange.demo">
<div class="container" ng-controller="DatepickerPopupDemoCtrl">
<div class="row">
<div class="col-xs-12">
<h2>Popup Date Range Picker Demo</h2>
<pre>Date Range: {{startdt | date:'fullDate' }} - {{enddt | date:'fullDate' }}</pre>
</div>
<div class="col-xs-6">
<label for="startdate">Start Date</label>
<p class="input-group">
<input type="text" class="form-control" id="startdate" datepicker-popup ng-model="startdt" is-open="opened.startdt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'startdt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-xs-6">
<label for="enddate">End Date</label>
<p class="input-group">
<input type="text" class="form-control" id="enddate" datepicker-popup ng-model="enddt" is-open="opened.enddt" min-date="startdt" custom-class="setRangeClass(date, mode)" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'enddt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</div>
In my demo above, I also added a $watch function that updates the end date picker when the start date picker changes. If the start date is greater than the end date, the end date is reset. Since you don't want the end date to change when the initial digest cycles are run on the page, you have to check for an empty value for the end date.
Additionally, I'm using the new custom-class attribute to show the date range on the end calendar. If you'd like to use this feature, make sure that you're using UI Bootstrap 0.13.0+.