Question

我有一些代码需要使用JS从两个bootstrap datetimepickers中获取两个日期变量。然后应该将它们从Button Click事件上的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＃中的代码隐藏。这是点击事件...

 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

您可以通过添加input和id属性将runat代码转换为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。

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

2 个答案: