如何在javascript datarangepicker中格式化moment.js日期？

Question

i want to change the format of date (momentjs) from mm/ddYYYY to dd/mm/YYYY in daterangepicker. if I use the method .format(ddmmYYYY) it doesn't work

i try to change the method to format but it doesn't work well

<script type="text/javascript">
        $(function() {

            //I want to change the format here
            var start = moment();
            var end = moment();

            function cb(start, end) {
            $('#dashboard-report-range span').html(start + ' - ' + end);
            }

            $('#dashboard-report-range').daterangepicker({
                startDate: start,
                endDate: end,
                locale: {
                    "fromLabel": "From",
                    "toLabel": "To",
                    "customRangeLabel": "Modify",
                    cancelLabel: 'Clear',
                    applyLabel: 'Apply'
                },
                ranges: 
                {
                    //I want to change the format here for all elements
                   'Today': [moment(), moment()],
                   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                   'This Month': [moment().startOf('month'), moment().endOf('month')],
                   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
            }, cb);

            cb(start, end);

        });
        </script>

Actually the date is printed with format dd/mm/YYYY and if I try to change the format the output is NanNanNan

Answer 1

You need to specify what format the date range picker will use by adding format: 'DD/MM/YYYY' to the daterangepicker's locale config:

 $(function() { //I want to change the format here var start = moment(); var end = moment(); function cb(start, end) { $('#dashboard-report-range span').html(start + ' - ' + end); } $('#dashboard-report-range').daterangepicker({ startDate: start, endDate: end, locale: { "fromLabel": "From", "toLabel": "To", "customRangeLabel": "Modify", cancelLabel: 'Clear', applyLabel: 'Apply', format: 'DD/MM/YYYY' // <-- Add this line }, ranges: { //I want to change the format here for all elements 'Today': [moment(), moment()], 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] }, }, cb); cb(start, end); }); 

 <link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <input type="text" id="dashboard-report-range" />