使用Bootsrap DTP将日期从JS传递到C#
本文关键字:JS Bootsrap DTP 日期 使用 | 更新日期: 2023-09-27 18:25:55
我有一些代码需要使用JS从两个引导日期时间选择器中获取两个日期变量。然后,它应该将它们从按钮单击事件上的DTP传递给C#函数。
我一直在寻找这方面的教程,但它们似乎不适合我正在做的事情。
这是ASPX页面中的HTML/JS。
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</br></br></br></br></br></br></br></br></br>
<div class="container">
<div class='col-md-5'>
<div class="form-group" style="width: 200px;">
<div class='input-group date' id='datetimepickerFrom' style="cursor: pointer">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group" style="width: 200px;">
<div class='input-group date' id='datetimepickerTo' style="cursor: pointer">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$( '#datetimepickerFrom' ).datetimepicker( {
format: 'MM/DD/YYYY HH:mm',
stepping: 30,
toolbarPlacement: "bottom",
showTodayButton: true,
showClear: true
} );
$( '#datetimepickerTo' ).datetimepicker( {
format: 'MM/DD/YYYY HH:mm',
stepping: 30,
toolbarPlacement: "bottom",
showTodayButton: true,
showClear: true
});
$("#datetimepickerFrom").on("dp.change", function (e) {
$( '#datetimepickerTo' ).data( "DateTimePicker" ).minDate( e.date );
});
$("#datetimepickerTo").on("dp.change", function (e) {
$( '#datetimepickerFrom' ).data( "DateTimePicker" ).maxDate( e.date );
} );
} );
</script>
<div style="margin-top:100px; float:left; margin-left:40%";>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:GridView ID="GridView1" runat="server" AllowCustomPaging="True" AllowPaging="True"
AllowSorting="True" EnableSortingAndPagingCallbacks="True"></asp:GridView>
</div>
我是JS的新手,我很难理解如何从datepicker中获取变量,然后将其传递给C#中的codeehind。这是点击事件。。。
protected void Button1_Click(object sender, EventArgs e)
{
//DateTime DateFrom =
//DateTime DateTo =
GetRawData(DateFrom, DateTo);
}
如果社区中有任何好的教程或想法,我们将不胜感激。
您可以通过添加id
和runat
属性将input
标记转换为HTML服务器控件:
<div class='input-group date' id='datetimepickerFrom' style="cursor: pointer">
<input id="DateFrom" runat="server" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
...
<div class='input-group date' id='datetimepickerTo' style="cursor: pointer">
<input id="DateTo" runat="server" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
现在DateFrom
和DateTo
可以在服务器上访问:
protected void Button1_Click(object sender, EventArgs e)
{
string dateFrom = DateFrom.Value;
string dateTo = DateTo.Value;
// parse dates
// ...
}
请注意,这些值是字符串。您可以轻松地将它们转换为DateTime。
我通常创建一个隐藏的输入字段来保存值。
<input type="hidden" id="dateVal" runat="server" />
然后在javascript中,我更新了隐藏的输入:
$('#dateVal').val(e.date);
我在代码begind:中得到的值
String dateFrom = dateVal.Value;
//then parse into C# DateTime object