npm install datepickk
bower install datepickk
//Initialize
var datepicker = new Datepickk();
/*And some more stuff down there...*/
or
31 +
31 +
10 +
Not tested yet
//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*/
console.log(datepicker.startDate);
Each time you show the calendar this date will show 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*/
console.log(datepicker.minDate);
//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*/
console.log(datepicker.maxDate);
//Type: Date
//Default: current date
/*Set currentDate*/
datepicker.currentDate = new Date(2015,3,1);
//OR
datepicker.setDate = new Date(2015,3,1)
/*Get currentDate*/
console.log(datepicker.currentDate);
Use me to jump to spesific dates
//Type: Number
//Default: null -> infinite
//Reset: assign non number object to reset default
/*Set maxSelections*/
datepicker.maxSelections = 3;
/*Get maxSelections*/
console.log(datepicker.maxSelections);
If you don't want to let the user select anyting you should use locked instead. Check it out
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*/
console.log(datepicker.months);
Showing multiple months at once needs much space! Be careful, the pretty looking datepicker might get ulgy
//Type: String
//Default: null
//Reset: assign non string object to reset default
/*Set title*/
datepicker.title = 'Choose date:';
/*Get title*/
console.log(datepicker.title);
//Type: String
//Default: null
//Reset: assign non string object to reset default
/*Set button*/
datepicker.button = 'OK';
/*Get button*/
console.log(datepicker.button);
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*/
console.log(datepicker.lang);
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*/
console.log(datepicker.weekStart);
Do you need to select a range of two dates? Use this
//Type: Boolean
//Default: false
/*Set range*/
datepicker.range = true;
/*Get range*/
console.log(datepicker.range);
This one overwrites the maxSelections property with 2.
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*/
console.log(datepicker.range);
I'm pretty sure you will like inline aswell
Hi! My name is #sampleContainer
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*/
console.log(datepicker.inline);
You should set container first
Hi! My name is #inlineContainer
If a date gets selected the datepicker will close
//Type: Boolean
//Default: false
/*Set closeOnSelect*/
datepicker.closeOnSelect = true;
/*Get closeOnSelect*/
console.log(datepicker.closeOnSelect);
This is not the same as closeOnClick
If someone clicks outside the datepicker it closes
//Type: Boolean
//Default: true
/*Set closeOnClick*/
datepicker.closeOnClick = false;
/*Get closeOnClick*/
console.log(datepicker.closeOnClick);
This is not the same as closeOnSelect
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*/
console.log(datepicker.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
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*/
console.log(datepicker.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
You can disable spesific days
//Type: Number(0-6) or Array of Numbers(0-6)
//Default: null
/*Set disabledDays*/
datepicker.disabledDays = 0;
/*Get disabledDays*/
console.log(datepicker.disabledDays);
This is not the same as disabledDates
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*/
console.log(datepicker.disabledDates);
This is not the same as disabledDays
Show little line on todays date
//Type: Boolean
//Default: true
/*Set today*/
datepicker.today = true;
/*Get today*/
console.log(datepicker.today);
This is not the same as currentDate
Show/hide daynames line
//Type: Boolean
//Default: true
/*Set daynames*/
datepicker.daynames = false;
/*Get daynames*/
console.log(datepicker.daynames);
Shows the datepicker fullscreen
//Type: Boolean
//Default: false
/*Set fullscreen*/
datepicker.fullscreen = true;
/*Get fullscreen*/
console.log(datepicker.fullscreen);
This feature is not made for inline or container
Locks the datepicker (viewonlymode)
//Type: Boolean
//Default: false
/*Set locked*/
datepicker.locked = true;
/*Get locked*/
console.log(datepicker.locked);
Returns all selected dates
/*Get selectedDates*/
console.log(datepicker.selectedDates);
/*Get isOpen*/
console.log(datepicker.isOpen);
/*Show datepicker*/
datepicker.show({
today:false
});
You can pass all settings and callbacks as object
/*Hide datepicker*/
datepicker.hide();
//Type: Date
datepicker.selectDate(new Date());
//Type: Date
datepicker.unselectDate(new Date());
//Unselect all
datepicker.unselectAll();
//Type: Function
datepicker.onConfirm = function(){
alert('onConfirm')
};
The context(this) is the datepicker object
//Type: Function
datepicker.onClose = function(){
alert('onClose')
};
The context(this) is the datepicker object
//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