Отключить прошлое Время угловой бутстрап datetimepicker

Question

Я использую угловой бутстрап datetimepicker. Я хочу сделать $dates.selectable = false на прошлые даты и время.

Как я могу это сделать?

Пожалуйста, дайте мне знать, если вам нужен пример кода.

Answer 1

Как вы можете видеть на своем сайте (https://angular-ui.github.io/bootstrap/#/datepicker) вы можете пройти через объект конфигурации с «dateDisabled»

Это HTML примера:.

<style> 
    .full button span { 
    background-color: limegreen; 
    border-radius: 32px; 
    color: black; 
    } 
    .partially button span { 
    background-color: orange; 
    border-radius: 32px; 
    color: black; 
    } 
</style> 
<div ng-controller="DatepickerDemoCtrl"> 
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> 

    <h4>Inline</h4> 
    <div style="display:inline-block; min-height:290px;"> 
     <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker> 
    </div> 

    <h4>Popup</h4> 
    <div class="row"> 
     <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" 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" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p> 
     </div> 

     <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
     <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select> 
     </div> 
    </div> 

    <hr /> 
    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button> 
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button> 
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button> 
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button> 
</div> 

И это JavaScript:

angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 
    $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(2020, 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 = $scope.formats[0]; 
    $scope.altInputFormats = ['M!/d!/yyyy']; 

    $scope.popup1 = { 
    opened: false 
    }; 

    $scope.popup2 = { 
    opened: false 
    }; 

    var tomorrow = new Date(); 
    tomorrow.setDate(tomorrow.getDate() + 1); 
    var afterTomorrow = new Date(); 
    afterTomorrow.setDate(tomorrow.getDate() + 1); 
    $scope.events = [ 
    { 
     date: tomorrow, 
     status: 'full' 
    }, 
    { 
     date: afterTomorrow, 
     status: 'partially' 
    } 
    ]; 

    function getDayClass(data) { 
    var date = data.date, 
     mode = data.mode; 
    if (mode === 'day') { 
     var dayToCheck = new Date(date).setHours(0,0,0,0); 

     for (var i = 0; i < $scope.events.length; i++) { 
     var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); 

     if (dayToCheck === currentDay) { 
      return $scope.events[i].status; 
     } 
     } 
    } 

    return ''; 
    } 
}); 

Обратите внимание на эту строку:

dateDisabled: disabled, 

Передав это в свой объект конфигурации, вы установили функцию отключенной в качестве обработчика для отключения дат. Таким образом, после нескольких строк вы можете прочитать отключенную функцию:

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

двух параметров функции являются:

• Дата
• режим
Дата

нормальная дата JavaScript объект, и для этого вы можете использовать все date methods.

режим - это режим даты, как вы можете видеть в этом примере, вы проверяете, равен ли режим «день».

Таким образом, вы можете просто отключить диапазон дат или пользовательских дней.

Answer 2

Я предполагаю, что вы используете angular-bootstrap-datetimepicker, поэтому вам нужно использовать before-render callback.

Код будет выглядеть примерно так:

function BeforeRender ($dates) { 
    var activeDate = moment(); 

    $dates.filter(function (date) { 
    return date.localDateValue() >= activeDate.valueOf() 
    }).forEach(function (date) { 
    date.selectable = false; 
    }) 
} 

Ознакомительном имеет example of a date range picker, что делает то, что вы хотите.

Answer 3

Вы можете попробовать вставить

startDate:"-0m", 

этот код отключить все даты в прошлом, что становится не clickables.