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")
    });
})

Introduction: