Press "Enter" to skip to content

[Year/Month/Day] Date Picker Validation | jquery.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 date 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.

date month year dropdown html, jquery datepicker with month and year selection, date month year dropdown, datepicker month and year only, month and year picker in html

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 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *