Unable to restrict date range for jQuery DateTimePicker in AngularJS

Question

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!

urban_raccoons · Accepted Answer · 2014-07-29 17:38:08Z

2

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);
        }
    };
});

answered Jul 29, 2014 at 17:38

urban_raccoons

3,4971 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

chipit24 Over a year ago

This works well, thanks! I have tried to restrict the time as well (if the dates are the same) but could not get it to work. I also could not get this to work if I tried making the directives more "independent". What if I have two sets of start and end datetime boxes in the form. How would I go about working with these?

urban_raccoons Over a year ago

For the start and end times, use minTime and maxTime. I don't really know what you mean about "independent". If you wanted multiple sets, you'd just need to specify different selectors somehow.

chipit24 Over a year ago

I had this working how I wanted before adding it as a directive for AngularJS - so I'm aware of maxTime and minTime (I've read through the documentation). I'm just not very fluent with JavaScript and it would not have occurred to me to use something like Date(Date.parse($("#end_date_text").val())). For my other question, I'll try using the attrs parameter passed to the function to specify a different selector.

chipit24 Over a year ago

Take a look at my updated Plunk to see what I have tried to make the maxTime setting work.

urban_raccoons Over a year ago

Alright - this one works: plnkr.co/edit/aGfEdc8FsqC3heiDt9Nn?p=preview Please accept my answer if you feel like it answered the question that you asked.

Collectives™ on Stack Overflow

Unable to restrict date range for jQuery DateTimePicker in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related