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

时间:2019-07-17 12:48:45

标签: javascript momentjs

我想在daterangepicker中将日期(momentjs)的格式从mm / ddYYYY更改为dd / mm / YYYY。如果我使用方法.format(ddmmYYYY)则不起作用

我尝试将格式更改为格式,但效果不佳

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

实际上日期以dd / mm / YYYY格式打印,如果我尝试更改格式,则输出为NanNanNan

1 个答案:

答案 0 :(得分:0)

您需要通过将format: 'DD/MM/YYYY'添加到daterangepicker的语言环境配置中来指定日期范围选择器将使用的格式:

$(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" />