logo To Foot
© J R Stockton, ≥ 2013-08-27

JavaScript Date and Time 6 :
Date / Time Choosers
.

No-Frame * Framed Index * Frame This
Links within this site :-

See "About This JavaScript Site" in JavaScript Index and Introduction.

See "General Date/Time Introduction" in JavaScript Date and Time Introduction.

Introduction

General JavaScript date functions are coded in inc-date.js; but that is not used in this page. Instead, the necessary few are defined at this point in the source of the page. However, inc-cmmn.js is used in this page, for code display functions; there should be no other use apart from Wryt.

There are JavaScript functions shown in 9: Output Formatting for converting between M D Y and D M Y, in 7: Working with Weeks for converting between Y M D and standard Y W D, and in 4: Validation for validating a Y M D string.

See also at Input from HTML for relevant features in HTML 5.

Common functions for this page :-

N.B. The choosers on this page require JavaScript as they stand. To provide such a chooser usable without JavaScript, it would be necessary to supply the initial full options list in HTML.

Simple Calendars

See also in Calendars and Clocks. These use ISO Weeks.

The Date Object calculations should be a little faster if done with UTC methods.

Month

Note : Now also for years AD 00 to AD 99.

N.B. That could be re-done in UTC.

   

Year

The routine MonthCal might be adjusted to improve this.

Two Years

Designed in Firefox; also OK in Chrome; otherwise, may need adjustment to fit.

  and YYYY+1  

Date Drop-Downs

I find that using drop-downs is slower than just typing YYYY-MM-DD or YYYY-WW-D, and validating the former as in 4: Validation. Typing into drop-downs has curious effects.

These are fully usable, but not visually correct, in Safari 3.1 and 4.0.5; the visible length of the Day/Week drops do not vary as intended.

Year-Month-Day

Only valid Gregorian dates are selectable; end-month selections reduce to fit.
For orders other than Y-M-D, it will be better not to set the current date initially.

Select Year - Month - Day :-
   - -    

One might add day-of-week to the Day drop-down; this probably requires rewriting all options.

Year-Week-Day

Only valid ISO 8601 weeks are selectable; end-year selections reduce to fit.
For orders other than Y-W-D, it will be better not to set the current date initially.

Select Year - Week - Day :-
  - -  
 

In a new window, show the functions used :-

About Time Drop-Down

To make a Time Drop-Down, simplify Y-W-D above. No equivalent of W_Opt will be needed. The drops will be unduly long, the exercise pointless. Follow 3 : Input and Lengths instead.

Date Pickers

1

Safari 3.1 needs ' -- ' in non-numbered buttons; four spaces suffice in IE, Firefox, Opera. Safari buttons are narrower, too. Chrome ones seem wider.

If the "Mon Year" box is edited, "" is prefixed; then the result must be acceptable to new Date() and defines the new month.

Select a Year and Month either with the arrow buttons,
or by altering the value and clicking elsewhere,
and then select a Date button.

           

Mon  Tue  Wed  Thu  Fri  Sat  Sun

I suspect that function Wryt could be employed to load the buttons without needing script in the middle of a form/table. Otherwise, 42 very self-similar button-defining lines of HTML could be used.

A CSS style is used on this site to make control text fixed-width, which makes the date buttons equal-width (Safari needed assistance). One can alternatively use small readonly text input-boxes.

The above Picker was, I think, written using MS IE only. To ensure neat results in all browsers, it would be better either to make the Calendar part a Table, with the TD elements having an onClick, or to make use of CSS and/or DOM methods in positioning.

In a new window, show the functions used above :-

2

This shows a neat clickable calendar page, using a table and not affected by browser button design. The month and year at the top might be made directly editable by using input type=text. Year must remain after AD 99.

<< < > >>
MonTueWedThuFriSatSun
script
broken
Daynotgot

Caution : new, 2011-11-07.

Event Picker

Code for determining varying dates of recurrent events is elsewhere on this site; in other pages in the JavaScript Date and Time Introduction series, and, for example, in Annual Holiday Dates, The Date of Easter Sunday and JavaScript Calendars and Clocks. I am considering how best to incorporate more of those here.

Each of the Single events occurs once only.

The Annual and Weekly occur on the same date every year and week, and are stored similarly.

The Wobbly occur every year on the Kth D-day of month M (1..12); K=5 is the last, D is ISO Mon=1..Sun=7, M=0 means every month.

There can be multiple Items on a day, and there are functions to append to any previously listed Items.

The Single are stored in an Object, in arbitrary order. Only those years with an event need be stored; within them, only those months with an event; within them, only those days with an event; and similarly for Annual and Wobbly.

The following are demonstration entries rather than a complete list.

EUST is EU Summer Time; for use elsewhere, the EUST lines should be replaced with localised ones.

Perhaps to be or being added - Easter.

Select a Year and Month either by altering the value and clicking elsewhere,
or with the buttons - then select a Date box.

If the "Mon Year" box is edited, "" is prefixed; then the result must be acceptable to new Date() and defines the new month.

A CSS style is used to make text in controls fixed-width.

In a new window, show the functions used :-

Listing Future Events

This shows only the basic method. The start date is set back, in order to include recent events. Default .sort() can be used to order the entries. Function ISOlocaldateStr is as in Include Files.

Note : this demo will need to be updated occasionally.

Date-Selective Display

This shows only the basic methods of scanning and display.

Input a date, show string selected by DSDisp
   

Normally, the resulting string will be given as a parameter to something like <img ID="..."> , by code perhaps called from <BODY onLoad-"..."> . Thus, today's ISO 8601 Day-of-Week number, displayed as a graphic digit by ShowDoWk is  .

JavaScript Date and Time Index
Home Page
Mail: no HTML
© Dr J R Stockton, near London, UK.
All Rights Reserved.
These pages are tested mainly with Firefox and W3's Tidy.
This site, http://www.merlyn.demon.co.uk/, is maintained by me.
Head.