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

Question

I am facing one issue fomrating the date

Here is my function

$('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": "-"
    }
});

It showing dates and time in format like this "2019-05-30"

If I change it like this

$('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": "-"
    }
});

The format it shows correct.... It will show 05-05-2020 But I am facing one issue in another function.... I need to check the start_date should less than end_date...

So at the time of form submission.... I am returning another function like this

$(".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');
    }
});

But if I Pass a date like this start date 01/06/2019 and end date is 05/05/2020 it will not work

Actually the start_Date is less than end date

Answer 1

create objects of Date and compare.

JavaScript will use the browser's time zone and display a date as a full text string. eg:

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

So, in this case:

    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
    }

you don't have to worry the date format. ie, whether it is in YYYY-MM-DD or DD-MM-YYYY formats or if it has a different seperator. (but should be a date)

Answer 2

Instead of comparing the string representation of the dates using < . Use Moment.js to compare the two values of the date pickers.

The Date Range Picker documentation says the following:

You can access the Date Range Picker object and its functions and properties through data properties of the element you attached it to.

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

Then use Momenent.js isBefore() to compare the two values:

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 3

Hello

Dear

You can try to use this. This is very powerful

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

You can use any kinds of separator like this

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