DHTML Lab Popup Calendar Example Page | WebReference

DHTML Lab Popup Calendar Example Page

This page is a showcase of various possible incarnations of the DHTML Lab Popup Calendar.

You can use it as a cut-and-paste source to build on for your own implementations.

Click [ View Source ] under each example to see the HTML used for the example.


  1. A DHTML Lab Popup Calendar without an associated text input and generated by an image click:

    calendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture"/>
  2. A DHTML Lab Popup Calendar with an associated text input, a mouseover tooltip and generated by an image click:

    calendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture1" input_element_id="input_flightdeparture1" tool_tip="Click to choose flight departure date"/>
  3. A DHTML Lab Popup Calendar with an associated text input, a mouseover tooltip, generated by an image click, and with Clear Date facility:   ( dlcalendar1.1 )

    calendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture6" emptydate_option="true" hide_onselection="false" input_element_id="input_flightdeparture6" tool_tip="Click to choose flight departure date"/>
  4. A DHTML Lab Popup Calendar with an associated readonly text input, a mouseover tooltip, generated by an image click, and with Clear Date facility:   ( dlcalendar1.1 )

    calendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture7" emptydate_option="true" hide_onselection="false" emptydate_style="background-color: yellow; color:black; font-style:italic;" input_element_id="input_flightdeparture7" tool_tip="Click to choose flight departure date"/>
  5. A DHTML Lab Popup Calendar with an associated readonly text input, a mouseover tooltip, generated by a click on the text input itself, and with Clear Date facility:   ( dlcalendar1.1 )

    [ View Source ]

    <dlcalendar click_element_id="input_flightdeparture15" emptydate_option="true" hide_onselection="false" emptydate_style="background-color: yellow; color:black; font-style:italic;" input_element_id="input_flightdeparture15" tool_tip="Click to choose flight departure date"/>
  6. A DHTML Lab Popup Calendar with an associated text input, a mouseover tooltip and generated from a text element click:

    Choose Date

    [ View Source ]

    <dlcalendar click_element_id="text_flightdeparture2" input_element_id="input_flightdeparture2" tool_tip="Click to choose flight departure date"/>
  7. A DHTML Lab Popup Calendar with an associated text input, a mouseover tooltip, limit dates, and generated by an image click:

    calendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture3" input_element_id="input_flightdeparture3" tool_tip="Click to choose flight departure date" start_date="2004,7,30" end_date="2004,11,5"/>
  8. Two DHTML Lab Popup Calendars, in two different languages, sharing an associated text input, with mouseover tooltips and generated by an image click:

    calendarcalendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture_en" input_element_id="input_flightdeparture4" tool_tip="English Calendar" firstday="Su"/><dlcalendar click_element_id="img_flightdeparture_es" input_element_id="input_flightdeparture4" tool_tip="Calendario Espa&#xC3;&#xB1;ol" months="ene,feb,mar,abr,may,jun,jul,ago,sep,oct,nov,dic" days="do,lu,ma,mi,ju,vi,sa" firstday="lu"/>
  9. A DHTML Lab Popup Calendar with an associated text input, generated by an image click, and almost all possible attributes given custom values:

    calendar

    [ View Source ]

    <dlcalendar click_element_id="img_flightdeparture5" input_element_id="input_flightdeparture5" tool_tip="Click to choose flight departure date" start_date="2003,7,30" end_date="2005-11-5" months="01,02,03,04,05,06,07,08,09,10,11,12" days="S,M,T,W,T,F,S" firstday="M" date_format="mm~dd~yy" root_date="2004-04-1" navbar_style="background-color: yellow; color:black;" daybar_style="background-color: black; font-family: Courier; color:white;" selecteddate_style="background-color: yellow; font-family: serif; font-style:italics; color:black; border-width:0px;" weekenddate_style="background-color: blue; font-family: serif; color:red; border-width:0px;" regulardate_style="background-color: red; font-family: serif; color:blue; border-width:0px;" othermonthdate_style="background-color: lightgrey; border-width:0px;" use_webdings="false" nav_images="dlcalendar_prevyear_black.gif,dlcalendar_prevmonth_black.gif,dlcalendar_nextmonth_black.gif,dlcalendar_nextyear_black.gif" hide_selects="true" hide_onselection="false" emptydate_option="true" emptydate_style="background-color: pink; color:black; font-style:italic;" emptydate_text="Reset Date" callfunction_onselection="myCustomFunction"/>
  10. A DHTML Lab Popup Calendar with three ( month/date/year ) associated text inputs, generated by an image click:   ( dlcalendar1.2 )

    Month: Date: Year: calendar

    [ View Source ]

    <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"/>
  11. A DHTML Lab Popup Calendar with two ( month/year ) associated text inputs, generated by an image click:   ( dlcalendar1.2 )

    Month: Year: calendar

    [ View Source ]

    <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"/>
  12. A DHTML Lab Popup Calendar with two ( month/date ) associated text inputs, generated by an image click:   ( dlcalendar1.2 )

    Month: Date: calendar

    [ View Source ]

    <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"/>
  13. A DHTML Lab Popup Calendar with three ( month/date/year ) associated <select> elements, generated by an image click:   ( dlcalendar1.2 )

    Month: Date: Year: calendar

    [ View Source ]

    <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"/>
  14. A DHTML Lab Popup Calendar with three ( month/date/year ) associated <select> elements, generated by an image click:   ( dlcalendar1.2 )

    calendar

    [ View Source ]

    <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"/>
  15. A DHTML Lab Popup Calendar with two ( month/year ) associated <select> elements, generated by an image click:   ( dlcalendar1.2 )

    Month: Year: calendar

    [ View Source ]

    <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"/>
  16. A DHTML Lab Popup Calendar with two associated <select> elements, and one text input, generated by an image click:   ( dlcalendar1.2 )

    Month: Date: Year: calendar

    [ View Source ]

    <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"/>

Justtechjobs.comFind a programming school near you






Online Campus Both