jQuery UI DatePicker - Change Date Format

Question

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code:

And the

Answer 1

So I struggled with this and thought I was going mad, the thing is bootstrap datepicker was being implemented not jQuery so teh options were different;

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})

Answer 2

you should use data-date-format="yyyy-mm-dd" in your input field html and initial data picker in JQuery just like simple

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});

Answer 3

$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()

Answer 4

I think the correct way to do this would be something like this:

var picker = $('.date-picker');
var date = $.datepicker.formatDate(
    picker.datepicker('option', 'dateFormat'),
    picker.datepicker('getDate'));

This way you make sure the format string is defined only once and you use the same formatter to translate the format string into the formatted date.

Answer 5

I use this:

var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');

Which returns a date of format like "20120118" for Jan 18, 2012.

Answer 6

This works smoothly. Try this.

Paste these links in your head section.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Following is the JS coding.

 <script>

        $(document).ready(function () {
            $('#completionDate').datepicker({
                dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
                changeMonth: true,
                changeYear: true,
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    loadMusterChit();
                }

            });
        });

    </script>