week-picker

Week-picker is an ISO-8601 picker for easily selecting weeks.

Requirements

• jQuery
• moment.js

Initialize a picker

All elements with the class week-picker are automatically initialized on page load.

For manual initialization, $(elem).weekPicker("init") initialises an element.

<div class="week-picker"></div> <!-- Use defaults -->
<div class="week-picker" data-locale="se"></div> <!-- Swedish locale -->
<div class="week-picker" data-mode="single"></div> <!-- Single mode -->

Localization is supported for se and en. Defaults to en.

The possible modes are multi and single. Defaults to multi.

Usage

Value

$(elem).weekPicker("value") // [ "2017-01-09", "2017-02-13", "2017-02-27", "2017-03-20", "2017-05-29", ... ]

Returns the date of every weeks monday in format YYYY-MM-DD

Clear

You can clear the picker programmatically (same as pressing "clear").

$(elem).weekPicker("clear")

Events

When the picker is changed, a "change" event is dispatched. event.details contains data about the change, like the range selected and the mode (select or deselect).

// 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"] }
})

Demo

Here