Thanks to use BeatPicker

You can see online demos here.Download latest version here.Browsers support and infos here

Dependencies:

  • jQuery 1.8.x.js+
  • BeatPicker.js
  • BeatPicker.css

How to use BeatPicker

first include:


<link rel="stylesheet" href="css/BeatPicker.css"/>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/BeatPicker.js"></script>
You have two options to create BeatPicker:
    Declarative syntax using data api:

    Read more about declarative syntax here

    
<input type="text" data-beatpicker="true">
    Programmatically syntax using new operator: 
    
var options = {dateInputNode:$(".my-input")}
var instance = new BeatPicker(options)

You can use declarative syntax to get rid of coding javascript to initiate your picker all of options available for declrative syntax list below:

Get instance of date picker:

if you define an id for your date picker this id will bind to global window object and you can access your picker if not BeatPicker will allocate an unique id for instantiated date pickers and add an attribute to date input node to specify its id 

<input type="text" data-beatpicker="true" data-beatpicker-id="myDatePicker"/>
now you have a global reference to your picker using myDatePicker

Position:

You can apply position options using this format. 

<input type="text" data-beatpicker="true" data-beatpicker-position="['right','bottom']">

Disabling rule:

You can apply disabling rules using this format.multiple rule using comma separated object pass. 

<input type="text" data-beatpicker="true" data-beatpicker-disable="{from:[2014 , 2 , 2],to:[2014 , 3 , 7]},{from:[2014 , 5 , 3],to:[2014 , 7 , 4]}">

Range:

To enable range mode you just have to pass a true to 'data-beatpicker-range' if you want range disable selection to available using comma and pass another true 

<input type="text" data-beatpicker="true" data-beatpicker-range="true,true">

Disabling rule:

You can apply disabling rules using this format. 

    <input type="text" data-beatpicker="true" data-beatpicker-disable="{from:[2014 , 2 , 2],to:[2014 , 3 , 7]},{from:[2014 , 5 , 3],to:[2014 , 7 , 4]}"]">

Date Format:

You can apply date format using this format.comma separated properties:first format of your desire second your date separator. 

<input type="text" data-beatpicker="true" data-beatpicker-format="['YYYY','MM','DD'],separator:'/'" />

Disabling module:

You can disable module listed here using comma separated props.everything you mentioned in this data api will be disable. 

<input type="text" data-beatpicker="true" data-beatpicker-module="today,clear" />

Objective options

After all if you need any options that is not available in declarative syntax you can create a global object and pass it to BeatPicker like this.

Javascript


customOptions = {
    labels: {
       today: "Tod",
       gotoDateInput: "Insert your date",
       gotoDateButton: "Set",
       clearButton: "Wipe"
    }
}

Markup


<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']"  data-beatpicker-extra="customOptions"/>
Options in BeatPicker categorized and decoupled from main stream for related topics like :'view,selectionRule,modules,...'
You can create an object that represent your options and pass it to BeatPicker constructor first argument.like: 

var options = {
    view : {
        position:['*','*']
    },

    disablingRule : [ {from:[2014,1,1] , to :[2014,2,2]} , {from:'*' , to :['*',2,'*']} ]
    }

var myInstance = new BeatPicker(options);
Mixed HTML element|jQuery object Null
Date input html element to binding date picker on it.
Array jQuery object Null
When date picker getting initiated this property is a reference to jQuery object of beatpicker main html node.
Array Primitive array ["Su" , "Mo" , "Tu" , "We" , "Th" , "Fr" , "Sa"]
Brief days of the week alias using in date picker.
Array Primitive array []
Full days of the week alias using in date picker.
Array Primitive array ["Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"]
Brief months of the year alias using in date picker.
Array Primitive array ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
Full months of the year alias using in date picker.
Mixed Array|String|Object Now system time base local GMT
Object Date Object Exactly equal to startDate
All of date changing in date picker is based on this property and it represent current state of date in date picker. Every time you seek around date picker and change date this property will set to correspond date.
Object BeatPicker Object 

{
    separator: "-",
    format: ["YYYY" , "MM" , "DD"]
}
Date formatting object all formatting is base on this object
String Primitive string -
A string that separate date format you can use any separator that you feel its satisfy your needs like : - , / , SEP , ...
Array Primitive array ["YYYY" , "MM" , "DD"]
An array that input date will format base on that. Options You can use different formatting below:
Object BeatPicker object 

modules: {
    header: true,
    footer: true,
    daysOfTheWeek: true,
    navBar: true,
    today: true,
    gotoDate: true,
    icon: true,
    clear: true
}
An object that define enable modules using in date picker.
Boolean Primitive boolean true
Header module of date picker it wrap navBar module also then when you disable this you have to expect,navBar module will getting disabled too
Boolean Primitive boolean true
Footer module of date picker it wrap gotoDate and today module also then when you disable this you have to expect,gotoDate and today will getting disabled too
Boolean Primitive boolean true
A module that represent alias of days in a week.
Boolean Primitive boolean true
Date picker take advantage of navbar to change current date and switch to other unity like : days,months,years. when you change date using navbar components it aware you with 'change' event if you registered on it.also it set currentDate property to current changed date
Boolean Primitive boolean true
A button that go to current date of system.
Boolean Primitive boolean true
A module that take string input and change the currentDate in following rules:
Boolean Primitive boolean true
Icon inside date inputs.
Boolean Primitive boolean true
Clear selected date both in range and single mode also fire 'clear' event.
Object BeatPicker object 

