jquery datepicker: проверить текущее значение ввода?

Question

Я использую плагин Datepicker из jQuery UI.Я хочу иметь возможность проверить, имеет ли текстовое поле ввода, к которому оно прикреплено, действительную дату или нет.

Например:

Если кто-то решит набрать 02/30/2010, я быхотелось бы как-то спросить плагин, является ли текущее входное значение действительной датой (которой в данном случае не является).

Кто-нибудь знает, как это можно сделать?

Answer 1

Вы можете решить свою проблему, сделав текстовое поле доступным только для чтения, и установите желаемый формат даты.Таким образом, пользователь не может ничего вводить в текстовом поле, пользователь только выбирает правильный формат даты (который вы установили) из палитры.Пожалуйста, смотрите ниже пример.

<p>Date: <input type="text" id="datepicker" size="30" readonly="readonly"/></p>    
<script>
$(function() {
    $( "#datepicker" ).datepicker();
    $( "#datepicker" ).datepicker( "option", "dateFormat",'yy-mm-dd');
});
</script>

Answer 2

Это очень просто

let value = $(this).val();
let format = $(this).datepicker('option', 'dateFormat');
let valueIsValid = false;
try {
    $.datepicker.parseDate(format, value);
    valueIsValid = true;
}
catch (e) {}

Answer 3

Хотя этому вопросу уже почти два года, я недавно имел дело с подобным решением и обнаружил, что библиотека Globalize является лучшим подходом. Например, предположим, что у вас есть текстовое поле, к которому прикреплен указатель даты jQueryUI. Когда фокус теряется на текстовом поле, вы можете использовать Globalize для проверки введенной даты. В этом случае текстовое поле будет пустым, если дата недействительна, или переведено в стандартный формат, если дата действительна:

$('#myDateTextBox').blur(function () {
    var parsedDate = Globalize.parseDate($(this).val());
    if (parsedDate == null) {
        $(this).val('');
    } 
    else {
        $(this).val(Globalize.format(parsedDate, 'd'));
    }

Библиотека Globalize позволяет вам указать культуру (в идеале, используя язык запроса), чтобы пользователь мог ввести дату в формате для своей культуры.

Answer 4

Можно использовать JS Date для проверки вашей даты Строка.

var myDate = new Date(userInputString);

if (myDate == "Invalid Date"){
 // user input is invalid
}

Также обратите внимание, что (myDate === "Invalid Date") возвращает false даже для недопустимых дат. Использование == работает нормально, однако правильный способ проверки - (isNaN( d.getTime()))

Answer 5

Я добавил метод "truedate" в валидатор.Я бы хотел отметить тот код, который у меня есть, но я не помню, где я его нашел.

$.validator.addMethod("truedate", function (value) {
        function GetFullYear(year) {
            var twoDigitCutoffYear = 10 % 100;
            var cutoffYearCentury = 10 - twoDigitCutoffYear;
            return ((year > twoDigitCutoffYear) ? (cutoffYearCentury - 100 + year) : (cutoffYearCentury + year));
        }

    if (value == null || value == '')
        return true;
    var yearFirstExp = new RegExp("^\\s*((\\d{4})|(\\d{2}))([-/]|\\. ?)(\\d{1,2})\\4(\\d{1,2})\\.?\\s*$");
    try {
        m = value.match(yearFirstExp);
        var day, month, year;
        if (m != null && (m[2].length == 4)) {
            day = m[6];
            month = m[5];
            year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3]));
        }
        else {
            var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-/]|\\. ?)(\\d{1,2})(?:\\s|\\2)((\\d{4})|(\\d{2}))(?:\\s\u0433\\.)?\\s*$");
            m = value.match(yearLastExp);
            if (m == null) {
                return null;
            }
            day = m[3];
            month = m[1];
            year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6]));
        }
        month -= 1;
        var date = new Date(year, month, day);
        if (year < 100) {
            date.setFullYear(year);
        }
        return (typeof (date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()) ? date.valueOf() : null;
    }
    catch (err) {
        return null;
    }
}, "Please enter an actual date.");

$('form').validate({
                rules: {
                    insurance_GL: "truedate",
                },
                messages: {
                    insurance_GL: "Insurance GL date is not valid",
                }
});

РЕДАКТИРОВАТЬ Я, должно быть, получил его отсюда: JqueryDatePicker: подтвердить дату мм / дд / гггг

Answer 6

Посмотрите на опции dateFormat и constrainInput средства выбора даты.http://jqueryui.com/demos/datepicker/#option-dateFormat