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

Question

我有一些代码需要使用 JS 从两个 bootstrap 日期时间选择器中获取两个日期变量。然后应该将它们从按钮单击事件上的 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 的新手，我很难理解如何从日期选择器中获取变量，然后将其传递给 C# 中的代码隐藏。这是点击事件...

 protected void Button1_Click(object sender, EventArgs e)
    {
        //DateTime DateFrom = 
        //DateTime DateTo = 

        GetRawData(DateFrom, DateTo);
    }

如果社区有任何好的教程或想法，我们将不胜感激。

Answer 1

我通常创建一个隐藏的输入字段来保存值。

<input type="hidden" id="dateVal" runat="server" />

然后在 javascript 我更新隐藏输入：

$('#dateVal').val(e.date);

我在开始的代码中得到了那个值：

String dateFrom = dateVal.Value;
//then parse into C# DateTime object

Answer 2

您可以通过添加 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。

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

Passing date from JS to C# using Bootsrap DTP

javascript

c#

jquery

twitter-bootstrap

bootstrap-datetimepicker