jQuery UI: Date Picker

Date Picker that always shows current date on open

by Juan Muñoz

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<input type="text" value="01/01/2013" class="dp-date">
<input type="text" value="05/05/2001" class="dp-date">
<input type="text" value="01/01/2012" class="dp-date">
<input type="text" value="11/11/2013" class="dp-date">

CSS

input.dp-date {
    display: block;
}

JavaScript

var elm = {}, oldDate = "";
    $(".dp-date").datepicker({
        changeMonth: true,
        changeYear: true,
        language: "ES",
        dateFOrmat: "mm/dd/yy",
        defaultDate: new Date(),
        beforeShow: function (el, dp) {
            elm = $(el);
            oldDate = $.trim(elm.val());
            elm.val("");
        },
        onClose: function (dateText, dp) {
            if ($.trim(elm.val()) === "") {
                elm.val(oldDate);
            }
            oldDate = "";
        }
    });