Get started

						npm install datepickk
						bower install datepickk
var datepicker = new Datepickk();
/*And some more stuff down there...*/


31 +

31 +

10 +

Not tested yet

Take a tour

startDate Setting Go up

						//Type: Date
//Default: null -> takes current date
//Reset: assign non date object to reset default

/*Set startDate*/
datepicker.startDate = new Date(2000,0,1);

/*Get startDate*/

Each time you show the calendar this date will show up!

minDate Setting Go up

						//Type: Date
//Default: null -> no limit
//Reset: assign non date object to reset default

/*Set minDate*/
datepicker.minDate = new Date(2015,0,1);

/*Get minDate*/

maxDate Setting Go up

						//Type: Date
//Default: null -> no limit
//Reset: assign non date object to reset default

/*Set maxDate*/
datepicker.maxDate = new Date(2015,11,31);

/*Get maxDate*/

currentDate | setDate (alias) Setting Go up

						//Type: Date
//Default: current date

/*Set currentDate*/
datepicker.currentDate = new Date(2015,3,1);
datepicker.setDate = new Date(2015,3,1)

/*Get currentDate*/

Use me to jump to spesific dates

maxSelections Setting Go up

						//Type: Number
//Default: null -> infinite
//Reset: assign non number object to reset default

/*Set maxSelections*/
datepicker.maxSelections = 3;

/*Get maxSelections*/

If you don't want to let the user select anyting you should use locked instead. Check it out

months Setting Go up

If you need to show multiple months at once this feature is perfect for you!

						//Type: Number (must be > 0)
//Default: 1

/*Set maxSelections*/
datepicker.months = 2;

/*Get months*/

Showing multiple months at once needs much space! Be careful, the pretty looking datepicker might get ulgy

title Setting Go up

						//Type: String
//Default: null
//Reset: assign non string object to reset default

/*Set title*/
datepicker.title = 'Choose date:';

/*Get title*/

button Setting Go up

						//Type: String
//Default: null
//Reset: assign non string object to reset default

/*Set button*/
datepicker.button = 'OK';

/*Get button*/

lang Setting Go up

You can change the language and the day the week starts by changing the lang property.
By default there are 5 languages: English (en), Norwegian (no), German (de), Swedish (se), Russian (ru).
Add your own languages to the 'languages' property in the source code.

						//Type: String
//Default: 'en'

/*Set lang*/
datepicker.lang = 'no';

/*Get lang*/

weekStart Setting Go up

You can change when the week should start by setting the weekStart property to a number between 0 - 6 where 0 is sunday and 6 is saturday. The languages have the weekStart predefined. So if you choose norwegian it will automatically start the week on monday if no weekStart has been set.

						//Type: Number
//Default: from language

/*Set weekStart*/
datepicker.weekStart = 1; //week starts at monday

/*Get weekStart*/

range Setting Go up

Do you need to select a range of two dates? Use this

						//Type: Boolean
//Default: false

/*Set range*/
datepicker.range = true;

/*Get range*/

This one overwrites the maxSelections property with 2.

container Setting Go up

Do you not like modals? Don't worry you can place the datepicker in a container you want.

						//Type: String(selector) or HTMLElement(no jQuery bro! You can do better;)
//Default: document.body

/*Set container*/
datepicker.container = document.querySelector('#sampleContainer');

/*Get container*/

I'm pretty sure you will like inline aswell

Hi! My name is #sampleContainer

inline Setting Go up

If you set a container and set inline true it will always be visible and you don't need to show it first

						//Type: Boolean
//Default: false

/*Set inline*/
datepicker.inline = true;

/*Get inline*/

You should set container first

Hi! My name is #inlineContainer

closeOnSelect Setting Go up

If a date gets selected the datepicker will close

						//Type: Boolean
//Default: false

/*Set closeOnSelect*/
datepicker.closeOnSelect = true;

/*Get closeOnSelect*/

This is not the same as closeOnClick

closeOnClick Setting Go up

If someone clicks outside the datepicker it closes

						//Type: Boolean
//Default: true

/*Set closeOnClick*/
datepicker.closeOnClick = false;

