Отображать только одну дату месяца при выборе даты начала в DatePicker - PullRequest
Новая
       10

Отображать только одну дату месяца при выборе даты начала в DatePicker

0 голосов
/ 16 февраля 2019

У меня проблема в моем проекте.Я хочу, чтобы при выборе даты начала отображалась только одна месячная дата. Скажем, я выбираю 1 февраля, тогда конечной датой будет 28 февраля, Пользователь не может выбрать более 28 февраля, но не знаю, как это сделать.Вот мой код: 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

$("#checkin").datepicker({
    format: 'yyyy-mm-dd',
    todayHighlight: true,
    autoclose: true
})
.on('changeDate', function(ev){
    $("#checkout").datepicker({
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true,
        minDate: ev.date.setDate(ev.date + 30)
    });
});

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Если вы используете jQuery UI Datepicker, то этот код должен работать нормально: 

$("#checkin").datepicker({
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true,
        onSelect: function(ev) {
            var fromDate = $('#checkin').datepicker("getDate");
            var rangemindate = new Date(fromDate.getFullYear(), fromDate.getMonth(),fromDate.getDate() + 1);
            var rangemaxdate = new Date(fromDate.getFullYear(), fromDate.getMonth(),fromDate.getDate() + 30); 
            $("#checkout").datepicker({
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                autoclose: true,
                minDate: rangemindate,
                maxDate: rangemaxdate
            });
        }
    });

Надеюсь, он вам поможет.

0 голосов
/ 16 февраля 2019

Чтобы отключить любой выбор даты за пределами ума и максимума, вы можете использовать: 

$( "#checkin" ).datepicker({ 
    minDate: minDate, 
    maxDate: maxDate 
});

В вашем случае это дата начала и окончания месяца, например: 

var currentTime = new Date();
var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), 1);
var maxDate =  new Date(currentTime.getFullYear(), currentTime.getMonth() + 1, 0);
$( "#checkin" ).datepicker({ 
    minDate: minDate, 
    maxDate: maxDate 
});

Если вы хотитеэто на основе выбора пользователя: 

$("#checkin").datepicker({
    format: 'Y-m-d',
    todayHighlight: true,
    autoclose: true
}).on('changeDate', function(ev){

    var selected = new Date(ev.format());
    var minDate = new Date(selected.getFullYear(), selected.getMonth(), 1);
    var maxDate =  new Date(selected.getFullYear(), selected.getMonth() + 1, 0);
     $('#checkout').datepicker('option', 'minDate', minDate);
     $('#checkout').datepicker('option', 'maxDate', maxDate);
});

Пожалуйста, проверьте этот для получения дополнительной информации.

Проверьте это скрипка Я создал для этого примера.

...