mastersuse
mastersuse

Reputation: 988

How to resolve issue NaN-NaN-NaN using datepicker and function?

I am using Datepicker to select date and a function to convert date style to a require format. Current format that require during selection is using dd-mm-yyyy OR 20-03-2020. (My country style) While, format that require to send to API using Ajax is yyyy-mm-dd OR 2020-03-20. So it is need to convert before proceed for submission.

During selection, I am using Datepicker with format: "dd-mm-yyyy", as shown below. I also able to convert the date from dd-mm-yyyy to yyyy-mm-dd using function shown below.

BUT, NaN-NaN-NaN error is appear (console.log) during the submission. How to fix it?

HTML

<input type="text" class="form-control" id="actualDate"></input>

DATEPICKER

$('#actualDate').datepicker({
    language: 'en',
    format: "dd-mm-yyyy",
    clearButton: true,
    toggleSelected: true,
    autoclose: true,
    todayHighlight: true,
    ignoreReadonly: true,
});

JS Function

$.ajax({
    url : url_projectList + '/1st_api',
    crossDomain: true,
    type : 'POST',
    dataType : 'json',
    data: JSON.stringify({project_id: id}),
    success: function(response){

        var actualDate = $('#actualDate').val();    

        if ($("#actualDate").val() == ""){
            var actual_date = null;  // This is working fine
        } else {
            actual_date = sendDate(actualDate);   // Here is the error coming
        }

        console.log(actual_date)  // I got NaN-NaN-NaN

        $.ajax({
            url : url_projectList + '/2nd_api',
            type : 'POST',
            dataType : 'json',
            data: params,
        });
    }
});

function sendDate(input_date){

    proc_date = new Date(input_date)
    year = proc_date.getYear() + 1900
    month = proc_date.getMonth() + 1
    day = proc_date.getDate()

    if (month < 10)
    {
      month = "0" + month;
    }
    if (day < 10)
    {
      day = "0" + day;
    }

    return year +"-"+ month +"-"+ day;
}

Upvotes: 0

Views: 8569

Answers (1)

Hiren Karangiya
Hiren Karangiya

Reputation: 92

        <input type="text" class="form-control" id="actualDate"/>

        $('input[id$=tbDate]').datepicker({
            language: 'en',
            clearButton: true,
            toggleSelected: true,
            autoclose: true,
            todayHighlight: true,
            ignoreReadonly: true,
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText) {
                console.log("Selected date: "+ this.value);
            }
        });

        $.ajax({
            url : url_projectList + '/1st_api',
            crossDomain: true,
            type : 'POST',
            dataType : 'json',
            data: JSON.stringify({project_id: id}),
            success: function(response){

                var actualDate = $('#actualDate').datepicker('getDate');  

                if (actualDate == ""){
                    actual_date = null; 
                }

                console.log(actual_date);

                $.ajax({
                    url : url_projectList + '/2nd_api',
                    type : 'POST',
                    dataType : 'json',
                    data: params,
                });
            }
        });

removed extra function for formating date into "yy-mm-dd" format, I have used dateFormat option of datepicker lib

I hope this will help you :-)

Upvotes: -1

Related Questions