Provide date format hint using jQuery UI DatePicker

jQuery UI Datepicker seems to be rocking because of the functionality and options for customization it comes with. If you are using DatePicker and the input textbox is not read only then user can enter the date via keyboard without selecting from the jQuery DatePicker And that's a good option. So in this post, I will show you that how to tell users that what date format you are expecting.

The jQuery UI DatePicker provides an option called "appendText", which just append the text of the control to which it is bind. So you can use this property to set the date format and which will appear next to the textbox.

//Code Starts $(document).ready(function() {   $('#txtDate').datepicker({     appendText: '(mm/dd/yyyy)'   }); }); //Code Ends 

See result below.



If you are using HTML5, then you can use power of HTML5 to set the hint. The beauty of this will be that it will be displayed as watermark in the textbox. And this has nothing to do with jQuery UI Datepicker, its power of HTML5.

//Code Starts $(document).ready(function() {     $('#txtDate').attr("placeholder", "mm/dd/yyyy").datepicker(); }); //Code Ends 

See result below.



Feel free to contact me for any help related to jQuery, I will gladly help you.