A light-weight date picker with zero dependencies.
- Zero dependencies
- Roughly 2.5KB minified and gzipped
- IE9+
- Mobile-friendly/responsive
npm install --save tiny-date-picker
Include a reference to tiny-date-picker.css
and tiny-date-picker.js
, then call it like this:
// Initialize a date picker on the specified input element
TinyDatePicker(document.querySelector('input'));
You can also pass in options as an optional second argument:
// Initialize a date picker using truncated month names
TinyDatePicker(document.querySelector('input'), {
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
});
The input to which the date picker is attached will fire its change
event
any time the date value chanegs.
The DatePicker context is returned by the TinyDatePicker
. See below for further details.
// Initialize a date picker on the specified input element
const dp = TinyDatePicker(document.querySelector('input'));
// Show the date picker
dp.open();
Below is an example of all option parameters:
TinyDatePicker(document.querySelector('input'), {
// Used to convert a date into a string to be used as the value of input
format: function (date) {
return date.toLocaleDateString();
},
// Used to parse a date string and return a date (e.g. parsing the input value)
parse: function (str) {
var date = new Date(str);
return isNaN(date) ? new Date() : date;
},
// Names of months, in order
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
// Names of days of week, in order
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
// The text for the button used to set the date to today's date
today: 'Today',
// The text for the button used to clear the input value
clear: 'Clear',
// The text for the button used to close the form
close: 'Close',
// Specifies the minimum date that can be selected
min: '10/1/2016',
// Specifies the maximum date that can be selected
max: '10/22/2016',
// Place datepicker selector on this date if field is still empty
preselectedDate: '10/20/2016',
// There are two modes: dp-modal (the default) and dp-below.
// dp-modal makes the date picker show up as a modal.
// dp-below makes it show up beneath its input element.
mode: 'dp-below',
// Whether to use Monday as start of the week
weekStartsMonday: false,
// A function which is called any time the date picker opens
onOpen: function (context) {
// context is the datepicker context, detailed below
},
// A function which is called any time the year is selected
// in the year menu
onSelectYear: function (context) {
// context is the datepicker context, detailed below
},
// A function which is called any time the month is selected
// in the month menu
onSelectMonth: function (context) {
// context is the datepicker context, detailed below
},
});
The onOpen
, onSelectYear
, and onSelectMonth
event handlers receive the date picker context object. This has many properties and methods, the most useful of which are as follows:
- currentDate: the currently selected date (a Date object)
- input: the input element to which the date picker is bound
- open: opens the modal
- close: closes the modal
- openYears: shows the modal with the years menu showing
- openMonths: shows the modal with the months menu showing
- setValue: sets the date as a string value
All CSS class names begin with dp-
, and every element in the calendar has a class. The style rules
in tiny-date-picker.css
have been kept as unspecific as possible so they can be easily overruled.
For more info, launch a date picker and use the browser dev tools to inspect its structure and shape.
There is currently no Aria support baked into Tiny Date Picker, but it is planned.
This library is CommonJS compatible, so you can use it in this way:
var TinyDatePicker = require('tiny-date-picker'),
TinyDatePicker(document.querySelector('input'));
Or, with ES6:
import TinyDatePicker from 'tiny-date-picker',
TinyDatePicker(document.querySelector('input'));
First, you'll need to have selenium installed and running, as detailed here and you'll need to serve the test HTML page by running npm start
.
npm test
If all is well, build your changes:
npm run min
Copyright (c) 2015 Chris Davies
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.