Search code examples
jqueryasp.netc#-4.0bootstrap-datetimepickereonasdan-datetimepicker

I want to pass variables from C#(ASP.NET 4.5) button event to a JQuery function


I have been trying to learn how to pass variables from a C# method in my page, to a JQuery DateTimePicker. My C# works fine, but I cannot find a good tutorial that relates to the specific task of passing my DateTime value from C# to the JQuery DateTimePicker. I have looked on here and tried a few things, but they don't work.

I am not expecting anyone to solve it for me, I am asking for a good and solid tutorial about passing data from C# to JQuery functions, specifically around datetime, so I can solve it myself.

I have tried the JQuery site and could not find anything.

Thanks in advance.

The current DTP Jquery code is:

 <script type="text/javascript">
                            $( function ()
                            {
                                $( '#datetimepickerFrom' ).datetimepicker( {
                                    format: 'DD/MM/YY HH:mm',
                                    stepping: 30,
                                    toolbarPlacement: "bottom",
                                    showTodayButton: true,
                                    showClear: true,
                                    collapse: true
                                } );

                                $( '#datetimepickerTo' ).datetimepicker( {
                                    format: 'DD/MM/YY HH:mm',
                                    stepping: 30,
                                    toolbarPlacement: "bottom",
                                    showTodayButton: true,
                                    showClear: true,
                                } );
                                $( "#datetimepickerFrom" ).on( "dp.change", function ( e )
                                {
                                    $( '#datetimepickerFrom' ).data( "DateTimePicker" ).minDate( e.date );
                                } );

                                $( "#datetimepickerTo" ).on( "dp.change", function ( e )
                                {
                                    $( '#datetimepickerTo' ).data( "DateTimePicker" ).maxDate( e.date );
                                } );
                            } );

    $( "input[id$='btnMonth']" ).click( function ()
                            {
                                var MonthFrom = $( "#HiddenMonthFrom" ).val();
                                var MonthTo = $( "#HiddenMonthTo" ).val();
                                alert( MonthFrom + " to " + MonthTo );
                                $( '#datetimepickerTo' ).data( "DateTimePicker" ).setDate(MonthFrom);                          
                            } );

I have added this and can now get the data from hidden fields:

The C# code is from a button on the web page.

    protected void btnYesterday_Click(object sender, EventArgs e)
    {         
        DateTime b = a.GetYesterDayDateTimeFrom();//Gets the from date and time eg: Yesterday at 4pm
        DateTime c = a.DateTo();//Is the date to value eg: tomorrow at 3pm
        //Here is where I want to pass the dates to the JQuery DTP
    }

Solution

  • Assuming you're using my picker change your code to use date([newDate])

    $( "input[id$='btnMonth']" ).click(function ()
    {
        var MonthFrom = $( "#HiddenMonthFrom" ).val();
        var MonthTo = $( "#HiddenMonthTo" ).val();
        alert( MonthFrom + " to " + MonthTo );
        $('#datetimepickerTo').data("DateTimePicker").date(MonthFrom);                          
    });