Использовать начальную дату для <cfinput type = "datefield"> в ColdFusion
Я использую <cfinput type="datefield"> и мне нужно ограничить даты, которые можно выбрать. Я не могу позволить дату, которая может быть выбрана в прошлом. Любая помощь здесь?
Спасибо!
8 ответов
Ну, у вас есть два варианта: проверять его строго на стороне сервера или дополнительно добавлять проверку JavaScript на стороне клиента.
Для серверной части ваша страница обработки cfm может использовать функцию DateCompare следующим образом:
<cfif DateCompare(Date1,Date2) EQUAL -1>
<!--- Date 1 < Date 2 --->
<cfelseif DateCompare(Date1,Date2) EQUAL 0>
<!--- Date 1 = Date 2 --->
<cfelseif DateCompare(Date1,Date2) EQUAL 1>
<!--- Date 1 > Date 2 --->
</cfif>
Документация и пример кода доступны для этой функции по адресу: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=functions_m-r_11.html
В другом посте предлагалось использовать функциональность диапазона, однако мне не удалось заставить это работать, потому что в документации Adobe сказано, что она поддерживается только для числовых типов.
В качестве альтернативы вы можете использовать javascript, чтобы проверить, находится ли дата в пределах диапазона в реальном времени на странице:
<html>
<head>
<script type="text/javascript">
function withinRange(submittedDate) {
var start = Date.parse("08/10/2009");
var end = Date.parse("09/11/2009");
var userDate = Date.parse(document.getElementById('leaveDate').value);
var previousDate = document.getElementById('calendarWorkaround').value;
if (!isNaN(userDate) && ( previousDate != userDate)) {
document.getElementById('calendarWorkaround').value = userDate;
if (start <= userDate && end >= userDate) {
alert("Your date is correct!");
} else {
alert("Date is incorrect.");
}
}
}
</script>
</head>
<body>
<cfform name="testing" id="vacationForm"action="testprocess">
<cfinput name="date" type="datefield" id="leaveDate">
<input type="hidden" name="workaround" id="calendarWorkaround" value="-1">
</cfform>
<!--- To get around onChange bug with cfinput type datefield --->
<cfajaxproxy bind="javaScript:withinRange({leaveDate})">
</body>
</html>
Теперь я бы использовал атрибут onChange для cfinput в поле даты, однако есть ошибка, заключающаяся в том, что он не вызывает функцию javascript, которая, как представляется, документирована на нескольких других страницах в Интернете. Обходной путь, который я использовал, был вызов cfajaxproxy с атрибутом bind. Если вы используете cfeclipse, он выдаст ошибку, что синтаксис неправильный, однако он работал нормально для меня.
Скрытый тип ввода необходим, потому что с тегом cfajaxproxy каждый раз, когда вы нажимаете значок календаря, он вызывает функцию javascript, а это не то, что нам нужно. Поэтому я сохраняю последнее значение, выбранное пользователем (или -1 при загрузке страницы), чтобы JavaScript, чтобы проверить, находится ли он в пределах диапазона, выполняется только при изменении значения. Это немного взломать, однако реализация <cfinput type="datefield"> не работает как задокументировано.
Вы также можете изменить этот пример так, чтобы Coldfusion Dynamic генерировал дату начала и дату окончания, чтобы он не был жестко запрограммирован.
Просто помните, что какой бы путь вы ни выбрали, вы всегда должны проверять сторону сервера значений на тот случай, если у пользователя отключен JavaScript.
Попробуй это:
Три поля даты.
Один скрыт высотой = 0. Это ваша отправная точка. Я использовал сегодня плюс один, чтобы пользователь мог выбрать сегодня в поле "Дата запроса".
<cfformgroup type="horizontal" height="0">
<cfinput type="datefield" name="firstAvailableDate" value="#dateAdd('d', +1,now())#"
</cfformgroup>
Запрашиваемая дата будет только сегодня или раньше.
<cfformgroup type="horizontal">
<cfinput type="datefield" name="request_date" id="request_date" mask="mm/dd/yyyy" width="100" label=”Date Requested” onFocus="request_date.disabledRanges=[{rangeStart:firstAvailableDate.selectedDate}];" />
Срок оплаты может быть только после выбранной даты.
<cfinput type="datefield" name="datedue" id="datedue" mask="mm/dd/yyyy" width="100" label=”Due Date” onFocus="datedue.disabledRanges=[{rangeEnd:request_date.selectedDate}];" />
</cfformgroup type="horizontal" >
AFAIK, нет простого способа помешать клиенту выбрать день в прошлом. Однако в некоторых наших формах у нас есть такие поля, которые мы сверяем с текущей датой на стороне сервера. Просто не забудьте сгенерировать дату без времени для сравнения, или вы получите [сегодняшняя дата] <сейчас ().
Я только что добавил 100 лет к атрибуту endrange для компонента cfcalendar, думая, что никто не будет сидеть и пробираться так далеко, чтобы пройти проверку:
<cfset startRange = #dateformat(now(), 'dd/mm/yyyy')# >
<cfset endRange = dateadd("yyyy", 100, #Now()#)>
<cfset selectedDate = dateadd("d", -1, #Now()#)>
<cfcalendar name="start_period" mask="dd/mm/yyyy" selecteddate="#selectedDate#" startRange="#startRange#" endrange="#endRange#">
Саймон.
В результате экспериментов я смог настроить поддерживающие файлы javascript для ограничения выбираемых дат. Однако опция jQuery звучит также хорошо.
Вы не можете ограничить поле даты датами, которые можно выбрать. У CFINPUT нет атрибута для определения этого типа правила. Вы должны пойти на Jquery DatePicker. Если вы хотите использовать cfinput, вы можете обойти это.
<script language="JavaScript">
$(function() {
$( "#date" ).datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(1939, 10 - 1, 25),
maxDate: '-1D'
});
});
</script>
<cfinput name="date" type="text" size="30" id="date" >
Сначала я подумал <cfcalendar> поможет, но кажется, что startrage а также endrange для отключенного диапазона.
Я думаю, если вы действительно хотите ограничить диапазон, используйте что-то еще, как http://docs.jquery.com/UI/Datepicker
Вам также следует использовать проверку на стороне сервера, но я считаю, что вы можете использовать атрибут range в cfinput, чтобы ограничить допустимые даты.