Introduction:

Many thanx to using BeatPicker.here you can see functionality of BeatPicker in declrative syntax mode.

Simple

simple initial

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

Position

right bottom

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



right auto

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



right top

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



auto position

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



custom position realtive to input top left corner

<input type="text" data-beatpicker="true" data-beatpicker-position="[10,50]">

Date formatting

simple format

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



simple format and custom separator

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



custom format with custom separator

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

Disabling dates

from date to date disable

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,1],to:[2014,3,1]}"/>



disable any dates after 1 january of 2014

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,1],to:'>'}"/>



disable any dates before 1 january of 2014

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,1],to:'<'}"/>



disable february of 2014

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,1],to:[2014 , 2 , '*']}"/>



disable 2nd month of any years from 1 january of 2014

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,1],to:['*' , '2' , '*']}"/>



disable 2nd day of 2nd month of any year from 1 january of 2014

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,1],to:['*' , '2' , '2']}"/>



disable any date of 2014 after 6 january of 2014

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:[2014,1,6],to:['2014' , '*' , '*']}"/>



disable 2nd month of any year from any date

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:'*',to:['*' , '2' , '*']}"/>



disable 2nd day of any month of any year from any date

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:'*',to:['*' , '*' , 2]}"/>



disable 2nd day of 2nd month of any year from any date

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:'*',to:['*' , 2 , 2]}"/>



multiple disable rules note that first to last rule have high priority

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



disable all dates

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from:'*',to:'*'}"/>

 

Range

simple

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

    


simple but can select disable dates in range

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-disable="{from :[2014,3,16] , to:[2014,4,8]}" data-beatpicker-range="true,true">

    

Disable module

Disable go to date

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']"  data-beatpicker-module="gotoDate"/>



Disable clear button and today button

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']"  data-beatpicker-module="today,clear" />



Disable header and footer

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']"  data-beatpicker-module="header,footer" />



Disable icon

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']"  data-beatpicker-module="icon" />

Data structure options object

Define a global object and assign it to input like this
Markup:

<input type="text" data-beatpicker="true" data-beatpicker-extra="customOptions"/>

Javascript:

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

Access to date picker object

Define an id to get instantiated date picker

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

Buttons markup

<button class="show-picker">Show</button>
<button class="hide-picker">hide</button>

Buttons markup

$('.show-picker').click(function(e){
    e.stopPropagation();
    myPicker.show();
});
$('.hide-picker').click(function(e){
    e.stopPropagation();
    myPicker.hide();
})

Event handling

Handling event and show correspond status

<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']"  data-beatpicker-id="myDatePicker"/>

status box markup

<div class="status-box"></div>

status box javascript

$(document).ready(function(){

    var statusGenerator = function (text) {
        var statusElem = $(".status");
        var child = $("<span></span>").text(text);
        statusElem.append(child);
    };

    myDatePicker.on("select", function (data) {
        statusGenerator(data.string + " selected")
    });

    myDatePicker.on("change", function (data) {
        statusGenerator("Date picker changed current date: "+data.string);
    });

    myDatePicker.on("show", function () {
        statusGenerator("Date picker show")
    });

    myDatePicker.on("clear", function (data) {
        statusGenerator("Date picker cleared. cleared date: " + data.string)
    });

    myDatePicker.on("hide", function () {
        statusGenerator("Date picker hide")
    });
})