如何使用日期选择器和功能解决问题NaN-NaN-NaN?

时间:2020-03-31 10:38:24

标签: javascript jquery html datetime datepicker

我正在使用Datepicker选择日期,并使用一个将日期样式转换为需求格式的函数。 选择期间需要的当前格式是使用dd-mm-yyyy20-03-2020。 (我的乡村风格) 而使用Ajax发送至API的格式为yyyy-mm-dd2020-03-20。因此,需要先进行转换,然后才能提交。

在选择期间,我正在将Datepicker与format: "dd-mm-yyyy",一起使用,如下所示。我还可以使用下面显示的功能将日期从dd-mm-yyyy转换为yyyy-mm-dd

但是,提交期间出现NaN-NaN-NaN错误(console.log)。如何解决?

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函数

$.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;
}

1 个答案:

答案 0 :(得分:0)

        <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,
                });
            }
        });

删除了将日期格式化为“ yy-mm-dd”格式的额外功能,我使用了datepicker lib的dateFormat选项

我希望这会对您有所帮助:-)