A jQuery plugin that understands human date/time inputs & their format
You can download the latest JS code here:
Simply add it to your HTML page, make sure to load jQuery, moment and moment-parseformat
<script src="jquery.js"></script>
<script src="moment.js"></script>
<script src="moment.parseFormat.js"></script>
<script src="smartdat-input.js"></script>
<!-- $('input').smartDate() is now available -->
Or install via npm
npm install --save expandable-input
The JS code can be required with
var jQuery = require('jquery')
var moment = require('moment')
moment.parseFormat = require('moment-parseformat')
var expandableInput = require('expandable-input')
// init
expandableInput(jQuery, moment)
// $('input').smartDate() is now available
var $input = $('input');
// initialize
$input.smartDate();
// set value to Date
$input.smartDate('set', new Date());
// set/change format
$input.smartDate('setFormat', 'dddd, MMMM Do, YYYY h:mma');
// also possible:
$input.smartDate({
date: new Date(),
format: 'dddd, MMMM Do, YYYY h:mma'
})
// listen to format changes
$input.on('change:format', function(event, newFormat) {
// store newFormat as the user's preferred datetime format
});
// listen to changes of the parsed timestamp
$input.on('change:timestamp', function(event, timestamp) {
// store the timestamp that was parsed from the raw date/time string
});
// per default, change:format & change:timestamp will be checked for
// and triggered on blur. This can be changed with the setEvent method
$input.smartDate('setEvent', 'input');
You can make the data input self-initializing by using the data-api. The input will be initialized on first interaction.
<input data-smartdate-spy>
You can also set the default date format:
<input data-smartdate-spy data-format="MMM Do, YYYY">
Or the event when it shall check for & trigger change:format
<input data-smartdate-spy data-format-event="input">
git clone git@github.com:gr2m/smartdate-input.git
cd smartdate-input
npm install
npm test
While working on the tests, you can start Selenium / Chrome driver once, and then tests re-run on each save
npm run test:mocha:watch
Set log level (silly
, verbose
, info
, warn
, error
). Defaults to error
LOG_LEVEL=verbose npm test
Running tests in a different browser. Defaults to selenium:chrome
CLIENT=selenium:firefox npm test
Running tests on Sauce Labs
# a couple of examples
SAUCELABS_USERNAME=username SAUCELABS_ACCESS_KEY=accesskey CLIENT=saucelabs:chrome npm test
SAUCELABS_USERNAME=username SAUCELABS_ACCESS_KEY=accesskey CLIENT='saucelabs:internet explorer' npm test
SAUCELABS_USERNAME=username SAUCELABS_ACCESS_KEY=accesskey CLIENT='saucelabs:internet explorer:10.0:Windows 8' npm test
The smartDate Input Plugin have been authored by Gregor Martynus (@gr2m), proud member of the Hoodie Community.
License: MIT