Version 0.1.0

Overview

There are a lot of date pickers that use a calendar approach, but this plugin attempts to keep the process as simple and minimal as possible by letting the user edit the date in line.

Once hovered over a date unit, a user can type the number they want or use the scroll wheel to quickly change the value.

Pressing tab, shift+tab, or left/right arrow keys will navigate between the different units. Hitting esc will reset the value (while editing and before picker is saved)

Examples

new DatePicker({
    appendTo: '#demo1',
    format:'m/d/y'
})
        

new DatePicker({
    appendTo: '#demo2',
    format:'m-d-y'
})
        

new DatePicker({
    appendTo: '#demo3',
    format:'m,d y',
    m: {format: 'short'}
})
        

new DatePicker({
    appendTo: '#demo4',
    format:'my',
    m: {format: 'long'},
    val: new Date()
})
        

new DatePicker({
    appendTo: '#demo5',
    format:'y',
    val: new Date(),
    valFormat: 'YYYY',
    onSave: function(dp, val){
        alert(val)
    }
})
        

Options

defaultOpts: {
    appendTo: null,
    val: '',
    format: 'y-m-d',
    valFormat: 'YYYY-MM-DD',
    className: '',
    deltaThreshold: 70, // how much scrolling is needed to change values
    typeDelay: 340, // how long between keystrokes before using value
    navLink: true, // when navigating units and reaching the end, will jump to next date picker if right next
    saveOnBlur: true,
    onSave: null,
    onBlur: null,
    
    // options for each unit
    y: {
        placeholder: 'yyyy'
    }, 
    m: {
        format: '', // short, long, fn()
        placeholder: 'mm'
    },
    d: {
        format: '', // fn()
        placeholder: 'dd'
    }
}

val

Value of the date picker upon initialization. This can be a Date() object or a date string.

valFormat

The format of the date picker value when using the .value() method. Refer to the moment.js docs for supported sytax

saveOnBlur:true

When the date picker loses focus, it will determine if the value has changed since the last time a "save" action was triggered and if so, will call onSave

onSave: function(dp, val){}

Triggered when the date picker has changed and lost focus (only when saveOnBlur is true)

onBlur: function(dp, val){}

This could be used to test the value first and manually save or reset based on applicatoin needs. To do that, turn saveOnBlur to false, then call dp.save() or db.reset().

y:{}, m:{}, d:{}

These are options for each unit

[ymd].placeholder

This is the text displayed when the unit does not have a value

[ymd].format

How the unit is displayed can be overidden with a custom function. Month also has two predefined presets short and long. Year does not support format.

Methods

.save()

Removes the "unsaved" state and sets the current value as the value.

.reset()

Puts the date back to the last time it was saved (if never saved, it will revert to the original init value). This can also be triggered by pressing esc

.value()

Gets the current value of the date picker (regardless of the "unsaved" state)

.appendTo(el)

Renders and appends the date picker to the element. el can be a string, native element or jQuery object. This isn't needed if you specify an appendTo: option upon init.

Styling

.editing

This class is applied when ever the date picker is being edited

.unsaved

This class can be found when the date picker value has changed but not been "saved"

Dependencies

Backbone.js (and its dependencies: underscore, jquery)

Underscore.string

Moment.js - date parsing and manipulation

TODO

- add ability to scroll a unit and only change that unit (right now, if scrolling from Dec to Jan, the year will change)
- add support for time?
- method for "setting" the date after initialization
- add date range limiting (min and/or max)
- add option for turning scroll feature off?

License

MIT © Kevin Jantzer