Question

I’m sure there is a simple solution to this but as I’m just learning, I can’t seem to get this to work or find an answer.

I am using the datepicker widget and I would like the result to display in another div elsewhere on the page.

My html code is:

<div class="ui-widget">
<p><label for="tags">Depart From:</label>
<input type="text" class="departCity" id="tags" size="30" /></p>
</div>

<div class="ui-widget">
<p><label for="tags2">To:</label>
<input type="text" class="destination" id="tags2" size="30" /></p>
</div>

<div>
<p>
<label for="datepicker">Depart Date:</label>
<input type="text" class="ui-widget" id="datepicker" size="30"/></p>
</div>

<div id="trip">
<h2>Your Trip</h2>
<p><span id="tags_display"></span></p>
<p><span id="tags2_display"></span></p>
<p><span id="datepicker_display"></span></p>
</div>

I am using this jquery to show the results (with the help of this site – thanks so much!) but the date selected doesn’t display.

$(function(){ 
$('input[type="text"]').blur(function() {
    $("#"+$(this).attr('id')+"_display").html($(this).val());
    }); 
    });

Where am I going wrong?

Answer 1

When you setup the datepicker you can provide a function to the onSelect parameter which will run when a date is chosen. Try this:

$("#myInput").datpicker({
    onSelect: function(date, picker) {
        $("#otherDiv").html(date);
    },
    // other settings...
});

More info in the API: onSelect