隐藏字段中的日期时间选择器值答案

【问题标题】：Date Time Picker value in hidden field隐藏字段中的日期时间选择器值
【发布时间】：2021-12-08 03:09:08
【问题描述】：

我正在使用 daterangepicker 并借助以下代码创建了一个 asp.net 网络表单

      <script type="text/javascript">
          $(function () {
              $('#calendar').datetimepicker({
              format: 'L',
              inline: true
          });
        });
    </script>

<div id="calendar" style="width: 100%"></div>
<asp:HiddenField ID="HiddenField1" runat="server" />

我想将选定的日期显示到 asp.net 隐藏字段中

【问题讨论】：

您的字段已隐藏，但您想在此处显示所选日期！就像该字段已经隐藏一样，在那里显示所选值有什么意义？你想显示还是只绑定日期值？

标签： javascript jquery asp.net

【解决方案1】：

试试下面的代码。

$(function() {
    $('#calendar').datetimepicker({
        format: 'L',
        inline: true
    });
});

$("#calendar").on("dp.change", function (e) {
    alert(e.date);
    $('#HiddenField1').val(e.date);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
  <div id="calendar" style="width: 100%"></div>
<asp:HiddenField ID="HiddenField1" runat="server" />

【讨论】：