JS DTPicker

Overview

The Date-Time Picker is an very widely used ActiveX control that allows the user to select a particular date from a drop-down calendar. The selected date is shown in a drop-down list box.

fig. The DTPicker Control

DTPicker is an attempt to recreate the same control using pure JavaScript. It aims to provide the functionality of a Calendar control on a Web Page. The typical use of this control would be in HTML forms that are used to collect data which is then posted to the server.

DOWNLOAD NOW (13 KB)

Very often these forms contain date fields like Date of Birth, Current Date, Expiry Date, etc. Presently developers have to use upto three text boxes for accepting the Date, Month and Year followed by a series of validations to check if the date is correctly entered (i.e. whether date is entered as 31 for a month which has only 30 days, whether leap years have been taken into account, etc.).

DTPicker solves all these problems apart from providing a very user-friendly and attractive interface that can accept date inputs from the user.

Features of DTPicker

• As it is written in pure JavaScript, it eliminates the need to download and register any additional controls
• The DTPicker provides an interface exactly identical to the Date-Time Picker control (i.e. a drop-down list box) thereby eliminating the necessity of any validations
• A Web page can contain upto 20 DTPicker controls with each one behaving independently
• The DTPicker control is very easy to use: adding a DTPicker control to your page requires only one line of code
• A rich set of properties are provided to read or set the date as well as the format in which the date should be displayed (e.g. dd/mm/yyyy, mm/dd/yyyy, etc.)
• The value of the date set can be easily read by the server through any of the Server-side technologies (CGI, ASP, JSP, Servlets, etc.)

The DTPicker Control

The DTPicker control is shown below. Note that this is only a screenshot of the actual control.

F.A.Qs

Which browsers support JS DTPicker?
Currently only Internet Explorer supports the DTPicker component.

How can my server script (ASP, JSP, etc.) read the date set by the user?
The DTPicker can be included inside a FORM tag just like any other form element. The second argument passed while creating the component (i.e. cboDtPicker1) specifies the name assigned to the SELECT element in the FORM tag. Its value (when the form is submitted) will contain the selected date in the format set in the DTPicker.

Can I use client-side scripting to read the values set?
Both JavaScript and VBScript can be used to access the DTPicker. It is possible to use the control name (i.e. dtPickerObj) and then set/read the properties using the methods provided. It is also possible to access the SELECT element that the component consists of through the name cboDtPicker1 specified while creating the component.

DOWNLOAD NOW (13 KB)