Web form control for date and time input

Short summarize of possibilities date time enter in web form at first. The second part of article introduces example of combined web form element for date and time enter by help of mouse drag&drop.

Pre filled in, well formated form field by default date and time helps user to enter correct date more than empty field. Another way is to use series of select elements, separate ones for day, month, year. Next way is to offer stable, or pop-up calendar and select date by click on legal date in calendar. Application preview Gauging uses both types of date input. "Near" date is selected by click on linear calendar, "far" date by the help of select elements.

Sometime it is enough to specify date and time rounded to integer hour only. In application Quality Reports (form in the middle of screenshot) next to input field for date and time are two buttons for stepping time (and subsequently date) in one hour. Correct data format is provided by server by help of Ajax and so value do not have to be tested in validation script. Input field has attribute readonly and value can be rewritten by script only, not by user.

At retrieve data from database according to date, we do not even need to implement validation of entered date, at error, server may recount defective string to nearest acceptable date. Providing that form invokes database update, entered date have to be validated on client every time.

Following demo of date time input control originates from application for scheduling of taxi itinerary. Date is selected by clicking on linear calendar in upper part, time is setup by mouse drag&drop of time pointer. Date and time can be entered by keyboard typing also and after input field losts its focus (onblur) by hitting tab key or by click outside of input field, script performs validation of entered value and marks day in calendar and set time pointer position.

Note that input control accepts European, continental date and time format, unlike US format. Differences are in order day/month, separators and week starting at monday.

Code sample and description is focused on drag&drop functionality only. Method of date time validation for value which is entered from keyboard is described in article date validation. Slightly modified version of validation is used here. In case of need, inspect source code of this page. Calendar is generated by server and displays actual week plus two following weeks and marks actual day. Time rounded to 5 minutes.


<style type="text/css">
...
#ruler {position: relative; top: 0; left: 0; height: 30px; width: 580px;
        margin: 4px 0 0 0;}
#scale {height: 30px; width: 580px; border: 0; margin: 0;}
#arrow {position: absolute; top: 13px; left: -4px; height: 18px; width: 13px;
        border: 0; z-index: 2;}
</style>

<body onload="keybInput();">
...
<div id="ruler">
<img id="scale" src="scale.png" onmousedown="return false;" alt="">
<img id="arrow" src="arrow.gif" onmousedown="return dragStart(event);" alt="">
</div>
...
<input type="text" class="iC" name="dateTime" id="dateTime"
 value="<%= dateTime %>" onblur ="keybInput()">
...
</div>
...

Scale and arrow (time pointer) pictures are inclosed into container #ruler with set-up position: relative;. Then it is possible to use inside of container position: absolute; which is related to container. Dragged element requires position: absolute; for correct drag&drop operation. The first image #scale makes time tracing, the second image #arrow is that picture on which drag&drop is applied. CSS property left of #arrow element points out the distance from container left side and is used for time evaluation.

Several events are attached to HTML elements (displayed in red). After page loads, function keybInput() is called for correct marking the day in calendar and placing time pointer on the scale. Therefore form input field dateTime has to contain valid date and time when page is loaded. This is ensured by server at HTML code generation.

Event onmousedown="return dragStart(event);" which is attached to element #arrow starts drag&drop mode of this image. Instruction return passes correct value to the event management system. Without that return instruction, drag&drop mode in Firefox does not start, because of slightly distinct event bubbling system.

FireFox (v.2.0.0.7) does not capture event onmouseup when "mouse" is dragged out of the browser window and there mouse button is released. After mouse reentries the browser window, mode drag&drop stays active even with released mouse button. FireFox beta 3 is already o.k.

Opera (v.9.1). If there is not attached event onmousedown="return false;" in element scale, it is possible to draw transparent copy of scale image. After mouse button releasing the copy disappears. Opera also performs something like lost motion. When drag starts, before arrow begins to move, short "blank" movement is necessary.


<script type="text/javascript">
var Xstart, dragOn=false;

function dragStart(event) {
  event = event || window.event;
  Xstart = parseInt(document.getElementById("arrow").offsetLeft)-event.clientX;
  dragOn = true;
  return false;
}
function mouseMove(event) {
  if (dragOn==true) {
    event = event || window.event;
    Xmove = Xstart + event.clientX;
    Xmove = Xmove < -4 ? -4 : Xmove;
    Xmove = Xmove > 571 ? 571 : Xmove;
    document.getElementById("arrow").style.left = Xmove + "px";
    showTime();
    return false;
  }
}
function mouseUp() {
  dragOn = false;
}
function showTime() {
  dt = parseInt((parseInt(document.getElementById("arrow").style.left)+4)/2);
  hours = parseInt(dt/12);
  minutes = 5*(dt - 12*hours);
  if(hours < 10) hours = "0" + hours;
  if(minutes < 10) minutes = "0" + minutes;
  document.getElementById("dateTime").value = dtArray[0] +
 " " + hours + ":" + minutes;
}
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
</script>

Java script code sample supports drag of arrow, displays time digits and attaches rest events from mouse activities. Global variable Xstart saves coordinate X of mouse position when drag started, variable dragOn keeps drag&drop mode.

function dragStart(event)

Function is called when mouse button is depressed over time pointer image. Unification of event source is determined at first because of browsers difference. Next coordinate X where mouse button was pressed is calculated, then active mode of drag&drop is setup.

function mouseMove(event)

Event onMouseMove is attached to entire document at the end of script sample. Function is called at each mouse movement over the page. Effective instructions are executed only when drag mode is active.

Once again event source is unified, new coordinate of time cursor is calculated and tests for graphic limits are performed in order time cursor not to get out of the scale. Further time cursor is shifted to new position (urgency add pixel units). At last, digital time is displayed.

Note that time is not calculated from mouse position, but from time cursor position. Mouse may take up the object in any position so mouse position is not relevat for time calculation.

function mouseUp()

This function ends up drag&drop by setting variable dragOn to value false. Function mouseMove() keeps recieving messages from mouse movement, but no longer goes in for effective instructions.

function showTime()

Function calculates and displays digital value of time according to actual position time cursor. Position left of time cursor has to be corrected on shift of scale and on the centre of time cursor. Unit conversion is as follow: 2 pixels are equal one time step (5 minutes). Now hours and minutes are calculated and in case of need leading zero is added.

Variable dtArray[0] keeps current date. That value is set by function keybInp(), or by function setDate() after click on calendar. Date is appended by hours and minutes and complete date time string is pushed to the form field #dateTime.

Drag&drop is not quite standard or troublefree method. Individual browsers do not operate identically. Especialy when element is draged out of browser window, element sometimes disapears and becomes inaccesible. Drag&drop method requires a lof of testing and debugging in various browsers and definitely it is not practice for novice programmer.

updated 23.09.2007