jQuery UI DatePicker - Change Date Format

jQuery UI DatePicker - Change Date Format 💡

So, you're using the UI DatePicker from jQuery UI and you're having trouble getting the date returned in the format you want. No worries, I got you covered! 😎

First, let's understand the problem. By default, when you call getDate() on a DatePicker instance, it returns the date in the format Tue Aug 25 2009 00:00:00 GMT+0100 (BST). But you want it in the format DD-MM-YYYY. Let's see how we can achieve that.

Solution 🛠️

The jQuery UI DatePicker provides a dateFormat option that allows you to specify the format you want the date to be returned in. Simply set the dateFormat option when initializing the DatePicker:

$("#datepicker").datepicker({
  dateFormat: "dd-mm-yy" // Specify your desired date format here
});

In this case, we set dateFormat to "dd-mm-yy". This means the date will be returned in the format DD-MM-YYYY. Easy, right? 😉

Now, when you call getDate(), the date will be returned in the format you specified.

var date = $("#datepicker").datepicker("getDate");

And voila! You'll get the date in the format you wanted 🎉

Additional Options 🌟

The dateFormat option provides more flexibility to customize the date format. Here are a few common format options:

• d - day of the month (no leading zero)

• dd - day of the month (with leading zero)

• m - month (no leading zero)

• mm - month (with leading zero)

• yy - year (two-digit)

• yyyy - year (four-digit)

Feel free to mix and match these options to customize the format according to your needs.

Have Fun Customizing! 🎉

Now that you know how to change the date format in the jQuery UI DatePicker, go ahead and customize it to your heart's content! Play around with different format options and find the one that suits your application best. And don't forget to share your cool date picker creations with me! 🌈

If you found this guide helpful, don't hesitate to share it with your fellow devs. Together, we can make the date pickers of the world look cooler than ever before! 🚀

Got any questions or other jQuery UI DatePicker dilemmas? Leave a comment below or hit me up on social media. Let's chat about date pickers! 💬