Passing date from JS to C# using Bootsrap DTP

Question

I have some code that needs to take two date variables from two bootstrap datetimepickers using JS. It is then supposed to pass them from the DTP's on the Button click event to a C# function.

I have been looking for tutorials for this but they don't seem to fit in with what I am doing.

Here is the HTML/JS in the ASPX page.

<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>

I am new to JS and I am struggling to understand how I get the variable from the datepicker and then pass it to the codebehind in C#. Here is the click event...

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

        GetRawData(DateFrom, DateTo);
    }

If there any good tutorials or ideas from the community it will be greatly appreciated.

Answer 1

You can transform input tags into HTML server controls by adding id and runat attributes:

<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>

Now DateFrom and DateTo can be accessed on server:

protected void Button1_Click(object sender, EventArgs e)
{
    string dateFrom = DateFrom.Value;
    string dateTo = DateTo.Value;

    // parse dates
    // ...
}

Please note that the values are strings. You can easily convert them to DateTime.