Small Week Picker With jQuery And Moment.js - week-picker

A very small jQuery week picker plugin that enables the user to pick a week (or multiple weeks) from a calendar popup (year view).

How to use it:

1. Add the necessary jQuery library and moment.js to the html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Download and add the jQuery week-picker plugin's files to the document.

<script src="week-picker.js"></script>
<link rel="stylesheet" href="week-picker.css">

3. Setup the week picker with plain HTML markups.

<div class="week-picker" 
     data-mode="multi">
</div>

4. If you want to select multiple weeks:

<div class="week-picker" 
     data-mode="multi">
</div>

5. To create your own localization strings:

case "fr":
  loc = {
    OPEN_PICKER_SINGLE: "...",
    OPEN_PICKER: "...",
    CLEAR: "...",
    NUM_SELECTED: "$num_selected ",
    WEEK_SELECTED: "$weeknum, $year"
}

<div class="week-picker" 
     data-local="fr">
</div>

6. Events:

// Multi-mode example (default)
$(".week-picker").on("change", function (event) {
  console.log(event.detail) // { mode: "select", range: ["2017-06-19", "2017-06-26", "2017-07-03"] }
})

// Single-mode example
$(".week-picker").on("change", function (event) {
  console.log(event.detail) // { mode: "deselect", range: ["2017-06-12"] }
})

Change log:

2017-10-14

• Added events

---

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