jQueryUI Calendar cells in C#

Question

I am trying to implement a calendar control and using jquery calendar for it. I want to make some date clickable. By default all dates in the UI are click able. I only want to make those dates click able which are from Database and I want to access the value (of what date is clicked) in C#. If user click on a date I want to show a pop up and do database operation from C#.

<script>
   $(function() {
       $( "#datepicker" ).datepicker();
   });
</script>

I have implemented the control successfully but can not figure out how to pass the date clicked in Code behind (.cs) file

Any idea how should I go for it.

UPDATE

<script>
$(document).ready(function () {
    var enabledDays = ['11-30-2013', '12-14-2013', '12-21-2013', '01-11-2014', '01-11-2014', '01-25-2014', '02-08-2014', '02-22-2014', ]
        function enableAllTheseDays(date) {
            var m = date.getMonth(),
                d = date.getDate(),
                y = date.getFullYear();
            for (i = 0; i < enabledDays.length; i++) {
                if ($.inArray((m + 1) + '-' + d + '-' + y, enabledDays) != -1) {
                    return [true];
                }
            }
            return [false];
        }
    $('#datepicker').datepicker({
        dateFormat: 'mm-dd-yyyy',
        beforeShowDay: enableAllTheseDays
    });
});
</script>

Answer 1

You can store it in an ASP.NET hidden field and access it in code behind.
You can implement it like -

<asp:HiddenField runat="server" ID="hdnDate" ClientIDMode="Static" />

and in your Javascript code

<script>
$(function() {
var dateVal = $("#datepicker").val(); 
//Set your date value here
$("#hdnDate").val(dateVal);
});
</script>

and then access it in code-behind like -

hdnDate.Value

Update :
To select only a few dates, use DatePicker's beforeShowDay option.

Answer 2

    var enabledDays = <%= EnableDays %>;
//EnableDays is a property in aspx page Class
 and handle `beforeShowDay` calnder event 
$(function() {
        $( "#datepicker" ).datepicker({

             beforeShowDay: function (date) {

                   var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
                   if (!$.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {
                       return [false];

                   }
                   return [true];
               },
            //handle on select event
            onSelect: function (dateString, inst) {
               var selectedMonth = inst.selectedMonth +1 ;
               $.ajax({
                   type: "POST",

                   url: "<base url>/<asp page name>.aspx/web method name",
                   //year and month and day is the parameters name in the web method
                   data: "{year:"+inst.selectedYear+",month:"+ selectedMonth+",day:"+inst.selectedDay+"}",

                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (msg) {
                       var data = msg.d; //.net buts the data in msg.d not msg 
                   }
                });

            }

        });
    });

server side define static method

[WebMethod]
public static return_type method_name (int year,int month, int day)
{
    //you can return List<T> and process it in javascript or you can return html string
    //and bind it in js
} 

this is a good link: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ check it

Answer 3

 <asp:TextBox runat="server" id='DataPicker'>

and your jQuery

 <script>
  $(function() {
      $( "#DataPicker" ).datepicker();
  });
 </script>

This assume you are under client ID configuration Or use classes otherwise...

Code Behind

string dateString = DataPicker.Text

or by passing it as a model property, the cast is automatically done

Answer 4

Implementation is complex/easy depending on the exact approach you are using.

If you are using web forms, and you "need" the date select event to actually execute some code on the server, there are a few things you need to do:

1. Add a hidden field into the page
2. Register a custom postback mechanism in your code behind. This is rather complicated, however, the following SO post will set you in that direction: ASP.NET postback with JavaScript
3. In the date picker initialization site, write something like:

-

function onDateChanged(){
    //Invoke a full postback
    __doPostback('foo','');
}

$(function(){
    $('#datepicker').datepicker({
        'onSelect': function(dateText, inst){
            //Set the hidden control here.
                    //invoke postback
                    onDateChanged();
        }
    });
});

Alternatively, you can make use of pagemethods as mentioned in one of the answers here.

If you are using asp.net mvc, you need submit the correct form to the server, therefore instead calling onDateChanged above, you'd find the instance for the html form and call submit on that.

document.getElementById('form1').submit();

Alternatively if you have an action in your controller to receive just the date to do some processing and return some data back, this can be achieved asynchronously too using $.ajax() calls.