Year/Month/Day Picker With Date Validation - jQuery Picky.js
File Size: | 5.4 KB |
---|---|
Views Total: | 1831 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Picky.js is a jQuery plugin that converts year/month/day select boxes into a user-friendly date picker with date validation support.
Features:
- Automatically correct the number of days in the month.
- Automatically recognize leap years.
- Allows multiple date pickers on the same page.
- If the selected day is invalid, move to the last valid day.
- Well-suited for DOB picker.
How to use it:
1. Insert jQuery library and the jQuery Picky.js plugin into the document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.picky.js"></script>
2. Create year/month/day select boxes for the date picker.
<div class="date"> <select class="year"> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> </select> <select class="month"> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> <select class="day"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div>
3. Call the function on the top container and the plugin will take care of the rest.
$(document).ready(function () { $(".date").picky(); });
This awesome jQuery plugin is developed by mokolabs. For more Advanced Usages, please check the demo page or visit the official website.