如何使用AngularJs仅启用当前月份日期

时间:2019-02-25 17:17:48

标签: angularjs angular-ui-datepicker

当当前月份的日期显示在日历中时,我想禁用上个月的日期和下个月的日期。我可以做到

HTML

 <div class='input-group date' id='datetimepicker1' ng-click="open1()">
      <input type="text" class="form-control" id="ReviewStartDate" name="ReviewStartDate" uib-datepicker-popup="{{format}}" ng-model="vm.product.ReviewStartDate" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <span class="input-group-btn">
      <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
 </div>

我能够在每个预期的星期中禁用,但不能禁用上个月和下个月的日子。我仅当前月份的预期输出已启用,其他日期已禁用。

AngularJs代码

 //================================DateTime Picker Start========================================================

    $scope.today = function () {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.clear = function () {
        $scope.dt = null;
    };

    $scope.inlineOptions = {
        //customClass: getDayClass,
        minDate: new Date(),
        showWeeks: true
    };

    $scope.dateOptions = {
        dateDisabled: disabled,
        formatYear: 'yy',
        maxDate: new Date(2050, 5, 22),
        minDate: new Date(),
        startingDay: 1
    };

    // Disable weekend selection
    function disabled(data) {
        var date = data.date,
            mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
    }

    $scope.toggleMin = function () {
        $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
        $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
    };

    $scope.toggleMin();

    $scope.open1 = function () {
        $scope.popup1.opened = true;
    };
    $scope.open2 = function () {
        $scope.popup2.opened = true;
    };

    $scope.setDate = function (year, month, day) {
        $scope.dt = new Date(year, month, day);
    };

    //$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = 'dd-MMMM-yyyy';
    $scope.altInputFormats = ['M!/d!/yyyy'];

    $scope.popup1 = {
        opened: false
    };
    $scope.popup2 = {
        opened: false
    };


    //================================DateTime Picker End========================================================

输出 enter image description here

我想要这样 enter image description here 如何实现此输出

0 个答案:

没有答案