Configurable Week Picker Plugin With jQuery UI - Weekpicker

Configurable Week Picker Plugin With jQuery UI - Weekpicker

A simple yet configurable jQuery week picker plugin for easily selecting weeks from a calendar popup. Based on jQuery UI datepicker widget. 

More features:

  • Displays the current week number.
  • Custom date format.
  • Allows to set start day of the week.

How to use it:

1. Include jQuery and jQuery UI on the page.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">

2. Create a normal input field to accept the week selection.

<input type="text" id="weekPicker">

3. Call the function on the input field to initialize the week picker.

$( "#weekPicker" ).weekpicker();

4. Default configuration options.

$( "#weekPicker" ).weekpicker({
  // set start day of the week
  firstDay: 1,
  // custom date format
  dateFormat: "dd/m/yy",
  // shows other months
  showOtherMonths: true,
  // allows to select other months
  selectOtherMonths: true,
  // shows the current week number
  showWeek: true
  
});

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

  • Publication date: 01.11.2017
  • Source