How to change the date range picker's date format?

Question

I am using this bootstrap date range picker. I want to change date format date to dd/MMM/yyyy:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

<script type="text/javascript">
$(function() {
    $("#<%= txtName.ClientID %>").daterangepicker();
});
</script>

Solution 1

If you want to present a different format, you need to add a locale object after you run the daterangepicker function. The site doesn't currently have a list of all the formats it supports, but try this:

$(function() {
    $("#<%= txtName.ClientID %>").daterangepicker({
        locale: {
            format: 'DD/MMM/YYYY'
        }
    });
});

See here for more options: http://www.daterangepicker.com/#config

Solution 2

There was actually a bug related to wrong dates being selected.

Here are the details.

Updating to the latest version resolved the locale format bug for me.

Solution 3

try using this it worked for me

 locale: {
                format: 'YYYY-MM-DD',
                separator: " to "

            },