Changing date format in jQuery ui datepicker

In this tutorial I will show you how to change date format in jQuery ui datepicker. To initialize we need to import jQuery libraries. Create the input element and name it and in script section initialize the datepicker with dateformat options.

DatePicker Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DatePicker
Format Example</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).ready(function () {
                $("#dtpStartDate").datepicker({
                    dateFormat: 'dd-mm-yy'
                });
            });
        });
    </script>
 
</head>
<body>
    <h2>DatePicker
Format Example</h2>
 
    <input id="dtpStartDate" /><br />
</body>
</html>

Video Guide: