Getting data into an input field from YUI Calendar with multi-select:true

Question

<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function(){
        YAHOO.dateSelects.exc = new YAHOO.widget.Calendar("exc","excContainer", 
        { title:"Choose a date:", close:true, multi_select:true });

        YAHOO.dateSelects.exc.render();

        YAHOO.util.Event.addListener(
            "excshowup", 
            "click", 
            YAHOO.dateSelects.exc.show, 
            YAHOO.dateSelects.exc, 
            true
        );
    });
</script>

<div class="calendarOuterContainer">
    <div id="excContainer" class="calendarContainer"></div>
</div>

<a id="excshowup"><img src="/images/icons/calendar.png" /></a>

The preceding code generates a YUI calendar with the ability to select multiple dates on one calendar. What I am having trouble figuring out is how to capture that data and place it inside a text input tag on the fly. So when a person clicks the close button, all the selected dates are populated inside the input tag.

Suggestions? (Code sample is greatly appreciated)

Answer 1

Subscribe to the hide event & call getSelectedDates() on your calendar instance which will return an array of JS Date objects. You can then format & combine those to get a string in the style you want to set the value of your text input.