首页 > 解决方案 > 通过解析 JSON 从 Javascript 中设置 DatePicker 值

问题描述

我的 .cshtml 页面中有一个文本输入字段,它是一个日期类型字段。

<div class="form-group">
     <label for="comments">ETA:</label>
     <input class="form-control text-box single-line" data-val="true" id="MilestoneETAEdit" name="MilestoneETAEdit" type="date" value="">
</div>

该字段很好地呈现为输入字段,右侧有一个日历下拉菜单。我可以手动从日历中选择任何日期。选择后,输入字段以MM/dd/yyyy格式显示日期

但在页面生命周期的后期,我需要解析 JSON 并将该字段设置为来自 JSON 的值。

日期字段在 JSON 中是这样出现的。

{
  "ETA":"/Date(1571855400000)/"
}

我尝试通过尝试以下方法来设置输入字段的值:

$('#MilestoneETAEdit').val(result.ETA);

它不起作用,我什至尝试对值进行硬编码。这也不起作用:

$('#MilestoneETAEdit').val('09/18/2019');

如何在输入字段中设置值?

标签: javascriptjqueryjsonrazordatepicker

解决方案


您需要从 ETA 值中删除/Date(和,并使用对象/将该字符串转换为日期。new Date()现在,输入类型日期接受yyyy-mm-dd格式值,您需要将日期转换为所需格式并设置val()为输入以查看日期

$(document).ready(function(){
  var result = {"ETA":"/Date(1571855400000)/"};
  var date = result.ETA.replace('/Date(','').replace(')','').replace('/','');
  console.log(date);
  var dateVal = new Date(parseInt(date)).toLocaleDateString();
  console.log(dateVal);
 dateVal = dateVal.substring(6,10) + "-" + dateVal.substring(0,2) + "-" + dateVal.substring(3,5);
  console.log(dateVal);
  $('#MilestoneETAEdit').val(dateVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">
     <label for="comments">ETA:</label>
     <input class="form-control text-box single-line" data-val="true" id="MilestoneETAEdit" name="MilestoneETAEdit" type="date" value="">
</div>


推荐阅读