I'm a bit confused over the implementation of the DatePicker component within Fabric UI JS.

It states in the documentation that there is an event called "onSelectDate" within the React version of the DatePicker.

My question is does the JavaScript version of the DatePicker has this event as well? If it does, can one provide an example on how it supposed to be used?

Let me know if any questions regarding Fabric UI should be in another location.


The Office UI Fabric JS Date Picker Component implements it's datepicker using a jQuery plugin called pickadate.js. As a result, you can use the same options available in the pickadate.js API with the Date Picker component.

In this case, you are looking for the onSet event. Here's how you can adapt the sample code to specify a handler for this event:

 <script type="text/javascript">
  var DatePickerElements = document.querySelectorAll(".ms-DatePicker");
  for(var i = 0; i < DatePickerElements.length; i++) {
    new fabric['DatePicker'](DatePickerElements[i], {
      onSet: function(thingSet) {
        //YOUR CODE HERE

This works because the constructor for the Date Picker takes 2 arguments: the element to make into a date picker, and an options object. You can see details of this implementation here.

| improve this answer | |
  • I just tried it. Thanks for all the information! It was very helpful! – bfung1972 Dec 13 '16 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.