Fabric JS

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).