Popup Calendar 1.2 - DHTML Lab | 4

Pop-up Calendar 1.2
Separate text inputs

When using separate text inputs, the value of the date_format attribute still kicks in, but with the following differences:

Here are some examples:

1. Delimiter Parsing

Any delimiters you may have specified are ignored, as they only make sense in a single date display.

Single:

Date:

<dlcalendar click_element_id="img_flightdeparture1" input_element_id="input_flightdeparture1"><xmp class="date"> date_format="MM-/-dd-/-yy" tool_tip="Click to choose flight departure date">

Separate:

Month: Date: Year:

<dlcalendar click_element_id="img_flightdeparture2" input_element_id_month="input_flightdeparture2month" input_element_id_date="input_flightdeparture2date" input_element_id_year="input_flightdeparture2year"><xmp class="date"> date_format="MM-/-dd-/-yy" tool_tip="Click to choose flight departure date">

Date Component Order

Again, the order of the month, date and year definitions are only meaningful in a single date display. When using separate inputs, the order in which the date components are displayed is the order in which your HTML includes the input elements in the page.

Single:

A DHTML Lab Popup Calendar with three ( month/date/year ) associated text inputs, generated by an image click: ( dlcalendar1.2 )

Date:

<dlcalendar click_element_id="img_flightdeparture3" input_element_id="input_flightdeparture3"><xmp class="date"> date_format="yyyy / MMM / dd" tool_tip="Click to choose flight departure date">

Separate:

Month: Date: Year:

<dlcalendar click_element_id="img_flightdeparture4" input_element_id_month="input_flightdeparture4month" input_element_id_date="input_flightdeparture4date" input_element_id_year="input_flightdeparture4year"><xmp class="date"> date_format="yyyy / MMM / dd" tool_tip="Click to choose flight departure date">

Unused Date Component

If the date_format includes a definition for a date component without a corresponding input, the script simply discards it. In the following example, there is no input available to display the date ( dd ); only the month ( mm ) and year ( yyyy ) components are used.

Single:

Date:

<dlcalendar click_element_id="img_flightdeparture5" input_element_id="input_flightdeparture5"><xmp class="date"> date_format="mm dd yyyy" tool_tip="Click to choose flight departure date">

Separate:

Month: Year:

<dlcalendar click_element_id="img_flightdeparture6" input_element_id_month="input_flightdeparture6month" input_element_id_year="input_flightdeparture6year"><xmp class="date"> date_format="mm dd yyyy" tool_tip="Click to choose flight departure date">

There are a couple of additional things you need to consider when using separate <select>lists.

Send a comment or suggestion to Peter Belesis

Created: October 20, 2004
Revised: October 20, 2004

URL: http://webreference.com/dhtml/column71/4.html