JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<h3>Quarter Picker</h3>
<div id="quarter">
    <input type="text" id="quarterpicker1" />
    <input type="text" id="quarterpicker2" />
</div>

JavaScript

/**
* @description  
*   extends $.datepicker for fw requirements, include week, month, quarter
* @extends          $.datepicekr
* @requires         @.datepicker
*/

(function($) {
  /**
  * @description    This block is extend for date selectable range
  * @param{Boolean}   monthpicker   Default value is false, trigger to show monthpicker
  * @param{Boolean}   quarterpicker Default value is false, trigger to show quarterpicker
  * @example
  *   for monthpicker, set "monthpicker" as true
  *   for quarterpicker, set "quarterpicker" as true
  */
  $.extend(true, $.datepicker, {
    monthpicker: false,
    quarterpicker: false,
    /**
    * @public
    * @description      validate leap year
    * @param{String}    yyyy
    * @returns{Boolean} true / false
    */
    validateLeapYear: function(yearText) {
      return (yearText % 4 == 0 && yearText % 100 != 0) || (yearText % 400 == 0);
    },
    /**
    * @public
    * @description    get last day of month
    * @param{Object|String}  date as a Date object
    * @returns{String}  mm/dd/yyyy
    */
    getMonthLastDay: function(date) {
      if(typeof date == 'string') {
        date = new Date(date);
      }
      var year = date.getFullYear(),
          month = date.getMonth() + 1,
          realDate = date.getDate();
      if(month < 10) {
        month = '0' + month;
      }
      return month + '/' + (32 - new Date(year, month - 1, 32).getDate()) + '/' + year;
    },
    /**
    * @public
    * @description    set date range only Saturday selectable
    * @param{Object}  date as a Date object
    * @returns{[]} [[0] = true if selectable, false if not, [1] = custom CSS class name(s) or '']
    */
    onlySaturday: function(date) {
      var day = date.getDay();
      return [(day == 6), ''];
    },
    /**
    * @public
    * @description    set date range only Sunday selectable
    * @param{Object}  date as a Date object
    * @returns{[]} [[0] = true if selectable, false if not, [1] = custom CSS class...