/*Get closeOnClick*/

This is not the same as closeOnSelect

tooltips Setting Go up

Put some notes on it

						//Type: Object or Array of Objects (look how the object is built in the other code block)
//Default: null

/*Set tooltips*/
datepicker.tooltips = [tooltip,tooltip2];

/*Get tooltips*/
						/*tooltip object*/

var tooltip = {
date: new Date(2015,6,1),
text: 'Tooltip'

var tooltip2 = {
date: new Date(2015,6,4),
text: 'Tooltip 2'

Just put multiple tooltip objects in an array if you have more than 1 tooltip object

highlight Setting Go up

This is a nice way to mark stuff in the datepicker

						//Type: Object or Array of Objects (look how the object is built in the other code block)
//Default: null

/*Set highlight*/
datepicker.highlight = [highlight,highlight2];

/*Get highlight*/
						/*highlight object*/

/*Single daterange*/
var highlight = {
start: new Date(2015,6,13),
end: new Date(2015,6,19),
backgroundColor: '#3faa56',
color: '#ffffff',
legend: 'CSS Conf.'//this is optional

/*highlight with multiple dateranges*/
var highlight2 = {
dates: [
start: new Date(2015,6,6),
end: new Date(2015,6,7)
start: new Date(2015,6,22),
end: new Date(2015,6,23)
backgroundColor: '#E99C00',
color: '#ffffff',
legend: 'Holidays'//this is optional

Just put multiple highlight objects in an array if you have more than 1 highlight object

disabledDays Setting Go up

You can disable spesific days

						//Type: Number(0-6) or Array of Numbers(0-6)
//Default: null

/*Set disabledDays*/
datepicker.disabledDays = 0;

/*Get disabledDays*/

This is not the same as disabledDates

disabledDates Setting Go up

You can disable spesific days

						//Type: Date or Array of Dates
//Default: null

/*Set disabledDates*/
datepicker.disabledDates = [new Date(),new Date(2015,6,20)];

/*Get disabledDates*/

This is not the same as disabledDays

today Setting Go up

Show little line on todays date

						//Type: Boolean
//Default: true

/*Set today*/ = true;

/*Get today*/

This is not the same as currentDate

daynames Setting Go up

Show/hide daynames line

						//Type: Boolean
//Default: true

/*Set daynames*/
datepicker.daynames = false;

/*Get daynames*/

fullscreen Setting Go up

Shows the datepicker fullscreen

						//Type: Boolean
//Default: false

/*Set fullscreen*/
datepicker.fullscreen = true;

/*Get fullscreen*/

This feature is not made for inline or container

locked Setting Go up

Locks the datepicker (viewonlymode)

						//Type: Boolean
//Default: false

/*Set locked*/
datepicker.locked = true;

/*Get locked*/

selectedDates Status Go up

Returns all selected dates

						/*Get selectedDates*/

isOpen Status Go up

						/*Get isOpen*/

show() Function Go up

						/*Show datepicker*/{

You can pass all settings and callbacks as object

hide() Function Go up

						/*Hide datepicker*/

selectDate( Date, ignoreOnSelectEvent ) Function Go up

						//Type: Date
datepicker.selectDate(new Date());

unselectDate( Date, ignoreOnSelectEvent ) Function Go up

						//Type: Date
datepicker.unselectDate(new Date());

unselectAll( ignoreOnSelectEvent ) Function Go up

						//Unselect all

onConfirm Callback Go up

						//Type: Function
datepicker.onConfirm = function(){

The context(this) is the datepicker object

onClose Callback Go up

						//Type: Function
datepicker.onClose = function(){

The context(this) is the datepicker object

onSelect Callback Go up

						//Type: Function
datepicker.onSelect = function(checked){
var state = (checked)?'selected':'unselected';
alert(this.toLocaleDateString() + ' ' + state)

The context(this) is the date. The first parameter is the un-/selected state as Boolean

onNavigation Callback Go up

						//Type: Function
datepicker.onNavigation = function(){
alert('Navigation happened!')

The context(this) is the datepicker object.