如何在 Ajax 响应的输入类型日期中显示日期？答案

【问题标题】：How to show Date in Input type date from Ajax response?如何在 Ajax 响应的输入类型日期中显示日期？
【发布时间】：2020-03-09 07:21:38
【问题描述】：

我的控制是，

<input type="date" id="DecDate" name="birthday">

我保存在db中，可以用这种形式查看，

3/10/2020 12:00:00 AM

当我尝试更新相同的记录时，我会根据来自 Ajax 的 json 格式的响应将其填充到“DecDate”中。

我试过了，

$('#DecDate').val(response.DecisionDate);

它没有显示任何日期。

我的警报响应显示我上面的日期与“/Date(1583787600000)/”相同

我不知道为什么它在警报时显示不同以及我应该如何控制它。

编辑：

 $.ajax({
                    type: "GET",
                    url: "@Url.Action("JqueryFillControl")",
                    contentType: "application/json; charset=utf-8",
                    data: { id: Id },
                    dataType: "json",
                    success: function (response) {
                        if (response != null) {

                            const d = new Date(response.DecisionDate);
                            const formattedDate = d.getFullYear() + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + ("0" + d.getDate()).slice(-2)
                            $('#DecDate').val(formattedDate);
                        } else {
                            alert("Something went wrong");
                        }
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }

【问题讨论】：

标签： jquery ajax date datetime model-view-controller

【解决方案1】：

它是同一时间，但在 Epoch 中显示。您可以使用以下方法进行验证， https://www.epochconverter.com/

使用 new Date(value) 将其转换为 Date 对象。

如果需要，请按照此操作。

How convert input type="date" in timestamp javascript-jquery

【讨论】：

i 以下链接他们正在将其更改为某种日期格式。我需要用响应值填充我的日期控件

【解决方案2】：

HTML5 日期控件使用的日期格式如yyyy-mm-dd。所以，这可能是这里的问题之一。因此，您可以将 DecisionDate 转换为 Date 对象并获得正确的日期格式以显示在控件中，例如：

const d = new Date(response.DecisionDate.match(/\d+/)[0] * 1);
const formattedDate = d.getFullYear()+'-'+("0"+(d.getMonth()+1)).slice(-2)+'-'+("0"+d.getDate()).slice(-2)
$('#DecDate').val( formattedDate );

演示：

const decisionDate = '/Date(1583787600000)/';
const d = new Date(decisionDate.match(/\d+/)[0] * 1);
const formattedDate = d.getFullYear()+'-'+("0"+(d.getMonth()+1)).slice(-2)+'-'+("0"+d.getDate()).slice(-2)
$('#DecDate').val( formattedDate );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="DecDate" name="birthday">

【讨论】：

@palash 感谢您的回复，但我在使用上述代码时遇到此异常“指定值“NaN-aN-aN”不符合要求的格式，“yyyy-MM-dd” 。”
您能分享一下console.log( response.DecisionDate ) 和console.log( typeof response.DecisionDate ) 在控制台中显示的内容吗？
@palash consol.log 显示 /Date(1583787600000)/值
您的日期似乎是 json 格式。请尝试第一部分的更新代码。

【解决方案3】：

因此，对于您的场景，您可以使用moment.js，它是一个非常好的库，用于解析、验证、操作和显示JavaScript 中的日期和时间。请参考以下示例：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="date"></div>
<script type="text/javascript">
//var DecisionDate='3/10/2020 12:00:00 AM';
var DecisionDate='March 11 2020 12:00:00 AM';
var d=moment(DecisionDate).format('MM/DD/YYYY h:mm:ss a');
$("#date").text(d);     
alert(d);
</script>

注意：您需要通过在本地安装或使用演示中提供的 CDN 链接来引用 moment.js 文件。

工作演示：https://jsfiddle.net/01e7fwv8/

【讨论】：