Better datepicker

This seems to work!

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: "both", constrainInput: false, onSelect: function(dateText, control) {
        $("#text").append("onSelect : " +  
                          $( this ).datepicker("getDate") + 
                          " " + dateText
                + "<br />");   
                        }
     });

$("*").on("change", "input.hasDatepicker", function () {
    // close the picker if it's open
    $(this).datepicker( "hide" ) ;

    // see if the text in the text box can be parsed as a date
    var textDate = Date.parse($(this).val()) ;
    var oldDate = $(this).datepicker("getDate")  || "" ;

    // 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() !== oldDate.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("");
        
        if ( $(this).datepicker("getDate")  !== null) {
            $(this).datepicker("setDate", null);
                    if ( typeof $(this).datepicker("option", "onSelect") === "function" ) {
                $(this).datepicker("option", "onSelect").call( 
                        this, 
                        null, 
                        $(this).datepicker) ;
            }
        }
    }
});