使用Bootsrap DTP将日期从JS传递到C#

Passing date from JS to C# using Bootsrap DTP

本文关键字：JS Bootsrap DTP 日期 使用      更新时间：2023-09-26

我有一些代码需要使用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
相关文章：