input type='date' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. input

Introduction

HTML5 introduced input element types to gather dates and times from the user.

The input Element Types for Obtaining Times and Dates

Type
 Description
 Example
datetime
 Obtains a global date and time, including time zone.
 2019-07-19T16:49:39.491Z
datetime-local

 Obtains a local date and time, (with no time zone
information).
2019-07-19T16:49:39.491

date
 Obtains a local date (with no time or time zone).
 2019-07-20
month

 Obtains a year and month (no day, time, or time
zone information).
2019-08

time
 Obtains a time.
 17:49:44.746
week
 Obtains the current week.
 2019-W30

The following table lists attributes Available for the Date and Time input Element Types.

Attribute
 Description
 New in HTML5
list

 Specifies the id of a datalist element that provides values for the
element.
Yes

min

 Specifies the minimum acceptable value for the purposes of input
validation.
Yes

max

 Specifies the maximum acceptable value for the purposes of input
validation.
Yes

readonly

 If present, this attribute makes the text box read-only, and the user
cannot edit the content.
No

required

 Specifies that the user must provide a value for the purposes of input
validation.
Yes

step
 Specifies the granularity of increments and decrements to the value.
 Yes
value
 Specifies the initial value for the element.
 No

Using the date Type of the input Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form method="post" action="http://example.com/form"> 
         <p> 
            <label for="name">
                Name: <!--  w  w w  .ja  va2 s  .co  m-->
               <input value="java2s.com" id="name" name="name"> 
            </label> 
         </p> 
         <p> 
            <label for="fave">
                Fruit: 
               <input value="CSS" id="fave" name="fave"> 
            </label> 
         </p> 
         <p> 
            <label for="lastbuy">
                When did you last buy: 
               <input type="date" id="lastbuy" name="lastbuy"> 
            </label> 
         </p> 
         <input type="submit" value="Submit Vote"> 
      </form>  
   </body>
</html>

Related Tutorials