Date: 2009apr21
Update: 2025sep15
Language: javaScript
Warning: html5 has (input type=date)
Keywords: date, pick, picker
Q. jQuery: Use datepicker plugin
A. For most applications, its better to use the HTML built-in
date picker <input type=date>. It will be in the user's language
and native date format.
But in case you want a customized date picker,
here's a compact example of the jQuery plugin:
<form>
<input id=date name=date size=10 readonly=readonly>
<!-- Use readonly so the user can not type the data but clicking will
make a popup -->
</form>
<script src=js/jquery.js></script>
<script src=js/ui.core.js></script>
<script src=js/ui.datepicker.js></script>
<link rel=stylesheet href=css/ui.all.css type=text/css>
<script type="text/javaScript">
$(document).ready(function() {
$('#date').datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
A second example. You can use <span> instead of <input type=text>
like this:
<span id=date>Select a date</span>