CODEWITHSUNDEEP
jqueryjquery-uidatepickerjquery-ui-datepickeruidatepicker
Lim Guang Jian
Lim Guang Jian

Reputation: 90

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,
},

Upvotes: 0

Views: 2177

Answers (2)

Suganya
Suganya

Reputation: 574

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

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

Upvotes: 1

ADyson
ADyson

Reputation: 62016

as per the syntax in the documentation for setting options after the initial load, you should do it like this:

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

See http://api.jqueryui.com/datepicker/#option-buttonText

Upvotes: 1

Related Questions