Date pickers

Date pickers let people select a date, or a range of dates
Material Design Guidelines: Date pickers
Date picker
calendar_today 
            
      <wfc-textfield type="date" label="date">
    <wfc-icon slot="leading-icon">calendar_today</wfc-icon>
    <wfc-date-picker slot="picker"></wfc-date-picker>
  </wfc-textfield>
Modal
Modals can be forced by adding a [modal] attribute. They will automatically be used on compact windows
calendar_today 
            
      <wfc-textfield type="date" label="date" modal>
    <wfc-icon slot="leading-icon">calendar_today</wfc-icon>
    <wfc-date-picker slot="picker"></wfc-date-picker>
  </wfc-textfield>
Min max
calendar_today 
            
      <wfc-textfield type="date" label="date" min="2024-03-19" max="2024-04-08">
    <wfc-icon slot="leading-icon">calendar_today</wfc-icon>
    <wfc-date-picker slot="picker"></wfc-date-picker>
  </wfc-textfield>
Date range
calendar_today calendar_today 
            
      <wfc-textfield id="start" class="hide-date-icon" value="2024-01-01" type="date" label="Start">
    <wfc-icon slot="leading-icon">calendar_today</wfc-icon>
  </wfc-textfield>
  
  <wfc-textfield id="end" class="hide-date-icon" value="2024-02-01" type="date" label="End">
    <wfc-icon slot="leading-icon">calendar_today</wfc-icon>
  </wfc-textfield>
  
  <wfc-date-range-picker start-textfield="#start" end-textfield="#end"></wfc-date-range-picker>
Date native component
            
      <wfc-textfield type="date" label="date"></wfc-textfield>
Date no component
            
      <wfc-textfield class="hide-date-icon" type="date" label="date"></wfc-textfield>