Jquery datepicker — Запретить отправку формы до выбора даты

#javascript #jquery #jquery-ui #datepicker

#javascript #jquery #jquery-пользовательский интерфейс #datepicker

Вопрос:

Я получил Jquery UI Datepicker, который работает хорошо, но одна важная проблема вызывает у меня серьезные проблемы.Проблема в том, что когда пользователь не выбирает дату из datepicker и отправляет запрос, внешняя служба выдает ошибку, в противном случае все в порядке. Как это предотвратить, отключить кнопку отправки, если дата не выбрана?Есть идеи о том, как это сделать. Я вставил код в JSFIDDLE еще на один вопрос.Как запретить пользователям выбирать дату, предшествующую завтрашней, и устанавливать tomorow в качестве даты по умолчанию thx

Ответ №1:

Взгляните на этот фрагмент кода. Я удалил неважный код и прокомментировал каждую добавленную мной строку. Также обновлен пример jsfiddle.

 //variable to indicate was date selected or not
var dateSelected = false;
$('#date').datepicker({
    onSelect: function(dateText, inst) {
        ...
        //set to true on date selection
        dateSelected = true;
    },
    //minimal date to select (today)
    minDate: new Date( (new Date()).getTime()   3600*24*1000 )
})
... 
//return false when date wasn't selected to prevent submission   
$('form').submit(function(){
    if (!dateSelected) {
        alert('Choose date please');
    }
    return dateSelected;
});
  

Комментарии:

1. Спасибо за ответ, я не пробовал в своем коде, я хочу посмотреть на jsfiddle, но я не вижу никаких обновлений, как вы сказали, в чем проблема. Я довольно новичок в fiddle, может быть, мое false каким-то образом..

2. Отличная работа! Thx.Is можно дать пользователю некоторую подсказку о том, что происходит, какое-нибудь простое всплывающее окно, в котором говорится, что необходимо вставить дату.. Что касается части моего вопроса о минимальной дате для выбора, возможно ли, чтобы это была завтрашняя дата?

3. Я добавил вызов предупреждения к обратному вызову отправки формы. Вы можете заменить его чем-нибудь более навороченным. Также изменен код для minDate, теперь это завтра.

4. извините, мой js слаб, как заменить всплывающее окно alert каким-нибудь css. Дайте мне какую-нибудь подсказку. Css не проблема, просто как подключить его в js

5. у @bjornd проблема с всплывающим предупреждением, оно отображается, если выбрана дата, а если нет