Question

我正在使用this jQuery DateTimePicker plugin和我的AngularJS应用。我正在使用AngularJS中的指令实现插件。我的问题是我无法找到弹出日期/时间选择器的上限和下限的方法。

看看my code on Plunker，让我知道我做错了什么。

相关代码：

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

谢谢！

Answer 1

datetimepicker人员在他们的文档中有一个很好的例子：

http://xdsoft.net/jqplugins/datetimepicker/#range

您必须特别注意onShow逻辑中“this”解析的内容，并确保正确解析日期时间输入字段的文本。

您的代码中有一些遗漏或错误，但我已经清理了一些并且有一个有效的演示：

http://plnkr.co/edit/fu4MlBOlroQHmqvrhKTl

相关代码：

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

无法限制AngularJS中jQuery DateTimePicker的日期范围

1 个答案: