Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

The 3rd Saturday in November

Born on the 4th of July

The Chinese New Year

What sign are you?

Monday's child is full of grace

32 years 8 months 24 days

Blind Date

Travelling Through Time

Time of Day

Calendars

Date Spinner

You are here: irt.org | Articles | JavaScript | Date and Time | Date Spinner [ previous next ]

Published on: Monday 21st July 1997 By: Martin Webb

Introduction

A recent posting to the comp.lang.javascript newsgroup requested a date spinner which would increment forward or backwards one day at a time. This article describes the JavaScript example I posted in reply.

Date Spinner

First the date spinner, which at first glance looks like a new form object, but is in fact a text field following by an image:

Click

and the example code:

<HTML>
<HEAD>

<SCRIPT LANGUAGE = 'JavaScript'><!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }

var date = new Date();
var milliseconds =
    Date.UTC(y2k(date.getYear()),date.getMonth(),date.getDate());


function prevDay() {
    milliseconds -= 86400000;
    formatDate();
}

function nextDay() {
    milliseconds += 86400000;
    formatDate();
}

function formatDate() {
    date = new Date(milliseconds);
    var year = date.getYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    document.date.spinner.value = ((year < 1000) ? year + 1900 : year) +
                            '-' + ((month < 10) ? '0' + month : month) +
                            '-' + ((day < 10) ? '0' + day : day);
}
//--></SCRIPT>

</HEAD>

<BODY onLoad="formatDate()">

<MAP NAME="spinner-map">
<AREA
  SHAPE="RECT"
  COORDS="0,0,18,10"
  HREF="javascript:prevDay()"
  onMouseOver="self.status='';return true"
>
<AREA
  SHAPE="RECT"
  COORDS="0,12,18,23"
  HREF="javascript:nextDay()"
  onMouseOver="self.status='';return true"
>
</MAP>

<P>

<FORM NAME="date">
<INPUT
  NAME="spinner"
  TYPE="TEXT"
  SIZE="10"
  VALUE="9999-99-99"
><A
  HREF="JavaScript:"
  onMouseOver="self.status='';return true"
><IMG
  SRC="date.gif"
  BORDER=0
  WIDTH=19
  HEIGHT=24
  ALIGN=TOP
  USEMAP="#spinner-map"
  ALT="Click"
></A>
</FORM>

</BODY>
</HTML>

So how does it work?

First we define all our JavaScript variables and functions within the <HEAD> and </HEAD> HTML tags:

The onLoad event within the <BODY> tag is used to ensure the whole page is loaded before any JavaScript is invoked. This ensures that the form is fully defined before trying to change the values of the text box. When the onLoad event is triggered it invokes the formatDate() function to update the text box.

A client-side image map is used, spinner-map, which defines two rectangle areas within the date.gif image, which either invoke the prevDay() or the nextDay() JavaScript functions, and set the document status to blank to hide the ugly "Javascript:prevDay()" and "Javascript:nextDay()" status messages.

Finally the date form is defined.

The spinner text field has a size of 10 specified and an initial value of '9999-99-99'.

The date.gif image is wrapped in a anchor to allow the client-side image map to work. It does not actually require a proper HREF url.

The image has the border set to zero to stop it from being shown.

To avoid spaces appearing between the form elements the end and start of the HTML tags have been deliberately coded as ><.

The image refers to the client-side image map using USEMAP="#spinner-map".

Obviously this is only one example of what can be achieved using this spinner. The spinner can be used where you need to control how many items are visible within the same text box, and where it is necessary to step through the items one at a time.

Another example where this can be used is too restrict the range of dates entered. The following will only allow a date that is equal or greater than todays date. It also disallows the user from entering the text directly in the textbox, because as soon as the field is changed, i.e. the user clicks elsewhere after changing the text value, it checks the field contents with its last known value.

Without an Image Map

This example does not use image maps, and therefore would be supported by far more browsers.

ClickClick

and the example code:

<SCRIPT LANGUAGE = 'JavaScript'><!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }

var date2 = new Date();
var milliseconds2 = Date.UTC(y2k(date2.getYear()),date2.getMonth(),date2.getDate());
var baseTime = milliseconds;
var currentDate = "";

function prevDay2() {
    if (milliseconds2 > baseTime)
        milliseconds2 -= 86400000;
    formatDate2();
}

function nextDay2() {
    milliseconds2 += 86400000;
    formatDate2();
}

function formatDate2() {
    date2 = new Date(milliseconds2);
    var year2 = date2.getYear();
    var month2 = date2.getMonth() + 1;
    var day2 = date2.getDate();
    document.date2.spinner.value = ((year2 < 1000) ? year2 + 1900 : year2) +
                            '-' + ((month2 < 10) ? '0' + month2 : month2) +
                            '-' + ((day2 < 10) ? '0' + day2 : day2);
    currentDate = document.date2.spinner.value;
}

function checkDate() {
    if (document.date2.spinner.value != currentDate)
        document.date2.spinner.value = currentDate
}
//--></SCRIPT>

<P>

<FORM NAME="date2">
<A
  HREF="JavaScript:prevDay2()"
  onMouseOver="self.status='';return true"
><IMG
  SRC="prev.gif"
  BORDER=0
  WIDTH=17
  HEIGHT=23
  ALIGN=TOP
  ALT="Click"
></A><INPUT
  NAME="spinner"
  TYPE="TEXT"
  SIZE="10"
  VALUE="9999-99-99"
  onChange="checkDate()"
><A
  HREF="JavaScript:nextDay2()"
  onMouseOver="self.status='';return true"
><IMG
  SRC="next.gif"
  BORDER=0
  WIDTH=17
  HEIGHT=23
  ALIGN=TOP
  ALT="Click"
></A>
</FORM>

<SCRIPT LANGUAGE = 'JavaScript'><!--
formatDate2()
//--></SCRIPT>

Related items

The 3rd Saturday in November

Born on the 4th of July

The Chinese New Year

What sign are you?

Monday's child is full of grace

32 years 8 months 24 days

Blind Date

Travelling Through Time

Time of Day

Calendars

Feedback on 'Date Spinner'

©2018 Martin Webb