selectionRule: {
    single: true,
    range: false,
    rangeDisableSelect: false
}
An object that define a selection rule switch between single and range mode.
Boolean Primitive boolean true
Initiate BeatPicker in single date input mode it has inverse relation with range property.
Boolean Primitive boolean true
Initiate BeatPicker in rang date input mode it has inverse relation with single property. If this property set to 'true' another input will generate and append across default input to represent from date input.
Boolean Primitive boolean false
By default if you want select between some range and on that range you defined a disable rule that make at least one date to getting disable this range cannot be apply to input eg:

Assume : from : 2014-01-02 , to:2014-01-04 is disable
from:2014-01-01 , to:2014-01-07 is invalid range because of applied disabling rule.you can override this behaviour by set this field to true.

Object BeatPicker object 

view: {
    display: "days",
    alwaysVisible: false,
    position: ["bottom" , "left"],
    showOn: "click",
    hideOn: "click",
    isInputIsReadonly: true,
    iconImage: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAANAA0DASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABgQF/8QAIxAAAQQBBAIDAQAAAAAAAAAAAQIDBBEFABIhQQYxExQiUf/EABQBAQAAAAAAAAAAAAAAAAAAAAX/xAAbEQACAgMBAAAAAAAAAAAAAAABIQAEFUFhMf/aAAwDAQACEQMRAD8Af5PxCZHiwYeRzUBuMwHPqoU0sJRdqXzVXwa9cCheqT4dl8zj4RXm4smIy3sjflwbU3yOe+K6raB1p/k8VFyTjJl/MoNhaQhLhSk7hRsD2a761lePSnV4dCo+1ptLzraUrtZoKuyomySSST/TpHK2EwuDfsOxddovp1P/2Q=="
}

Using this object to control view of date picker.
String Primitive string "days" By default first view of date picker set to days.you can change this behaviour using following options:

Options

Boolean Primitive boolean false
Showing date picker always or not
Array String | Integer ["bottom" , "left"]
Position date picker relative to date input.you can use following options to position as your desire:

Options:

Note:'*' means auto
String Primitive string 'click'
Show date picker on this event.
String Primitive string 'click'
hide date picker on this event of document.
Boolean Primitive boolean true
Is date input have to be read only or note?
String Base64 encoded image data | Image src
pass a base64 encoded image data or src of image to insert your desire icon inside of date input
Object BeatPicker object 

labels: {
    today: "Today",
    gotoDateInput: "YYYY/MM/DD",
    gotoDateButton: "GO",
    clearButton: "Clear"
}

Labels used around date picker.
String Primitive string 'Today'
Today button label.
String Primitive string 'YYYY/MM/DD' Placeholder of gotoDate module.
String Primitive string 'GO'
Button label of gotoDate module.
String Primitive string 'Clear'
Clear button label
Array Object []
Useful option for disabling specific range.you can use following options to satisfy your needs (all option explained as example):

Options:

Note: date format of array is : 'YYYY,MM,DD'
Eventing in BeatPicker implemented as pub-sub messaging system.all things you have to do is
first get appropriate instance of BeatPicker object then subscribe on a desired topic and gets notify when any news is out there here is simplest form example: 

<input type="text" data-beatpicker="true" data-beatpicker-id="myDatePicker"/>



myDatePicker.on("select", function (data) {
   console.log(arguments);
});
Object
This event will fire when a date selected both in range or single mode.
if in range mode you will get specific callback object argument that have info about both from and to date selection.
otherwise you will get simple selected date object in single mode.
Object
Any change in date will notify client using this event. Having currentDate in object argument of callback.
NONE
Fire when date picker getting show.no arguments in callback.
NONE
Fire when date picker getting show.no arguments in callback.
Object
This event will fire when a date selected both in range or single mode.
if in range mode you will get specific callback object argument that have info about both from and to date selection.
otherwise you will get simple selected date object in single mode.
None Undefined
Reset selected date programmatically.
Mixed String | Date object Undefined
Set currentDate of date picker programmatically.
Format:
Any date string that Date.parse will accept.using this reference to see ISOs Date.parse().
Also any Date object is acceptable as argument.
Mixed String | Date object Undefined
Select a date of date picker programmatically.
Format:
Any date string that Date.parse will accept.using this reference to see ISOs Date.parse().
Also any Date object is acceptable as argument.
Mixed String | Date object , Mixed String | Date object Undefined
Select range of date from start to end programmatically.
Format:
Any date string that Date.parse will accept.using this reference to see ISOs Date.parse().
Also any Date object is acceptable as argument.
Mutli and Mixed (HTML element , Object) Undefined
Set beat picker position relative to specific custom selected element.
Position object:
You can use plain object like '{x:2 , y:3}' in px unit set you desired position relative to left corner of any element.
None Undefined
Show date picker programmatically.
None Undefined
Hide date picker programmatically.
None Undefined
Will go today.
None Boolean
Check if date picker is hide or not.
Mixed (String | Date object) Boolean
Check if specific date match to your defined disabling rule or not. Format:
Any date string that Date.parse will accept.using this reference to see ISOs Date.parse().
Also any Date object is acceptable as argument.
None Array Get array of jQuery objects.if in range mode second indice of array will be to input node.
None Null | Date object
In range mode you will get start date of the range using this method.
None Null | Date object
In range mode you will get end date of the range using this method.
None Null | Date object
In single mode you get selected date using this method.
None Date object Get current date of date picker.