HTML5 Tutorial – New Date Input Types for Web Forms

May 17, 2013 admin Uncategorized 0

HTML5 Tutorial : Date Input Type web-forms

HTML5 introduces date input type which we use in many web forms to select date range, date of birth or calender event. Here is the example which shows how to add date input type and validate using Javascript.
Demo for Date Input Type:

Select Your Date Of Birth:



Select Your Date Of Birth & Time:



Select Your Date Of Birth & Time:



/* Copy and Paste this code to implement and validate date input type: */
<!DOCTYPE HTML>
<html>
    <head>
        <title>HTML5 Form Example: Date , DateTime and Datetimelocal </title>
    </head>
    <body>
        <form>
            <h2> Select Your Date Of Birth:</h2>
            <input type='date' id='date'/>
            <input type='button' id='button' value = 'Submit' onclick="datecheck()" />
        </form>
        <form>
            <h2> Select Your Date Of Birth & Time:</h2>
                <input type="datetime" id="date1" />
                <input type="button" value="Submit" onclick="datecheck1()">
        </form>
        <form>
           <h2> Select Your Date Of Birth & Time:</h2>
                <input type="datetime-local" id="date2" />
                <input type="button" value="Submit" onclick="datecheck2()">
         </form>
        <script type = 'text/javascript'>

            function datecheck()
            {
                // Returns Color code.
                var input1 = document.getElementById('date').value;
                alert("You have selected dob:" +input1) ;

            }
            function datecheck1()
            {
                // Returns Color code.
                var input1 = document.getElementById('date1').value;
                alert("You have selected DOB:" +input1) ;

            }
            function datecheck2()
            {
                // Returns Color code.
                var input1 = document.getElementById('date2').value;
                alert("You have selected DOB:" +input1) ;

            }

        </script>
 </body>
</html>