A simple datetime picker built with knockout.
- Only dependency is Knockout.js
- Lightweight, ~8kb JS, ~4kb CSS
- Simple, Terse, Legible (looking at any other datepicker)
- Supports Components, Bindings, and a plain JS API
- Cross browser compatible. Thanks, Knockout!
$ npm install
$ npm run-script bower # To download Knockout if needed
$ npm run-script build # Compiles source
$ npm run-script build-watch # Compiles and watches source for changesko-calendar depends on Knockout.js 3.2.0+
<head>
<link href="ko-calendar.min.css" rel="stylesheet" type="text/css">
<script src="knockout.js" type="text/javascript"></script>
<script src="ko-calendar.min.js" type="text/javascript"></script>
</head>ko-calendar supports Components and bindings.
<div data-bind="component: { name: 'calendar', params: opts }"></div><div data-bind="calendar: opts"></div><input type="text" data-bind="calendar: opts">ko.calendar(document.getElementById('calendar'), opts);var opts = {
value: ko.observable(),
current: new Date(),
deselectable: true,
showCalendar: true,
showToday: true,
showTime: true,
showNow: true,
militaryTime: false,
min: null,
max: null,
autoclose: true,
strings: {
months: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
days: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
time: ["AM", "PM"]
}
};All options are deeply extended, allowing you to only specify the options you wish to override.
| Option | Type | Default | Description |
|---|---|---|---|
| value | Observable | ko.observable([Date Object]) | An observable of the selected date |
| current | Date | new Date() | The date of the sheet being currently viewed |
| deselectable | Boolean | true | Allows a selected date to be clicked again to be deselected |
| showCalendar | Boolean | true | Show or hide the date selecter |
| showToday | Boolean | true | If showCalender is true, shows a button below the calendar that allows the user to quickly select the current day |
| showTime | Boolean | true | Show or hide the time selecter |
| showNow | Boolean | true | If showTime is true, shows a button below the time that allows the user to quickly select the current time |
| militaryTime | Boolean | false | If true, the time format will be 24 hour, but if false, the time format will be 12 hour with support for periods (AM/PM) |
| min | Date | null | A Date object that enforces the calendar &apm; time cannot be set before this date |
| max | Date | null | A Date object that enforces the calendar &apm; time cannot be set after this date |
| autoclose | Boolean | true | If true, the calendar will close when bound to an input the user selects a date |
| strings | Object | ... | An object that specifies all strings used for the calendar, useful for localization. Any of the keys within this object may be included. |
How do I set the initial date being viewed on the calendar?
- The current "sheet" being viewed at any point reflects the date set in the
opts.currentvariable. When a user paginates months/years, this date changed with it.
How can I set the initial selected date of the calendar?
- The current date selected is an observable and can be found in
opts.value. Normally, you'd provide your own observable in this field so you can capture the value of the calendar within your code.
I want to use this as an input binding but some of my options aren't being set
- ko-calendar is meant to be used in conjunction with other bindings. For example, if you want the value of the input to be the value in the calendar:
<input type="text" data-bind="value: myDate, calendar: { value: myDate } ">- You must set the
valuebinding in conjunction with thecalendarbinding.
Selecting a date doesn't close the picker, what gives?
- Set
opts.autoclosetotrueto dismiss the calendar when a date has been selected.
Contributions to the project are most welcome, so feel free to fork and improve. When submitting a pull request, please run grunt jshint (or npm run-script build) first to ensure common issues have been caught.
The MIT License (MIT) Copyright (c) 2015 Maker Studios