Custom jQuery UI Datepicker With Quarter View - date-picker

Custom jQuery UI Datepicker With Quarter View - date-picker

This is a custom jQuery & jQuery UI date picker component where the users are able to switch between Month and Quarter views for easier date selection.

1. Include the necessary jQuery and jQuery UI libraries on the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Attach the custom date picker to an input field you specify.

<input class="datepicker example" id="datepicker" type="text">
$('.example').jqueryDatePicker();

3. Set the date format.

$('.example').jqueryDatePicker({
  format: 'mm/dd/yyyy'
});

4. Set the min/max dates.

$('.example').jqueryDatePicker({
  minDate:'10/10/2018',
  maxDate:'12/10/2019'
});

5. Set the min/max years.

$('.example').jqueryDatePicker({
  yearRangeVal: "-20:+20"
});

6. Set the default view. Month or quarter.

$('.example').jqueryDatePicker({
  defaultView: 'month'
});

7. Set the default date.

$('.example').jqueryDatePicker({
  defaultDate:'01/03/2019'
});

8. Close the date picker after selection.

$('.example').jqueryDatePicker({
  closeOnSelect:true
});

9. Callback functions.

$('.example').jqueryDatePicker({
  onSelect: $.noop,
  beforeShow: $.noop
});

10. Localize the date picker

var dates = $.fn.jqueryDatePicker.dates = {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    daysShortest: ["S", "M", "T", "W", "T", "F", "S"],
    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
};

This awesome jQuery plugin is developed by rahul-intel. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 11.01.2019
  • Source