How do I input date in forms with xhtml or html4?

Question

well I know it's easier on html5, but I have to use html4 or xhtml and I can't find any info without html5 somehow. Can anyone help and explain me how I can input a date?

<input type="text" name ="sometext">

The normal html4 or xhtml doesn't seem to have the type date as the type of input.

Thanks in advance.

Answer 1

HTML4 doesn't have any tags to input date by default.All you need to do is include third party library like JQUERY.

Checkout this example http://jqueryui.com/datepicker/

Answer 2

This question has been asked & answered on some other StackOverflow threads, but as I'm hitting the same problem, here's more info.

Using the jQuery DatePicker is a good start, but it does not enforce format or min/max value integrity outside of the actual calendar popup. Meaning, you can type or paste some bad stuff.

Here's 2 links to sites that demo how to do it the "old way" in JS with a function: http://www.javascriptkit.com/script/script2/validatedate.shtml http://www.w3resource.com/javascript/form/javascript-date-validation.php

And here's a StackOverflow link to another pretty nice way to do it: Detecting an "invalid date" Date instance in JavaScript

Personally, I need validation and restriction to min and max date ranges (SQL hates dates before 1/1/1773 and somebody tried that in my app). I'm going to wire up a function that tells me if a date string is valid, and then wire that up to the input's onchange event.

Here's the HTML for mine:

I'm also using ASP.NET and jQuery's DatePicker, so the key element for folks is the onblur event.

Here's the JS for the FixValidDate() function:

var availableDateFormats = ["mmddyyyy","mm/dd/yyyy","mm-dd-yyyy","yyyy/mm/dd","yyyy-mm-dd"];
function FixValidDate(txtDate,nulls, minDate, maxDate) {
    //debugger;
    formats = 
    {
        'mmddyyyy':{
            're':/^(\d{1,2})(\d{1,2})(\d{4})$/,
            'month': 1,'day': 2, year: 3
        },
        'mm/dd/yyyy':{
            're':/^(\d{1,2})[/](\d{1,2})[/](\d{4})$/,
            'month': 1,'day': 2, year: 3
        },
        'mm-dd-yyyy':{
            're':/^(\d{1,2})[-](\d{1,2})[-](\d{4})$/,
            'month': 1,'day': 2, year: 3
        },
        'yyyy/mm/dd':{
            're':/^(\d{4})[/](\d{1,2})[/](\d{1,2})$/,
            'month': 2,'day': 3, year: 1
        },
        'yyyy-mm-dd':{
            're':/^(\d{4})[-](\d{1,2})[-](\d{1,2})$/,
            'month': 2,'day': 3, year: 1
        }
    }

    dateText = txtDate.value;
    matched = false;
    for(i=0; i<availableDateFormats.length; i++)
    {
        f = formats[availableDateFormats[i]];
        match = dateText.match(f.re);
        if(match)
        {
            matched = true;
            month = match[f.month];
            day = match[f.day];
            year = match[f.year];
            //TODO validate if the numbers make sense
            txtDate.value = month+"/"+day+"/"+year;
        }
    }
    if (!matched && nulls) {
        txtDate.value = "";
        return false;
    } else {
        var timestamp = Date.parse(txtDate.value);

        if (isNaN(timestamp) == false) {
            var d = new Date(timestamp);

            if (minDate != null) {
                if (d < minDate) {
                    txtDate.value = "";
                    return false;    
                }

            }

            if (maxDate != null) {
                if (d > maxDate) {
                    txtDate.value = "";
                    return false;
                }
            }

        } else {
            txtDate.value = "";
            return false;
        }
    }
    return true;
}

This is from an old library I've used for JS stuff for about a decade. You could easily find another JS validation function and swap mine out.

In my function, I required to accept a variety of date formats, and if it's a bad format, I blank out the field and keep the user in the same box. You could change that up.

Answer 3

The basic input element is all that HTML (other than HTML5) has. You should have a label, with associated markup, for all text input. Normally you should also include information about the expected input format, as this varies by language and culture, e.g.

<label for="birth">Date of birth (day/month year):</label>
<input id="birth" type="text" name="birth" size="10">

You should also pre-check the user input client-side, with JavaScript, to give the user fast response in case of data error. Naturally, the checks should be duplicated server-side.