Angular daterangepicker - “FROM”上的最小日期

Question

我需要设置“从”和“到”日期。我只想从明天或将来的任何日期开始设置“从”，而不是在过去。并在选择开始日期后，启用“到”选择器并设置结束日期，但最小日期范围。并在 dom 中显示日期范围。 我从官方页面尝试github解决方案，但一切都来自引导日期范围而不是角度日期范围。谢谢 这是html代码

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <p class="input-group">
                            <input type="text" 
                                   class="form-control" 
                                   datetime-picker="yyyy-MM-dd"
                                   ng-model="ctrl.picker4.date"
                                   is-open="ctrl.picker4.open" 
                                   enable-time="false" 
                                   datepicker-options="ctrl.picker4.datepickerOptions" 
                                   myformat
                                   />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 form-group">
                    <label class="col-lg-2 col-xs-2 control-label" style="color: #fff">To</label>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <p class="input-group">
                            <input type="text" 
                                   class="form-control" 
                                   datetime-picker="yyyy-MM-dd"
                                   ng-model="ctrl.picker5.date"
                                   is-open="ctrl.picker5.open" 
                                   enable-time="false" 
                                   datepicker-options="ctrl.picker5.datepickerOptions" 
                                   myformat
                                   />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </p>
                    </div>
                </div>

这里是控制器

  //date picker
    var that = this;

 // date picker


 // min date picker
    this.picker4 = {
        date: new Date(),
        datepickerOptions: {
            showWeeks: true,
            startingDay: 1,
            maxDate: null
        }
    };

 // max date picker
    this.picker5 = {
        date: new Date(),
        datepickerOptions: {
            showWeeks: true,
            startingDay: 1,
            minDate: null
        }
    };
    /*
     // set date for max picker, 10 days in future
     this.picker5.date.setDate(this.picker5.date.getDate() + 10);

     */

 // when closed picker
    this.picker13 = {
        date: new Date(),
        closed: function (args) {
            that.closedArgs = args;
        }
    };



    this.openCalendar = function (e, picker) {
        that[picker].open = true;
    };
// watch min and max dates to calculate difference
    var unwatchMinMaxValues = $scope.$watch(function () {
        return [that.picker4, that.picker5, that.picker10, that.picker11];
    }, function () {
 // min max dates
        that.picker4.datepickerOptions.maxDate = that.picker5.date;
        that.picker5.datepickerOptions.minDate = that.picker4.date;
        if (that.picker4.date && that.picker5.date) {
            var diff = that.picker4.date - that.picker5.date;
            that.dayRange = Math.round(Math.abs(diff / (1000 * 60 * 60 *         24)))
        } else {
            that.dayRange = 'n/a';
        }


    }, true);


 // destroy watcher
    $scope.$on('$destroy', function () {
        unwatchMinMaxValues();
    });

Answer 1

如果您使用日期范围，最好使用 daterangepicker (http://www.daterangepicker.com/)。这将避免为开始日期和结束日期编写验证代码的麻烦。如果您选择开始日期，您将只能在开始日期之后选择结束日期。无需编写验证码。

Answer 2

这里是简单的解决方案。我们需要从控制器中删除它

 that.picker4.datepickerOptions.maxDate = that.picker5.date;

一切正常。现在我不需要启用结束日期，因为这是有效的解决方案。但是从我第一个问题的代码中，我需要显示日期范围。我编写代码但我认为，因为我更改日期格式，dayRange 无法计算。

 if (that.picker4.date && that.picker5.date) {
        var diff = that.picker4.date - that.picker5.date;
        that.dayRange = Math.round(Math.abs(diff / (1000 * 60 * 60 *         24)))
    } else {
        that.dayRange = 'n/a';
    }

请查看代码。谢谢

Answer 3

我已经使用日期选择器的指令来获取最小开始日期minDate:new Date().getDate+0, 和最大maxDate:new Date().getDate+30 我使用bootstrap-datetimepicker

module.directive('examdatepicker1', function() {
    return function(scope, element, attrs) {
        var currentYear=new Date().getFullYear();
        var finalYear=parseInt(new Date().getFullYear())+1;
        $(element).datepicker({
            dateFormat: 'yy/mm/dd',
            changeYear: true,
            changeMonth: true,
            yearRange: currentYear+":"+finalYear,
            minDate:new Date().getDate+0,
            //maxDate:new Date().getDate+30,
            onClose: function(date){
                //var datearray = date.split("/");
                //var newdate = datearray[1] + '/' + datearray[0] + '/' + datearray[2];
                var selectedDate = new Date(date);
                var msecsInADay = 86400000;
                var minimum = new Date(selectedDate.getTime());
                //var maximum = new Date(selectedDate.getTime() + (30*msecsInADay));
                $("#end_exam_date").datepicker( "option", "minDate", minimum );
            }
        });
        return false;
    }
});

对于第二个日期选择器

module.directive('examdatepicker2', function() {
    return function(scope, element, attrs) {
        var currentYear=new Date().getFullYear();
        var finalYear=parseInt(new Date().getFullYear())+1;
        $(element).datepicker({
            dateFormat: 'yy/mm/dd',
            changeYear: true,
            changeMonth: true,
            yearRange: currentYear+":"+finalYear
        });
        return false;
    }
});

在 HTML 中

<input class="form-control bg-color-white" id="end_exam_date" name='end_exam_date' ng-model="end_exam_date" class="form-control" examdatepicker1 readonly required>