The JSAction framework allows you to connect a HTML input element with a JavaScript date validation very easy. Therefore you just define a special CSS class in the HTML Code and automatically a realtime validation will be registered for the input element. The code remains absolutly valid.
The CSS class date indicate a input element as date field. You can additional define the element as a required field with required.
<input type="text" name="date1" class="date" />
<input type="text" name="date2" class="date required" />
The following fields check the input in realtime on keystroke (onkeyup) and/or when the focus is lost (onblur). The input can be done with or without separator characters, in the second case the date will be automatically formated when the input field looses its focus.
Date 1:
Date 2: (required)
The layout of the input fields is defined global with CSS selectors.
.date { width:80px }
.required { background-color:rgb(255,255,174) }
You can set the date format country-specific for international applications. As well the order of day, month and year, as the date separator are freely selectable. The error message is individual changeable in an suitable language too.
HpResource.datePattern = 'dd-MM-yyyy';
HpResource.dateSeparator = '-';
HpResource.errorDate = 'Not a valid date!';
You can easily overwrite the default date format with an individual format for a special input field.
class="date dd" (only day)
class="date MM" (only month)
class="date yyyy" (only year)
class="date ddMM" (day and month)
class="date MMyyyy" (month and year)
Author: Johannes HammoudComments Date: 04.11.2009