如何在日期选择器中更改日期格式

Question

我正面临一个关于日期的问题

这是我的职能

$('input[name="issued_date"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    issued_date: moment().startOf('hour'),
    locale: {
        "format": "YYYY-MM-DD",
        "separator": "-"
    }
});

$('input[name="expiry_date"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    expiry_date: moment().startOf('hour'),
    locale: {
        "format": "YYYY-MM-DD",
        "separator": "-"
    }
});

它以类似“ 2019-05-30”的格式显示日期和时间

如果我这样更改它

$('input[name="issued_date"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    issued_date: moment().startOf('hour'),
    locale: {
        "format": "DD-MM-YYYY",
        "separator": "-"
    }
});

$('input[name="expiry_date"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    expiry_date: moment().startOf('hour'),
    locale: {
        "format": "DD-MM-YYYY",
        "separator": "-"
    }
});

它显示正确的格式。...它将显示05-05-2020但我在另一个函数中面临一个问题...。我需要检查start_date是否小于end_date ...

所以在提交表单时...。我将返回另一个这样的函数

$(".someclass").click(function () {
    $('.loading').show();
    var start_date = document.getElementById('id_issued_date').value;
    var end_date = document.getElementById('id_expiry_date').value;
    if (start_date < end_date)
    {
        var url = "{% url 'add' %}";
        $.ajax({
            type: 'POST',
            url: url,
            data: $("#new_form").serialize(),
            cache: false,
            success: function (data, status) {
                if (data['status'] == "success") {
                   $('#form_modal').modal('hide');
                   toastr.success(data.message);
                   $('#form_modal').children().remove();
                    url = getPathFromUrl(document.location.href)
                    window.location.href = url
                }
                else {
                    $('#form_modal').html(data);
                }
            }
        });
    }
    else{
        toastr.error('start date should be less than End Date');
    }
});

但是如果我通过这样的日期作为开始日期01/06/2019且结束日期为05/05/2020，它将不起作用

实际上开始日期小于结束日期

Answer 1

而不是使用<比较日期的字符串表示形式。使用Moment.js比较日期选择器的两个值。

Date Range Picker documentation说以下：

您可以通过附加到它的元素的数据属性来访问“日期范围选择器”对象及其功能和属性。

var drp = $('#daterange').data('daterangepicker');

然后使用Momenent.js isBefore()比较两个值：

isBefore()

date1.isBefore(date2)
const $issued_date   = $('input[name="issued_date"]'),
      $expiry_date   = $('input[name="expiry_date"]'),
      $check_dates   = $('button[name="check_dates"]'),
      defaultOptions = {
        singleDatePicker: true,
        showDropdowns:    true,
        locale:           { format: "DD-MM-YYYY", separator: "-" },
      };

$issued_date.daterangepicker(Object.assign({}, defaultOptions, {
  issued_date: moment().startOf('hour'),
}));
$expiry_date.daterangepicker(Object.assign({}, defaultOptions, {
  expiry_date: moment().startOf('hour'),
}));

$check_dates.on("click", () => {
  const issuedDate = $issued_date.data("daterangepicker").startDate,
        expiryDate = $expiry_date.data("daterangepicker").startDate;

  console.log(issuedDate.isBefore(expiryDate));
});

Answer 2

你好

Answer 3

创建

"('YYYY-MM-DD')"
"('YYYY/MM/DD')"
"('YYYY.MM.DD')"

的对象并进行比较。