inline week day picker - Download Inline Week Day Picker Plugin - jQuery weekdays

Download Inline Week Day Picker Plugin – jQuery weekdays

By Posted on

This time I will share jQuery Plugin and tutorial about Inline Week Day Picker Plugin – jQuery weekdays, hope it will help you in programming stack.

inline week day picker - Download Inline Week Day Picker Plugin - jQuery weekdays
File Size: 6.94 KB
Views Total: 5569
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

A small yet configurable week day picker plugin that enables the visitor to select the day(s) of the week from a group of inline buttons.

How to use it:

1. Import jQuery library together with the JavaScript jquery-weekdays.js and stylesheet jquery-weekdays.css into the html file.

view source
1 <link href="src/jquery-weekdays.css" rel="stylesheet" />
2 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
3         integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
4         crossorigin="anonymous">
5 </script>
6 <script src="src/jquery-weekdays.js"></script>

2. Create a container element to place the week day picker.

view source
1 <div id="weekdays"> </div>

3. The JavaScript to generate a basic week day picker on the page.

view source
1 $(function(){
2   $('#weekdays').weekdays();
3 });

4. Define an array of pre-selected days. 0 = Sunday.

view source
1 $(function(){
2   $('#weekdays').weekdays({
3     selectedIndexes: [0, 2, 4, 6]
4   });
5 });

5. Enable the single selection mode.

view source
1 $(function(){
2   $('#weekdays').weekdays({
3     singleSelect: true
4   });
5 });

6. Default CSS selectors.

view source
1 $(function(){
2   $('#weekdays').weekdays({
3     listClass: 'weekdays-list',
4     itemClass: 'weekdays-day',
5     itemSelectedClass : 'weekday-selected'
6   });
7 });

7. Localize the week day picker.

view source
1 $(function(){
2   $('#weekdays').weekdays({
3     days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"]
4   });
5 });

8. Get the selected day(s).

view source
1 // returns ["0", "1", "2"]
2 $('#weekdays').selectedIndexes();
3  
4 // OR
5  
6 // returns ["Sun", "Mon", "Tue"]
7 $('#weekdays').selectedDays();

Changelog:

2019-07-05

  • fixing a bug in pre-selected items

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

source : jquery.net

Related posts: