Here is a lightweight and simple jQuery week day picker plugin to select a day in input. It uses jQuery UI to get better format. The plugin supports both English and Arabic days to pick. It is useful to select/insert a single day.
Moreover, the plugin “dayPicker”, can be fully customize with additional CSS accordion to your needs.
Plugin Overview
| Plugin: | dayPicker |
| Author: | Ahmed Moosa |
| Licence: | MIT Licence |
| Published: | January 17, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.9.1 or Latest version and jQuery UI 1.2.1 or Latest version, |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 150 KB |
How to Use jQuery Week Day Picker
1. After downloading this project, include the day picker’s all necessary assets (from project directory) into your HTML document.
<link href="css/le-frog/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.js" type="text/javascript"></script> <script src="js/dayPicker-Plugin.js" type="text/javascript"></script>
2. After that, create an input element in which picked day will be insert.
<input type="text" name="name" class="day" />
3. Finally, initialize the plugin in jQuery document ready function.
$(document).ready(function () {
$(".day").dayPicker({ lang: 'en' });
});
4. To create Arabic day picker, define “ar” in lang option.
$(".day").dayPicker({ lang: 'ar' });
Similar Code Snippets:
JavaScript Elapsed Time Between Two Dates- Persian Datepicker in JavaScript
- Analog And Digital Clock Design Using HTML CSS
- Scroll Datepicker in JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.