How to set jQuery datepicker format to dd-mm-year

Question

I have the following in my view:

<input type="text" name="Model.Date" value="@Model.DateOfAction.ToShortDateString()"  class="txtDate" readonly = "readonly" style = "width: 90px; padding: 0px;" />

I then have below jQuery:

$(document).ready(function() {
    $(document.getElementsByClassName(".txtDate")).each(function () {
        $(this).datepicker({
            dateFormat: 'dd-mm-yy',
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            defaultDate: new Date(),
        });
    });
});

But "18th March 2016" is coming up as "3/18/2016" and I was expecting this "18-03-2016"

How do I properly set my desired format of "18-03-2016" (day,month,year)?. Notice that I want the separator to be this - not /.

Answer 1

You have not set the date format correctly. Here is a working fiddle. Basically you have to set the dateFormat like below:

$(function() {
    $('.txtDate').datepicker({
            dateFormat: 'dd-mm-yy',
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            defaultDate: new Date()
        });
  });