<h3>date type for inputs</h3>
<input type="date" />

<h3>month type for inputs</h3>
<input type="month" />

<h3>week type for inputs</h3>
<input type="week" />

<h3>time type for inputs</h3>
<input type="time" />

<h3>date type for inputs</h3>
<input type="datetime-local" style="margin-bottom: 2rem;" />


<a href="https://fjolt.com/article/html-input-types" target="_blank">Read the article</a>
input {
    padding: 0.5rem;
    letter-spacing: .5px;
    font-size: 1rem;
    max-width: 400px;
}
body {
    margin: 0;
    float: left;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
    background: rgb(15 19 22);
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #fff;
}

a {
  float: left;
  width: 100%;
  margin: 2rem 0;
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.