Popup Calendar 1.2 - DHTML Lab | 2


logo

Pop-up Calendar 1.2
Multi-element display examples



This page demonstrates a few of the possible input element combinations that version 1.2 can handle.

The HTML necessary for each example is included immediately following it.

The new attributes for the <dlcalendar> tag are outlined in detail on the next page.

1. Single Text Input   ( dlcalendar1.0 )

calendar

<dlcalendar click_element_id="img_flightdeparture1" input_element_id="input_flightdeparture1" tool_tip="Click to choose flight departure date"/>

2. Three Text Inputs

Month: Date: Year: calendar

<dlcalendar click_element_id="img_flightdeparture8" input_element_id_month="input_flightdeparture8month" input_element_id_date="input_flightdeparture8date" input_element_id_year="input_flightdeparture8year" tool_tip="Click to choose flight departure date"/>

3. Two Text Inputs ( Month / Year )

Month: Year: calendar

<dlcalendar click_element_id="img_flightdeparture9" input_element_id_month="input_flightdeparture9month" input_element_id_year="input_flightdeparture9year" tool_tip="Click to choose flight departure date"/>

4. Two Text Inputs ( Month / Date )

Month: Date: calendar

<dlcalendar click_element_id="img_flightdeparture10" input_element_id_month="input_flightdeparture10month" input_element_id_date="input_flightdeparture10date" tool_tip="Click to choose flight departure date"/>

5. Three Drop-Down Select Inputs

Month: Date: Year: calendar

<dlcalendar click_element_id="img_flightdeparture11" input_element_id_month="select_flightdeparture11month" input_element_id_date="select_flightdeparture11date" input_element_id_year="select_flightdeparture11year" tool_tip="Click to choose flight departure date"/>

6. Three Drop-Down Select Inputs with descriptive option elements

calendar

<dlcalendar click_element_id="img_flightdeparture12" input_element_id_month="select_flightdeparture12month" input_element_id_date="select_flightdeparture12date" input_element_id_year="select_flightdeparture12year" tool_tip="Click to choose flight departure date"/>

7. One Drop-Down Select Input and one List-Box Select Input ( Month / Year )

Month: Year: calendar

<dlcalendar click_element_id="img_flightdeparture13" input_element_id_month="select_flightdeparture13month" input_element_id_year="select_flightdeparture13year" tool_tip="Click to choose flight departure date"/>

8. Two Drop-Down Select Inputs and one Text Input

Month: Date: Year: calendar

<dlcalendar click_element_id="img_flightdeparture14" input_element_id_month="select_flightdeparture14month" input_element_id_date="select_flightdeparture14date" input_element_id_year="input_flightdeparture14year" tool_tip="Click to choose flight departure date"/>

There are three new attributes to facilitate using separate inputs.

Send a comment or suggestion to Peter Belesis

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

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

Justtechjobs.comFind a programming school near you






Online Campus Both