Better datepicker

by grahampcharles

HTML

<script src="http://papa.miraloma.org/miraloma/scripts/Date.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>
<button>Misc</button>
<br />
Dates:
<div id="messages"></div>

Text:
<div id="text"></div>

JavaScript

$( "#datepicker" ).datepicker({showOn: "button", onSelect: function(dateText, control) {
        $("#text").append("onSelect : " +  
                          $( this ).datepicker("getDate") + 
                          " " + dateText
                + "<br />");   
                        }
     });

$("*").on("change", "input.hasDatepicker", function () {
    // see if the text in the text box can be parsed as a date
    var textDate = Date.parse($(this).val());

    // if textDate is valid, then set the picker's value
    if (textDate !== null) {
        
        // $("#text").append("here/" + textDate.toString() + "/" + $(this).datepicker("getDate").toString() +  "<br />" );
//        $("#text").append((textDate.toString() === $(this).datepicker("getDate").toString()) +  "<br />" );
        
        // has value changed? (prevent recursion)
        if ((textDate.toString() !== $(this).datepicker("getDate").toString()))
        {
        // set the value
        $(this).datepicker("setDate", textDate);
        
        // raise the select event
        if ( typeof $(this).datepicker("option", "onSelect") === "function" ) {
                $(this).datepicker("option", "onSelect").call( 
                        this, 
                        $(this).val(), 
                        $(this).datepicker) ;
        }
        }
        
    } else {
        // invalid; clear the text
        $(this).val("");
    }
});