When I select the date from the drop down calendar always show the date in the format 'mm/dd/yyyy' . RRS feed

  • Question

  • User-1355965324 posted

    I am using the datepicker from https://jqueryui.com/datepicker. 

    When I select the date from the drop down calendar always show the date in the format 'mm/dd/yyyy' . How can I bring the date  from the dropdown  in the format  'dd/mm/yyyy' .

    I can mannually type the date as dd/mm/yyyy format . But when I get the date from the calendar popup ,  the date always shows mm/dd/yyyy

    here is my code

    public class WeatherVM
            public int LocationId { get; set; }
           public int LocationName { get; set; }
            [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
            public DateTime ForcastDate { get; set; }
            public WeatherLocation WeatherLocation { get; set; }
            public IEnumerable<Weather> Weather { get; set; }
            public IEnumerable<SelectListItem> Locations { get; set; }
    <div class="form-group row">
            <div class="col-sm-2">
                <label asp-for="ForcastDate"></label>
            <div class="col-4">
                <input type='text' id="forcastDate" asp-for="ForcastDate" class="form-control" />
                <span asp-validation-for="ForcastDate" class="text-danger"></span>

    <br /> </div> </div> @section Scripts{ <script> $("#forcastDate").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' }); </script> }

    I am using the following css and js file in layout

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script src="https://kit.fontawesome.com/e19c476714.js"></script>    

    Saturday, June 6, 2020 12:14 PM

All replies

  • User2078676645 posted


    $("#forcastDate").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });

    According to the document definition, the parameters are configured incorrectly, you can click on the link to query. When I changed it to dateFormat, the effect is achieved.

                dateFormat: "dd-mm-yy"



    Monday, June 8, 2020 1:41 AM
  • User-1955300613 posted


    You can change the script.

    add the following two lines below your <script>, then it will work but the form will be different.

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>

    After I tried Evern's solution, i think use his solution will be better :)  format should be replaced with dateformat.

    Best Regards,


    Monday, June 8, 2020 2:27 AM