Angular Bootstrap UI Datepicker update minDate - angularjs

This should be simple and I believed all my code is correct, but I suppose it is not.
I have two Datepickers. Datepicker 2 should be setting it's minDate to the value of datepicker 1. This works, as I can see the min-date attr updating when I select a date on Datepicker 1, but Datepicker 2 does not re-render the disabled dates. I feel like I should be refreshing the Datepicker somehow, but unsure how.
// Datepicker Controller
app.controller('datepickerController', ['$scope', function($scope) {
// open depart date
$scope.openDepartDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open depart datepicker
$scope.departDatepickerOpen = true;
}
// open return date
$scope.openReturnDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open return datepicker
$scope.returnDatepickerOpen = true;
}
$scope.$watch('search.searchparams.journeys[0].departuredate',function(value){
$scope.returnMinDate = value;
});
// minDate set intiitally
$scope.departMinDate = new Date();
$scope.returnMinDate = new Date();
// date options
$scope.departDateOptions = {};
$scope.returnDateOptions = {};
// date format
$scope.dateFormat = 'EEE dd/MM/yyyy';
}]);
And here is the actual input
<input id="returnDate" placeholder="Returning" type="text" class="form-control" data-ng-model="search.searchparams.journeys[1].departuredate" datepicker-popup="{{dateFormat}}" data-ng-focus="openReturnDatepicker($event)" show-button-bar="false" min-date="{{returnMinDate}}" is-open="returnDatepickerOpen" datepicker-options="returnDateOptions" readonly=""/>
Nothing I have tried has made a difference. The new minDate is updating, but just not being applied to the Datepicker. I can actually see the updated min-date attribute in my inspector, so all values are updating as expected.
Any help appreciated

The issue is so simple and so silly.
min-date="{{returnMinDate}}"
needs to be
min-date="returnMinDate"
It smacked me right in the face this morning.

Related

How to show month and year only in 720kb AngularJS Datepicker

I'm using this angularJS datepicker in my application and would like to know if there is a way to display only months and years in the calendar and remove the days?
This is how I'm using the datepicker:
<datepicker date-format="MM yy" button-prev-title="previous month" button-next-title="next month" button-prev="<i class='fa fa-arrow-left'></i>" button-next="<i class='fa fa-arrow-right'></i>" id="dtDate" name="dtDate" >
<input ng-model="dtDate" />
</datepicker>
I tried to add date-format="MM yy" but it only changes the selected date and not the datepicker itself.
I think you might be interested in using this git repository that I created.
https://github.com/morfsys/multiple-month-picker
This is how you can use it in your project:
HTML
<input type="text" multiple-month-picker />
JS
//Initiate your app by injecting 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys'])
It helps you to select multiple months across multiple years. The best thing? It is on AngularJS.
I hope it helps you.
I have the same problem with angularjs-datepicker.
I used another datepicker: angularjs-material.
Here is how you can use it:
<md-datepicker ng-model="startDate" md-mode="month" md-placeholder="dd/MM/yyyy" md-date-locale="mylocale" md-open-on-focus></md-datepicker>
And then in your controller:
function pad(n) {return n < 10 ? "0"+n : n;}
$scope.mylocale = {
formatDate: function(date) {
var d=new Date(date);
if(isNaN(d.getTime())) {
return '';
} else {
return pad(d.getDate())+"/"+pad(d.getMonth()+1)+"/"+d.getFullYear();
}
},
parseDate: function(date) {
var ds = date.split('/');
var d=new Date(ds[2],ds[1]-1,ds[0]);
if(isNaN(d.getTime())&&d!=''){
return new Date(NaN);
} else {
return d;
}
} };
And it is working. Just make sure that you properly handle case when input is invalid (form.startDate.$invalid).
If someone has a solution for angularjs-datepicker, please let us know.

How I restrict the user to only enter Date Field in angular bootstrap datepicker

I am new in angular and I stuck at point where I am unable to restrict the user to enter valid date manually. It sets the date as undefined for empty, characters as well as invalid date entered by the user. The date format I have mentioned is MM-dd-yyyy. Even if I enter 85/34/2102 it assumes this as a date and takes some junk value instead of validating and throwing an error.
my code of angular date-picker in html
<input type="text" class="form-control" datepicker-popup="{{clCtrl.format}}"
ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate"
min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions"
ng-required="true" close-on-date-selection="true" show-button-bar="false" />
and code in angular controller side
self.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
self.formats = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy', 'shortDate'];
self.format = self.formats[0];
self.openQualityDate = function ($event) {
$event.preventDefault();
$event.stopPropagation();
self.openedQualityDate = true;
};
self.toggleMin = function () {
self.minDate = self.minDate ? null : new Date();
};
self.toggleMin();
self.clear = function () {
self.QualityExpirationDate = null;
};
Add a 'readonly' attribute to the input field:
<input type="text" readonly class="form-control" datepicker-popup="{{clCtrl.format}}" ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate" min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions" ng-required="true" close-on-date-selection="true" show-button-bar="false" />
If you want to allow user input but restrict to valid dates you could add this to your controller:
$scope.$watch('dt', function(val) {
$scope.isValidDate = isNaN(new Date(val).getTime());
});
then use the 'isValidDate' scope property to show/hide a message and/or disable submission, or whatever you want to do.
Of course it would be better to abstract this validation into a directive so it could easily be reused on all your date fields.

