I am using this jQuery DateTimePicker plugin with my AngularJS app. I am implementing the plugin using directives in AngularJS. My problem is that I cannot find a way to put an upper and lower limit on the date/time picker that pops up.
Take a look at my code on Plunker and let me know what I am doing wrong.
Relevant code:
var updateDateTime = function(dateLower, dateUpper)
{
if(!dateLower || !dateUpper)
{
return;
}
else if(!dateLower.val() || !dateUpper.val())
return;
else
{
if(dateUpper.val())
{
var dateStringUpper = dateUpper.val().split(' ');
var maxDate = dateStringUpper[0] + ' ' + dateStringUpper[1] + ' ' + dateStringUpper[2];
var maxTime = dateStringUpper[4] + ' ' + dateStringUpper[5];
dateLower.setOptions({
maxDate: maxDate,
maxTime: maxTime
});
}
if(dateLower.val())
{
var dateStringLower = dateLower.val().split(' ');
var minDate = dateStringLower[0] + ' ' + dateStringLower[1] + ' ' + dateStringLower[2];
var minTime = dateStringLower[4] + ' ' + dateStringLower[5];
dateUpper.setOptions({
minDate: minDate,
minTime: minTime
});
}
}
};
myApp.directive("ngDatetimestart", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: updateDateTime($(elem), $('#end_date_text')),
onChangeDateTime: updateDateTime($(elem), $('#end_date_text'))
});
}, 0);
}
};
});
myApp.directive("ngDatetimeend", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: updateDateTime($('#start_date_text'), $(elem)),
onChangeDateTime: updateDateTime($('#start_date_text'), $(elem))
});
}, 0);
}
};
});
Thanks!
The datetimepicker folks have a perfectly good example of this in their docs:
http://xdsoft.net/jqplugins/datetimepicker/#range
You have to be particularly careful of what exactly "this" resolves to in the onShow logic, as well as making sure to properly parse the text of the datetime input fields.
There were a few things missing or wrong in your code, but I've cleaned yours up a bit and have a working demo:
http://plnkr.co/edit/fu4MlBOlroQHmqvrhKTl
The relevant code:
myApp.directive("ngDatetimestart", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: function(ct) {
this.setOptions({
maxDate: $("#end_date_text").val() ? new Date(Date.parse($("#end_date_text").val())) : false
});
}
});
}, 0);
}
};
});
myApp.directive("ngDatetimeend", function($timeout) {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ngModel) {
$timeout(function() {
$(elem).datetimepicker({
format: 'F j, Y @ g:i A',
formatDate: 'F j, Y',
formatTime: 'g:i A',
timepicker: true,
lang: 'en',
onShow: function(ct) {
this.setOptions({
minDate: $("#start_date_text").val() ? new Date(Date.parse($("#start_date_text").val())) : false
});
}
});
}, 0);
}
};
});