[Year/Month/Day] Date Picker Validation | jquery.picky.js

jquery-date-picker-picky-js

jquery.picky.js is a jQuery plug-in that provides client-side date validation when entering dates with checkmarks. Picky.js is a jQuery plugin that converts year/month/day tick boxes into an easy-to-use date picker with data validation support.

Instead of giving users annoying messages about invalid dates, Picky smoothly prevents users from entering bad dates in the first place. It does this by automatically updating the day selection options with the correct number of days for the specified month and year.

How does it work?

Picky on the history object in javascript. Each time the selection value changes, the plugin will verify that the specified date is a valid date object. If not, it will decrease the day value until a valid date is found within the specified month and year.

Features:

  • Automatically correct the number of days of the month.
  • Automatically recognize leap years.
  • The picker allows multiple dates on the same page.
  • If the specified day is invalid, move to the last valid day.
  • Well suited for DOB beak.

How to make use of it:

1. Insert the jQuery library and the jQuery Picky.js plugin into the doc.

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

2. Create year/month/day choose bins for the date picker.

<div class="date">
  <select class="year">
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</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 maintain the remaining.

$(document).ready(function () {
  $(".date").picky();
});

Year/Month/Day Picker With Date Validation, jquery.picky.js Plugin/Github, jquery datepicker validation date range, jquery month and year picker


See Demo And Download

Official Website(mokolabs): Click Here

This superior jQuery/javascript plugin is developed by mokolabs. For extra Advanced usage, please go to the official website.