CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
user2582770
user2582770

Reputation: 411

JQuery UI DatePicker Change Date to Text

I have added a JQuery UI datepicker to my website and would like to remove the text shown e.g. the date to show "Select Date..." is this possible if so how? As I have tried to alter this in the javascript with no luck.

Upvotes: 0

Views: 1775

Answers (1)

Praxis Ashelin
Praxis Ashelin

Reputation: 5217

There are multiple methods.

1) Make the text "invisible" in CSS by setting the color to white

#datepicker{
   color: #FFFFFF;
}

2) Catching the datepicker event (onSelect), saving the date in a variable / hidden input and removing the value from the datepicker element

$(function() {
    $('#datepicker').datepicker( {
        onSelect: function(date) {
            // Save date in variable
            var datevariable = date;

            // Or save the date in a hidden input field
            $('#hidden-input').val(date);

            // Clear the input of the datepicker
            $('#datepicker').val('Select date...');
        }
    });
});

3) Using a seperate element or icon as trigger to activate the datepicker, and making the actual input element invisible by setting display: none.

Upvotes: 1

Related Questions