Custom jQuery UI Datepicker With Quarter View - date-picker

File Size: 15.4 KB
Views Total: 6606
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

How to use it:

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

<script src="" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src=""></script>

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

<input class="datepicker example" id="datepicker" type="text">

3. Set the date format.

  format: 'mm/dd/yyyy'

4. Set the min/max dates.


5. Set the min/max years.

  yearRangeVal: "-20:+20"

6. Set the default view. Month or quarter.

  defaultView: 'month'

7. Set the default date.


8. Close the date picker after selection.


9. Callback functions.

  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.