你好

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，则将无法使用

实际上start_Date小于结束日期

Answer 1

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

Date Range Picker documentation说：

您可以通过附加到其的元素的数据属性来访问“日期范围选择器”对象及其功能和属性。
var drp = $('#daterange').data('daterangepicker');

然后使用Momenent.js 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));
});

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

<input  type="text" name="issued_date" />
<input  type="text" name="expiry_date" />
<button type="button" name="check_dates">issued_date &lt; expiry_date</button>

Answer 2

你好

亲爱的

您可以尝试使用此功能。这非常强大

today = moment(new Date()).format('YYYY-MM-DD')

您可以使用任何这样的分隔符

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

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

2 个答案:

你好