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

Posted 2023-05-08

【中文标题】隐藏字段中的日期时间选择器值

【英文标题】：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 隐藏字段中

【问题讨论】：

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

【参考方案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" />