Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UIĀ Fabric React as your front-end framework.

Overview

The DatePicker component enables a user to pick a date value.

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery and PickaDate.js library:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    <script src="jquery.min.js"></script>
    <script src="fabric.min.js"></script>
    <script src="PickaDate.js"></script>
    		
  2. Copy the HTML from one of the samples below into your page. For example:

    <div class="ms-DatePicker">
      <div class="ms-TextField">
        <label class="ms-Label">Start date</label>
        <i class="ms-DatePicker-event ms-Icon ms-Icon--Event"></i>
        <input class="ms-TextField-field" type="text" placeholder="Select a date&hellip;">
      </div>
      <div class="ms-DatePicker-monthComponents">
        <span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--ChevronRight"></i></span> 
        <span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span> 
        <div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
      </div>
      <span class="ms-DatePicker-goToday js-goToday">Go to today</span> 
      <div class="ms-DatePicker-monthPicker">
        <div class="ms-DatePicker-header">
          <div class="ms-DatePicker-yearComponents">
            <span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--ChevronRight"></i></span> 
            <span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span> 
          </div>
          <div class="ms-DatePicker-currentYear js-showYearPicker"></div>
        </div>
        <div class="ms-DatePicker-optionGrid">
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span> 
          <span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span> 
        </div>
      </div>
      <div class="ms-DatePicker-yearPicker">
        <div class="ms-DatePicker-decadeComponents">
          <span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--ChevronRight"></i></span> 
          <span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span> 
        </div>
      </div>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all DatePicker components on the page:

    <script type="text/javascript">
      var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
      for (var i = 0; i < DatePickerElements.length; i++) {
        new fabric['DatePicker'](DatePickerElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default DatePicker
<div class="ms-DatePicker">
  <div class="ms-TextField">
    <label class="ms-Label">Start date</label>
    <i class="ms-DatePicker-event ms-Icon ms-Icon--Event"></i>
    <input class="ms-TextField-field" type="text" placeholder="Select a date&hellip;">
  </div>
  <div class="ms-DatePicker-monthComponents">
    <span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--ChevronRight"></i></span> 
    <span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span> 
    <div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
  </div>
  <span class="ms-DatePicker-goToday js-goToday">Go to today</span> 
  <div class="ms-DatePicker-monthPicker">
    <div class="ms-DatePicker-header">
      <div class="ms-DatePicker-yearComponents">
        <span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--ChevronRight"></i></span> 
        <span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span> 
      </div>
      <div class="ms-DatePicker-currentYear js-showYearPicker"></div>
    </div>
    <div class="ms-DatePicker-optionGrid">
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span> 
      <span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span> 
    </div>
  </div>
  <div class="ms-DatePicker-yearPicker">
    <div class="ms-DatePicker-decadeComponents">
      <span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--ChevronRight"></i></span> 
      <span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span> 
    </div>
  </div>
</div>
<script type="text/javascript">
  var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
  for (var i = 0; i < DatePickerElements.length; i++) {
    new fabric['DatePicker'](DatePickerElements[i]);
  }
</script>
Go to today
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Methods

Name Parameters Description
picker.set('select', dateArr);

dateArr: {Array} The new date in [YEAR, MONTH, DATE] format

Selects a new date in the component. Must be used on component's picker property (DatePicker.picker).
picker.set('highlight', dateArr);

dateArr: {Array} The new date in [YEAR, MONTH, DATE] format

Highlights a new date in the component. Must be used on component's picker property (DatePicker.picker).