Date-time Picker

The date-time picker component displays a control that you can use to enter date and time values.

Table of Contents

1. HTML Examples

HTML Examples

To create a date-time picker, use an <input> element with the type attribute set to "month", "week", "date", "time", or "datetime-local", depending on the type of picker you want to create:

<div data-role="content">
   <ul data-role="listview">
      <li><div data-role="fieldcontain">
         <label for="month">Month:</label>
         <input type="month" name="month" id="month" value="" />
      </div></li>
      <li><div data-role="fieldcontain">
         <label for="week">Week:</label>
         <input type="week" name="week" id="week" value="" />
      </div></li>
      <li><div data-role="fieldcontain">
         <label for="date">Date:</label>
         <input type="date" name="date" id="date" value="" />
      </div></li>
      <li><div data-role="fieldcontain">
         <label for="time">Time:</label>
         <input type="time" name="time" id="time" value="" />
      </div></li>
      <li><div data-role="fieldcontain">
         <label for="datetime-l">Datetime local:</label>
         <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
      </div></li>
   </ul>
</div>