Fabric UI JS: DatePicker - where is the onSelectDate method?

Question

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.

Answer 1

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
      }
    });
  }
</script>

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.