FAQTs - Knowledge Base - View Entry - How do I ensure only valid dates are input in a FORM?

faqts : Computers : Programming : Languages : JavaScript : Forms

+ Search

Entry

How do I ensure only valid dates are input in a FORM?

May 11th, 2000 14:33
Martin Honnen,
Much validation work is necessary if you allow free form date input 
into a text field to cover all the various date formats. This entry 
alternatively suggests to write three select elements for 
day/month/year where the day element is changed when the month or year 
change to allow only valid days to be selected.

<HTML>
<HEAD>
<SCRIPT>
function __updateDays (dateField, month, year) {
  var days = month != 1 ?
    DateSelector.defaults.months[month].days :
    (__isLeapYear(year) ? 29 : 28);
  dateField.options.length = days;
  for (var d = 29; d < days + 1; d++)
    dateField.options[d - 1] = new Option(d, d);
}
function DateSelector (args) {
  this.id = DateSelector.cnt;
  DateSelector.elements[DateSelector.cnt++] = this;
  if (!args)
    args = new Object();
  for (var p in DateSelector.defaults)
    this[p] = typeof args[p] != 'undefined' ?
      args[p] : DateSelector.defaults[p];
  this.days = this.selectedMonth != 1 ?
    DateSelector.defaults.months[this.selectedMonth].days :
    (__isLeapYear(this.selectedYear) ? 29 : 28);
  this.monthOnChange =
    'var yearField = this.form[\'' + this.yearFieldName + '\'];'
    + 'var year = yearField.options[yearField.selectedIndex].value;'
    + '__updateDays(this.form[\'' + this.dateFieldName 
    + '\'], this.selectedIndex, ' 
    + 'year); '
    + this.monthOnChange;
  this.yearOnChange =
    'var monthField = this.form[\'' + this.monthFieldName + '\'];'
    + 'var month = monthField.options[monthField.selectedIndex].value;'
    + '__updateDays(this.form[\'' + this.dateFieldName 
    + '\'], month, ' 
    + 'this.options[this.selectedIndex].value); '
    + this.yearOnChange;
  this.writeHTML();
}
function DateSelector_writeHTML () {
  var html = '';
  html += '<FIELDSET ID="dsf' + this.id + '">';
  html += '<LEGEND ID="dsl"' + this.id + '">';
  html += this.legend;
  html += '<\/LEGEND>';
  html += '<SELECT NAME="' + this.dateFieldName + '"';
  html += this.dateOnChange ? ' ONCHANGE="' + this.dateOnChange 
+ '"' : '';
  html += '>';
  for (var d = 1; d <= this.days; d++) {
    html += '<OPTION VALUE="' + d + '"';
    html += d == this.selectedDate ? 
      ' SELECTED' : '';
    html += '>' + d;
  }
  html += '<\/SELECT>';
  html += '<SELECT NAME="' + this.monthFieldName + '"';
  html += this.monthOnChange ? ' ONCHANGE="' + this.monthOnChange 
+ '"' : '';
  html += '>';
  for (var m = 0; m < 12; m++) {
    html += '<OPTION VALUE="' + m + '"';
    html += m == this.selectedMonth ?
      ' SELECTED' : '';
    html += '>';
    html += this.format == 'short' ?
      DateSelector.defaults.months[m].shortName :
      DateSelector.defaults.months[m].longName;
  }
  html += '<\/SELECT>';
  html += '<SELECT NAME="' + this.yearFieldName + '"';
  html += this.yearOnChange ? ' ONCHANGE="' + this.yearOnChange 
+ '"' : '';
  html += '>';
  for (var year = this.startYear; year <= this.endYear; year++) {
    html += '<OPTION VALUE="' + year + '"';
    html += year == this.selectedYear ?
      ' SELECTED' : '';
    html += '>' + year;
  }
  html += '<\/SELECT>';
  html += '<\/FIELDSET>';
  document.write(html);
}
DateSelector.prototype.writeHTML = DateSelector_writeHTML;
function __isLeapYear (year) {
  return (year % 4 == 0) && 
         ((year % 100 != 0) || (year % 400 == 0));
}
DateSelector.cnt = 0;
DateSelector.elements = new Array();
DateSelector.defaults = new Object();
DateSelector.defaults.months = new Array(12);
DateSelector.defaults.months[0] = new Object();
DateSelector.defaults.months[0].shortName = 'Jan';
DateSelector.defaults.months[0].longName = 'January';
DateSelector.defaults.months[0].days = 31;
DateSelector.defaults.months[1] = new Object();
DateSelector.defaults.months[1].shortName = 'Feb';
DateSelector.defaults.months[1].longName = 'February';
DateSelector.defaults.months[1].days = 28
DateSelector.defaults.months[2] = new Object();
DateSelector.defaults.months[2].shortName = 'Mar';
DateSelector.defaults.months[2].longName = 'March';
DateSelector.defaults.months[2].days = 31;
DateSelector.defaults.months[3] = new Object();
DateSelector.defaults.months[3].shortName = 'Apr';
DateSelector.defaults.months[3].longName = 'April';
DateSelector.defaults.months[3].days = 30;
DateSelector.defaults.months[4] = new Object();
DateSelector.defaults.months[4].shortName = 'May';
DateSelector.defaults.months[4].longName = 'May';
DateSelector.defaults.months[4].days = 31;
DateSelector.defaults.months[5] = new Object();
DateSelector.defaults.months[5].shortName = 'Jun';
DateSelector.defaults.months[5].longName = 'June';
DateSelector.defaults.months[5].days = 30;
DateSelector.defaults.months[6] = new Object();
DateSelector.defaults.months[6].shortName = 'Jul';
DateSelector.defaults.months[6].longName = 'July';
DateSelector.defaults.months[6].days = 31;
DateSelector.defaults.months[7] = new Object();
DateSelector.defaults.months[7].shortName = 'Aug';
DateSelector.defaults.months[7].longName = 'August';
DateSelector.defaults.months[7].days = 31;
DateSelector.defaults.months[8] = new Object();
DateSelector.defaults.months[8].shortName = 'Sep';
DateSelector.defaults.months[8].longName = 'September';
DateSelector.defaults.months[8].days = 30;
DateSelector.defaults.months[9] = new Object();
DateSelector.defaults.months[9].shortName = 'Oct';
DateSelector.defaults.months[9].longName = 'October';
DateSelector.defaults.months[9].days = 31;
DateSelector.defaults.months[10] = new Object();
DateSelector.defaults.months[10].shortName = 'Nov';
DateSelector.defaults.months[10].longName = 'November';
DateSelector.defaults.months[10].days = 30;
DateSelector.defaults.months[11] = new Object();
DateSelector.defaults.months[11].shortName = 'Dec';
DateSelector.defaults.months[11].longName = 'December';
DateSelector.defaults.months[11].days = 31;
DateSelector.defaults.format = 'short';
var now = new Date();
var year = now.getFullYear ?
  now.getFullYear() : now.getYear();
if (year >= 0 && year <= 99)
  year += 1900;
DateSelector.defaults.startYear = year;
DateSelector.defaults.selectedYear = year;
DateSelector.defaults.endYear = DateSelector.defaults.startYear + 20;
DateSelector.defaults.selectedMonth = now.getMonth();
DateSelector.defaults.selectedDate = now.getDate();
DateSelector.defaults.legend = 'date';
DateSelector.defaults.dateFieldName = 'date';
DateSelector.defaults.monthFieldName = 'month';
DateSelector.defaults.yearFieldName = 'year';
DateSelector.defaults.dateOnChange = '';
DateSelector.defaults.monthOnChange = '';
DateSelector.defaults.yearOnChange = '';
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SCRIPT>
new DateSelector();
</SCRIPT>
</FORM>
<FORM NAME="form2">
<SCRIPT>
var args = new Object();
args.legend = 'birthday';
var now = new Date();
var year = now.getFullYear ?
  now.getFullYear() : now.getYear();
if (year >= 0 && year <= 99)
  year += 1900;
args.startYear = year - 120;
args.endYear = year;
args.selectedYear = year;
new DateSelector(args);
</SCRIPT>
</FORM>
</BODY>
</HTML>