DateSelector

Datepickers are great, that's right. But in some cases it's not intuitive at all. For example when you want to get a user's birthday, online selects or dropdowns are a lot much better.

The aim of this plugin is to easily build that kind of form fields for date input.

License

The plugin is under MIT License

Quickstart

For the moment, the plugin has dependencies with jQuery and Moment. You can include it like following. The css file isn't required if you don't want to use the plugin style. Bootstrap & Foundation aren't required at all, they're in the repo only for demo purpose. 


<link rel="stylesheet" type="text/css" href="dateselector/dateselector.css">
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="dateselector/jquery.dateselector.min.js"></script>

Options

Name Type Default Description
container string undefined The javascript query selector of a DOM element (for ex.: '#myContainer')
containerClass string undefined If you want to add a custom class to the selector's container
cssFramework string undefined The framework to use for selector's building
dateFormat string 'DD/MM/YYYY HH:mm:ss' The momentjs date format for display & getDateString method (see http://momentjs.com/docs/#/displaying/format/)
defaultValue date current date The default selector value
hideSourceNode boolean true To hide/show the selector's source element (usually an input)
maxYear number current year The max year of the selector
minYear number 1970 The min year of the selector
onDateChange function empty function The function to call on date change
selectsClass string undefined If you want to add a custom class to the selector's selects/dropdowns
showDate boolean true To hide/show the date part of the selector
showTime boolean false To hide/show the time part of the selector

Methods

Method Description Usage
getDate Return the selector value as a date object
setDate Set the selector value with a date object
getDateString Return the selector value as a string
setDateString Set the selector value with a string
getDateStringWithFormat Return the selector value as a string, following the given format
setDateStringWithFormat Set the selector value with a string, following the given format

Events

Event Description
'buildingSelector.dateselector'
'selectorBuilt.dateselector'
'initializingSelector.dateselector'
'selectorInitialized.dateselector'
'settingDate.dateselector'
'dateSet.dateselector'
'gettingDate.dateselector'
'dateGot.dateselector'
'updatingSelector.dateselector'
'selectorUpdated.dateselector'

Examples

Default

<input class="dateselector1" type="text">
$('.dateselector1').dateSelector();

Custom container


<input class="dateselector2" type="text">
<div>
    This is a custom container
    <div id="custom-container"></div>
</div>

$('.dateselector2').dateSelector({
    container: '#custom-container'
});
This is a custom container

With a callback function


<input class="dateselector3" type="text">

$('.dateselector3').dateSelector({
    onDateChange: function() {
        // Your code here...
        alert('date changed!');
    }
});

Without hiding the source element


<input class="dateselector4" type="text">

$('.dateselector4').dateSelector({
    hideSourceNode: false
});

With time and custom hours / minutes / seconds steps


<input class="dateselector5" type="text">

$('.dateselector5').dateSelector({
    showTime: true,
    hoursStep: 2,
    minutesStep: 15,
    secondsStep: 30
});

Bootstrap


<input class="dateselector-bs" type="text">

$('.dateselector-bs').dateSelector({
    cssFramework: 'bootstrap'
});

Foundation


<input class="dateselector-fdt" type="text">

$('.dateselector-fdt').dateSelector({
    cssFramework: 'foundation'
});

Get the selector's date


<input class="dateselector6" type="text">

$('.dateselector6').dateSelector({
    onDateChange: function() {
        alert($('.dateselector6').dateSelector('getDate'));
    }
});

Set the selector's date


<input class="dateselector7" type="text">

$('.dateselector7').dateSelector().dateSelector('setDate', new Date(2000, 2, 12));

Languages support

<input class="dateselector8" type="text">
<input class="dateselector9" type="text">
<input class="dateselector10" type="text">
$('.dateselector8').dateSelector({
    lang: 'es'
});
$('.dateselector9').dateSelector({
    lang: 'de'
});
$('.dateselector10').dateSelector({
    lang: 'fr'
});

(uses moment.js locales, so don't hesitate to have a look on its documentation)