JQuery DatePicker, чтобы предотвратить прошлую дату

73

Как отключить прошлые даты в jQuery datepicker? Я искал варианты, но, похоже, не нашел ничего, что указывает на возможность отключения прошлых дат.

ОБНОВЛЕНИЕ: Спасибо за быстрый ответ. Я попробовал это без везения. Дни по-прежнему не были выделены серым цветом, как я ожидал, и по-прежнему принимаю выбранную прошлую дату.

Я пробовал это:

$('#datepicker').datepicker({ minDate: '0' });

Не работает.

Я пробовал это:

$('#datepicker').datepicker({ minDate: new Date() });

Все еще не работает.

Он отображает виджет календаря просто отлично. Он просто не будет седым или предотвратит ввод прошлых дней. Я попытался использовать minDate и maxDate в прошлом, и мне не повезло, поэтому я решил, что это не они.

Теги:
date
datepicker

14 ответов

141

Попробуйте следующее:

$("#datepicker").datepicker({ minDate: 0 });

Удалите кавычки из 0.

  • 0
    Это работало отлично!
  • 0
    Это должен быть принятый ответ.
Показать ещё 2 комментария
34

Вам просто нужно указать минимальную дату - установка ее на 0 означает, что минимальная дата составляет 0 дней с сегодняшнего дня, то есть сегодня. Вместо этого вы можете передать строку '0d' (единица по умолчанию - дни).

$(function () {
    $('#date').datepicker({ minDate: 0 });
});
23

Удалите кавычки, окружающие 0, и он будет работать.

Фрагмент рабочего кода:

// set minDate to 0 for today date
$('#datepicker').datepicker({ minDate: 0 });
body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}
<!-- load jQuery and jQuery UI -->
<script src="/jquery.min.js"></script>
<script src="/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />
  • 1
    Любое объяснение, почему нужна запятая? Я могу удалить его, и все по-прежнему функционирует должным образом. Есть ли какой-нибудь браузер, который требует запятую для одного объекта свойства?
  • 0
    Запятые требуются только в том случае, если вы используете несколько параметров, например, $('#datepicker').datepicker({ minDate: 0, maxDate: "+1M +10D", dateFormat: 'yy-mm-dd' }); Вам не нужна запятая после последнего варианта
Показать ещё 2 комментария
21

Если вы имеете дело с ранее связанным выбором даты, то установите

$("#datepicker").datepicker({ minDate: 0 });

не будет работать. Этот синтаксис применим только при создании виджета.

Чтобы установить минимальную дату для связанного выбора даты, используйте следующее:

$("#datePicker").datepicker("option", "minDate", 0);
  • 1
    спасибо за это ранее связанное решение
  • 1
    Спасибо. Я потратил много времени, чтобы найти это решение, и это решило мою проблему.
14

Используйте параметр minDate, чтобы установить минимально возможную дату. http://jqueryui.com/demos/datepicker/#option-minDate

  • 2
    +1: я использовал minDate и maxDate, чтобы установить допустимый интервал дат, и он работает как шарм.
10

Дайте ноль для разговора, и он отключит прошедшие даты.

$( "#datepicker" ).datepicker({ minDate: 0});

Живой пример

подробнее здесь

9

Это работает:

$("#datepicker").datepicker({ minDate: +0 });
  • 0
    Это решение действительно работает!
7

//отключить будущие даты

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        }); 

//отключить прошлые даты

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });
  • 0
    Я не уверен, почему этот ответ получил отрицательный голос, потому что его решение работало для меня, тогда как принятое решение, использующее 0 вызвало ошибку JavaScript. +1
5

$("#datePicker").datePicker({startDate: new Date() });. Это работает для меня

2

Я использую следующий код для форматирования даты и показываю 2 месяца в календаре...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            var option = this.id == "from" ? "minDate" : "maxDate",


                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

Проблема заключается в том, что я не уверен, как ограничить выбор предыдущих дат.

1
var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

Попробуйте это. Если любая ошибка, пожалуйста, исправьте меня:) Спасибо всем.

1

Убедитесь, что вы поместили несколько свойств в одну строку (поскольку вы указали только одну строку кода, возможно, у вас была та же проблема).

Mine установила дату по умолчанию, но не села из старых дат. Это не работает:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

Это делает следующее:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 и +1 работают одинаково (или 0 и +0 в вашем случае).

Me: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

0

Я использовал атрибут min: min="' + (new Date()).toISOString().substring(0,10) + '"

Вот мой код, и он сработал.

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

Изображение 7735

0

Попробуйте установить startDate на текущую дату. Например:

$('.date-pick').datePicker({startDate:'01/01/1996'});
  • 0
    Похоже, что это для выбора даты Кевина Лака, а не стандартный JQuery один

Ещё вопросы

Сообщество Overcoder
Наверх
Меню