jquery.picky.js

Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

Features

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

How does it work?

Picky piggybacks on the Date object in Javascript. Each time a select value changes, the plugin will verify the selected date is a valid Date object. If not, it will decrement the day value until a valid date within the selected month and year is found.

Installation

• Download the plugin from https://github.com/mokolabs/jquery.picky.js
• Copy jquery.picky.js into your javascript directory
• Add jquery.picky.js to your document head

Usage

Sample markup

By default, jquery.picky.js uses a date class selector, with three nested select tags that use year, month, and day class selectors:

The date class can be customized. The year, month, and day classes are required but can be ordered in any way, provided they remain nested under the primary date class (or its customized equivalent).

Here's a full markup example:

  

    
      2000
      2001
      2002
      2003
      2004
      2005
      2006
      2007
      2008
      2009
      2010
      2011
      2012
    
    
      Jan
      Feb
      Mar
      Apr
      May
      Jun
      Jul
      Aug
      Sep
      Oct
      Nov
      Dec
    
    
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
    
  

Demo

View online Picky demo

(You can also view this demo locally by opening demo.html in your browser.)

FAQ

Q. Do I have to use select tags for date selectors?

A. Yes. Picky is designed for use with select tags. If you need something more complex, Picky isn't right for you.

Q. Can I use Picky with dates before the year 2000?

A. Yes. The dates above (and in the demo) are just examples. You are welcome to define your own year ranges, either manually or programmatically if you're using a web framework to generate your views.