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 /.

What does `@Model.DateOfAction.ToShortDateString()` return? A date in `d/m/y` format? — Salman A, Mar 18 '16 at 07:34
Is this the value you see in the control _when the page loads_? Does it change back to desired format when you choose a date using datepicker? — Salman A, Mar 18 '16 at 10:15
@SalmanA "3/18/2016 12:00:00 AM" is the value when i set a breakpoint at DateOfAction. After the page has loaded, is see this "3/18/2016". And yes it changes to the desired format when i choose a date using the datepicker. — StackTrace, Mar 18 '16 at 11:35
@StackTrace did one of the answers help you? If so you may want to mark one as the answer. — Twisty, Dec 19 '17 at 20:29

Deepak Biswal · Answer 1 · 2016-03-18T07:29:58.517

2

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()
        });
  });

edited Mar 18 '16 at 07:29

answered Mar 18 '16 at 07:19

Deepak Biswal

4,280
2
20
37

Did you check my fiddle. Check [here](https://jsfiddle.net/deepakb/guhmmkcp/). It's working fine for me. – Deepak Biswal Mar 18 '16 at 07:26
yes, your fiddle works but for some reason its not working in my mvc 3 view. Its a partial view being rendered in a main view. The datepicker is in the partial view's html row which is being dynamically added to an html table in the main view at the click of a button. – StackTrace Mar 18 '16 at 07:34
Check [this](http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui). This might helps you to resolve your issue. – Deepak Biswal Mar 18 '16 at 07:38

score 1 · Answer 2 · answered Mar 18 '16 at 07:16

1

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

answered Mar 18 '16 at 07:16

Divyesh

389
2
12

You don't each i.e. simple `$(".txtDate").datepicker(` will do – Satpal Mar 18 '16 at 07:20

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

2 Answers2

Linked

Related