Я использую плагин Datepicker из jQuery UI. Я хочу, чтобы иметь возможность проверить, есть ли входное текстовое поле, к которому он присоединен, в настоящее время имеет действительную дату или нет.
Например:
Если кто-то решит ввести 02/30/2010, я хотел бы как-то спросить плагин, если это текущее входное значение является допустимой датой (что в этом случае не так).
Кто-нибудь знает, как это можно сделать?
Вы можете решить свою проблему, сделав текстовое поле только для чтения и задав формат даты по своему усмотрению. Таким образом, пользователь не может вводить что-либо в текстовое поле, пользователь выбирает только правильный формат даты (который вы установили) из набора даты. См. Приведенный ниже пример.
<p>Date: <input type="text" id="datepicker" size="30" readonly="readonly"/></p>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat",'yy-mm-dd');
});
</script>
Хотя этому вопросу почти два года, я недавно рассмотрел аналогичное решение и обнаружил, что библиотека Globalize - лучшая подход. Например, предположим, что у вас есть текстовое поле, к которому привязано датпикер jQueryUI. Когда фокус потерян в текстовом поле, вы можете использовать функцию глобализации для проверки введенной даты. В этом случае текстовое поле пуст, если дата недействительна или помещена в стандартный формат, если дата действительна:
$('#myDateTextBox').blur(function () {
var parsedDate = Globalize.parseDate($(this).val());
if (parsedDate == null) {
$(this).val('');
}
else {
$(this).val(Globalize.format(parsedDate, 'd'));
}
Библиотека Globalize позволяет вам указать культуру (в идеале, используя язык запроса), чтобы пользователь мог ввести дату в формате для своей культуры.
Это очень легко
let value = $(this).val();
let format = $(this).datepicker('option', 'dateFormat');
let valueIsValid = false;
try {
$.datepicker.parseDate(format, value);
valueIsValid = true;
}
catch (e) {}
Посмотрите параметры dateFormat и constrainInput для datepicker. http://jqueryui.com/demos/datepicker/#option-dateFormat
Я добавил метод "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",
}
});
ИЗМЕНИТЬ Я, должно быть, получил это отсюда: JQuery datepicker: дата подтверждения mm/dd/yyyy
Можно использовать JS Date для проверки вашей даты String.
var myDate = new Date(userInputString);
if (myDate == "Invalid Date"){
// user input is invalid
}
Также обратите внимание, что (myDate === "Invalid Date") возвращает false даже для недопустимых дат. Использование == отлично работает, но правильный способ проверки - (isNaN( d.getTime()))