Create a gist now

Instantly share code, notes, and snippets.

Fuel UX Datepicker Examples
<!--
///////////////////////////////////////////////////////////////////////
// These examples apply to Fuel UX v2.*
// If you're looking for Fuel UX v3 please checkout the examples here
// - https://gist.github.com/vernak2539/9980566
/////////////////////////////////////////////////////////////////////////
-->
<!-- standard markup of datepicker -->
<div class="datepicker dropdown" id="myDatepicker">
<div class="input-append">
<div class="dropdown-menu"></div>
<input type="text" class="span2" value="" data-toggle="dropdown">
<button type="button" class="btn" data-toggle="dropdown"><i class="icon-calendar"></i></button>
</div>
</div>
<!-- datepicker placeholder (using input creation) -->
<div id="anotherDatepicker"></div>
<!-- JS for datepicker -->
<script type="text/javascript">
// the following code would be after jquery is initialized and when you're initially setting up the datepicker
//---------------------------------------------------
// Default Configuration
//---------------------------------------------------
$('#myDatepicker').datepicker({
date: new Date(),
createInput: false,
dropdownWidth: 170,
restrictDateSelection: true
});
// initialization with null value
// $('#myDatepicker').datepicker('getDate') will return null until date is set (useful for form validation)
$('#myDatepicker').datepicker({
date: null
});
// allowing past date selection
$('#myDatepicker').datepicker({
restrictDateSelection: false
});
// custom dropdown menu width (value must be an integer)
$('#myDatepicker').datepicker({
dropdownWidth: 200
});
//---------------------------------------------------
// Datepicker: Dynamic Markup Creation
//---------------------------------------------------
// generates a datepicker with only an input box
$('#anotherDatepicker').datepicker({
createInput: true
});
// creates a native input for mobile
$('#anotherDatepicker').datepicker({
createInput: {
native: true
}
});
// will create a datepicker with an input and button to the right (appended)
$('#anotherDatepicker').datepicker({
createInput: {
dropDownBtn: true
}
});
// will create a datepicker with a custom size
$('#anotherDatepicker').datepicker({
createInput: {
inputSize: 'span4' // can either be an integer (for pixel representation) or a CSS class (useful for bootstrap)
}
});
//---------------------------------------------------
// Moment JS integration
// Additional Features:
// 1. Input parsing (on blur date will be parsed)
// 2. Moment JS Culture Support
// - Check out http://momentjs.com/docs/#/i18n/changing-language/ for language options
// 3. Moment JS Format Support
// - We only support the Moment JS format codes of "L" or "l"
// - http://momentjs.com/docs/#/customization/long-date-formats/
// Requirements:
// 1. Moment JS with Langs. In either of the following forms:
// - window.moment
// - RequireJS modules defined as "moment"
// 2. Moment JS with Langs found here --> http://momentjs.com/downloads/moment-with-langs.js
//---------------------------------------------------
$('#myDatepicker').datepicker({
momentConfig: {
culture: 'en', // change to specific culture
formatCode: 'L' // change for specific format
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment