Datable

A lightweight, customizable, bootstraps-friendly jQuery plugin to properly format dates in inputs and verify that the date is valid.

Demo

Full Date

<input type="datable" />


By simply adding type="datable" to any input field, datable.js will transform your plain ol' input field into a datable input!

<input type="datable" data-datable="mmddyy" />

<input type="datable" data-datable="ddmmyyyy" />

Month & Year

<input type="datable" data-datable="mmyyyy" />

<input type="datable" data-datable="yymm" />

Alternate Dividers

<input type="datable" data-datable="mmddyyyy" data-datable-divider=" - " />

<input type="datable" data-datable="ddmmyyyy" data-datable-divider="-" />

Era Validation (Does not support 2-digit year)

Uses data-datable-era and data-datable-era2 to create two points in time. If data-datable-era2 is left blank then the second point in time is the current date.

Two formats are accepted. If you want to select a percise date, enter in "yyyy,mm,dd". If you want to enter in a point of time relative to the current date, enter in an array "[yyyy,mm,dd]". The array can contain positive or negative numbers and be any length. The array MUST have all three values set.

<input type="datable" data-datable-era="2000,1,1" />

<input type="datable" data-datable-divider="/" data-datable-era="1999,12,31" data-datable-era2="1990,1,1" />

 

<input type="datable" data-datable="yyyymmdd" data-datable-era="[0,0,30]" />

<input type="datable" data-datable="ddmmyyyy" data-datable-era="[-10,0,0]" data-datable-era2="[-20,0,0]" />

Future Features
  • More default values for era validation
  • Auto-populating dates into the fields
  • Moment.js support
  • Cross-field validation (is one date before or after anoter, etc.)

Install

After downloading datable, just include the file right above the closing <body> tag in your HTML.

<script type="text/javascript" src="datable.min.js"></script>

Then initialize the plugin:

$.datable('init');

That's all!

 

If you want to clear ALL the datable fields:

$.datable('clearAll');

 

And if you want to deinitialize the plugin (this does not clear the values):

$.datable('deinit');

Download

Available on github!