Last active
April 9, 2017 12:23
-
-
Save jniemann66/654645ec712e7febc0518f6bb9cf182c to your computer and use it in GitHub Desktop.
installing a jQueryUI datepicker with internal ISO date format, but different display format
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// detect if datepicker required (no input type="date" ...) | |
if ( $('[type="date"]').prop('type') != 'date' ) { | |
installDatePicker('dd-M-yy'); // note: with jQui datepicker, 'yy' is 4-digit year | |
} | |
// installs a jQueryUI datepicker in place of <input type="date">: | |
function installDatePicker(displayFormat) { | |
$('input[type=date]').each(function (index, element) { | |
var hiddenDate = $(this).clone().insertAfter(this).hide(); // create hidden date field that will contain the iso 8601 date format | |
$(this).attr('id',$(this).attr('id')+'-displayed'); // append '-displayed' to the id of the date field which the user sees | |
$(this).datepicker({ | |
dateFormat: 'dd-M-yy', | |
altField: '#' + hiddenDate.attr('id'), | |
altFormat: 'yy-mm-dd', // full-date as specified in RFC3339 (note: 'yy' is actually 4-digit year in datepicker) | |
onSelect: function() { | |
hiddenDate.trigger("change"); | |
} // make datepicker fire a change event when underlying input changed (doesn't do this by default) | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment