Thread by @swapnakpanda

5 "Must-Know" Date Input Types in HTML

⇩

There are 5 input types which allow user to enter/pick date, time, week, month, year etc.

➊ datetime-local
➋ date
➌ time
➍ week
➎ month

➊ datetime-local

⬒ Use this input type if requirement is to pick both "date" and "time" (independent of any timezone).

⬓ We can use 2 other attributes to define the limit restrictions and step values.

❍ min
❍ max
❍ step

➋ date

⬒ Use this input type if requirement is to pick only "date".

⬓ We can use 2 other attributes to define the limit restrictions and step values.

❍ min
❍ max
❍ step

➌ time

⬒ Use this input type if requirement is to pick only "time" (independent of any timezone).

⬓ We can use 2 other attributes to define the limit restrictions and step values.

❍ min
❍ max
❍ step

➍ week

⬒ Use this input type if requirement is to pick "week" and "year".

⬔ The "week" is a ISO 8601 week number during that year (i.e., week 1 to 52/53).

⬓ We can use 2 other attributes to define the limit restrictions and step values.

❍ min
❍ max
❍ step

➎ month

⬒ Use this input type if requirement is to pick "month" and "year".

⬔ The value is a string whose value is in the format "YYYY-MM".

⬓ We can use 2 other attributes to define the limit restrictions and step values.

❍ min
❍ max
❍ step

⚠️ Warning ⚠️

⬘ The UI for all these input types varies from browser to browser.

⬗ Even few browsers still do not support these entirely.

⬙ Before using these, check for the browser compatibility.

⬖ As an alternative, you can use some external component library.

End of 🧵

Are you interested in Web Development? I am sharing contents regularly on HTML, CSS, JavaScript, React and Node.js.

To never miss any in future, Follow Me ✅