Skip to content

ready4god2513/ko-calendar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ko-calendar

A simple datetime picker built with knockout.

View a demo here


Features

  • 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!

Installing & Building

$ 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 changes

Usage

ko-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>

API

ko-calendar supports Components and bindings.

Component

<div data-bind="component: { name: 'calendar', params: opts }"></div>

Inline Binding

<div data-bind="calendar: opts"></div>

Input Binding

<input type="text" data-bind="calendar: opts">

JS API

ko.calendar(document.getElementById('calendar'), opts);

Default Options

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.

FAQ

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.current variable. 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 value binding in conjunction with the calendar binding.

Selecting a date doesn't close the picker, what gives?

  • Set opts.autoclose to true to dismiss the calendar when a date has been selected.

Screenshot

Contributing

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.

License

The MIT License (MIT) Copyright (c) 2015 Maker Studios