Question

I am trying to get the buttontext of datepicker (which defaults to an ellipsis), to set itself as the value of the input.

I have multiple datepickers on the page, and unlike my example below I have an icon instead of a text input. I would like the value itself to show on the tooltip that appears when you hover over the icon.

I have tried – buttonText: $(this).val() as an option but it doesn’t pick anything up

Example – http://jsbin.com/unolot/3/

So my question – How do I get the buttontext of the datepicker input to match the value dynamically?

Answer 1

You have to handle two cases:

• When the selected date changes: use the onSelect event to change the button’s title attribute
• On initial rendering: unfortunately, the datepicker does not implement the widget factory (yet) so there is no create event, you’ll have to update the title attribute manually after the widget has initialized.

Don’t forget to set the default date of the picker to the initial value of the field, otherwise the default selected date is “today”

Something like this:

// as you have several instances, loops through them
$(".deadline_picker_on").each(function() {

    var dt = $(this);

    dt.datepicker({
        showOn: "button",
        buttonText: '',
        // set the default date to the value of the field
        defaultDate: dt.val(),
        duration: 100,
        dateFormat: 'yy-mm-dd',
        showOptions: {
            direction: 'right'
        },
        onSelect: function(dateText, inst) {
            // on data selection, change the title attribute of the button
            $(this).next().attr('title', dateText);
        }
    })
    // get the button (next element)
    .next()
    // set the title attribute with the formatted initial date from the picker
    .attr('title', $.datepicker.formatDate('yy-mm-dd', dt.datepicker('getDate')));
});
​