Angularjs datepicker - how to set mutually dependent dates

I am working on a feature that requires me to inactivate an entity for a given period. So, I show two date pickers : 1) Starting date and 2) Ending date.
The two dates are interdependent in a manner where the starting date limits the min date for ending date and the ending date limits the max date for starting date.
<input type="text" ui-date="inactive.datePicker" ui-date-format="mm/dd/yy" ng-model="inactive.details.fromDate" id="fromDate" ng-change="error.dueDate=false" value="inactive.details.fromDate}}"/>
<img ng-click="showFromDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >
<input type="text" ui-date="inactive.datePicker" ui-date-ormat="mm/dd/yy" ng-model="inactive.details.toDate" id="toDate" ng-change="error.dueDate=false" value="{{inactive.details.toDate}}"/>
<img ng-click="showToDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >
$scope.showFromDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.inactive.fromDatepicker = {
max : $scope.inactive.details.toDate;
}
angular.element("#fromDate").focus();
};
$scope.showToDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.inactive.toDatepicker = {
max : $scope.inactive.details.fromDate;
}
angular.element("#toDate").focus();
};
But right now this piece of snippet isn't exactly working properly. The min date is setting properly but let's kind of disabling the datepicker so I couldn't select a date. Also how do I reinitialize or refresh the datepicker in AngularJS like we could do in Jquery by
$("#myDatepicker").datepicker("refresh");
In angular-ui-bootstrap 0.14.3 I managed to achieve this just by binding min and max to the other model. I use a wrapper directive around datepicker but it shouldn't make any difference:
Begin datepicker: max-date="myobject.endDate"
End datepicker: min-date="myobject.beginDate" max-date="today"

AngularJS data binding not working with ui-date component

I'm using the ui-date component as a dropdown datepicker in an AngularJS project. The problem I'm having is that the data binding between the model and the datepicker is only one-way, not two-way as I expect it to be.
My HTML has a Prev and Next button to allow the user to adjust the date backwards and fowards one day at a time. Or they can click in the date box itself to show the dropdown datepicker and specify any date they want.
Plunker here.
HTML:
ThisDate: {{ ThisDate }}
<p>
<button ng-click="PrevDay()">< Prev</button>
<button ng-click="NextDay()">Next ></button>
<p>
Set Date: <input ui-date ng-model="ThisDate" id="ThisDate">
Javascript:
var app = angular.module('app', ['ui.date']);
app.controller('MyController', function($scope) {
$scope.ThisDate = new Date();
$scope.PrevDay = function() {
$scope.ThisDate = DateOffset($scope.ThisDate, -1);
};
$scope.NextDay = function() {
$scope.ThisDate = DateOffset($scope.ThisDate, 1);
};
function DateOffset(ThisDate, NumDays) {
var d = ThisDate;
d.setDate(d.getDate() + NumDays);
return d
}
});
Problem:
If you change the date using the dropdown datepicker, the date box will change and {{ ThisDate }} will update properly. But if you click the Prev or Next buttons, only the bound {{ ThisDate }} will change... not the date box which is bound to "ThisDate" in the model.
Steps to Reproduce:
Run the Plunker. Notice that if you click in the date box, you can change the date from the dropdown and the date box will change accordingly AND the text area at the top which is bound to ThisDate will also change. Now click the Next or Prev button. Notice that ONLY the bound ThisDate text will change, NOT the date box. The date box should also change since it is bound to ThisDate.
Any ideas on why the ui-date datepicker isn't registering the changes in the model to ThisDate?
Plunker here.
It's not seeing the date object change. If you assign a new date object it works:
function DateOffset(ThisDate, NumDays) {
var d = new Date();
d.setTime(ThisDate.getTime() + (NumDays * 1000 * 60 * 60 * 24));
return d
}

Can't set datepicker date from controller in AngularJS

I am trying to create an AngularJS datepicker on the push of a button. I am using this bootstrap-ui control. The control works (pops up on the click of a button, and I can select a date), but I can't seem to set the initial date back from the scope (so that when it is first opened, the designated date is already selected).
The error I get in the Chrome console is:
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
jade:
button(type="button" ng-model="date.from" btn-radio="'From'" ng-click="date.openFromPopup($event);" show-weeks="false" show-button-bar="false" datepicker-popup = "date.format" is-open = "date.fromOpened" min = "date.minDate" max = "date.today") From
Since I have a watch on $scope.date.from, I can confirm that the selected date is correct, but I can never set it from the controller. Any ideas?
AngularJS controller:
$scope.date = {};
$scope.date.format = "yyyy/MM/dd";
$scope.date.opened = false;
$scope.date.from = new Date();
$scope.date.today = new Date();
$scope.date.minDate = null;
$scope.date.fromOpened = false;
$scope.$watch('date.from', function(v) {
if(v){
alert(v);
}
});
In the example on the angular-ui page, it says to use it like this...
$scope.from = function() {
$scope.dt = new Date();
};
$scope.from();
Does that work?

Resources