Search code examples
jqueryjquery-uidatepickerjquery-ui-datepickeruidatepicker

Jquery UI datepicker change button

Hello I have a button here and when click it shows the calendar:

enter image description here

enter image description here

What I want to achieve is that when a date is picked, the button text and image will be replace by e.g. 22-07-2016, so far no luck with changing it.

<input name="depart" id="depart">

$( "#depart" ).datepicker({
defaultDate: null,
dateFormat: "dd-mm-yy",
showOn: "button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>Depart<span class='glyphicon glyphicon-menu-down'></span>",
});

I have tried a variety of methods such:

onSelect: function(date) {
        buttonText: date,
},
Solution

  • You would have to set the value of the option using option. Try,

    onSelect: function(date) {
    $(this).datepicker('option', 'buttonText', date);
},