Как изменить формат даты в средстве выбора даты - PullRequest
Новая
       72

Как изменить формат даты в средстве выбора даты

0 голосов
/ 07 мая 2020

Я столкнулся с одной проблемой, связанной с датой

Вот моя функция 

$('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 меньше даты окончания

Ответы [ 3 ]

0 голосов
/ 07 мая 2020

Вместо сравнения строкового представления дат с использованием <. Используйте Moment. js для сравнения двух значений средств выбора даты.

Документация Date Range Picker говорит следующее:

Вы можете получить доступ к объекту Date Range Picker, его функциям и свойствам через свойства данных элемента, который вы прикрепил его к. 

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>
0 голосов
/ 07 мая 2020

Здравствуйте

Уважаемый

Можете попробовать вот это. Это очень мощно 

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

Вы можете использовать любые типы разделителей, например этот 

"('YYYY-MM-DD')"
"('YYYY/MM/DD')"
"('YYYY.MM.DD')"
0 голосов
/ 07 мая 2020

создает объекты Date и сравнивает.

JavaScript будет использовать часовой пояс браузера и отобразить дату в виде полнотекстовой строки. например: 

let now = new Date()
// now will be equal to Thu May 07 2020 15:08:04 GMT+0530 (India Standard Time)

Итак, в этом случае: 

    var start_date = document.getElementById('id_issued_date').value;
    var end_date = document.getElementById('id_expiry_date').value;

    let start_date_obj = new Date(start_date);
    let end_date_obj = new Date(end_date); 

    if ( start_date_obj < end_date_obj )
    {
       // do something
    }

вам не нужно беспокоиться о формате даты. ie, независимо от того, в формате ГГГГ-ММ-ДД или ДД-ММ-ГГГГ, или если он имеет другой разделитель. (но должна быть дата)

...