Question

我正在尝试实现日历控件并使用jquery日历。我想点击一些日期。默认情况下，UI中的所有日期都是可点击的。我只想让这些日期点击来自数据库，我希望在C＃中访问值（点击的日期）。如果用户点击日期，我想显示一个弹出窗口并从C＃执行数据库操作。

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

我已成功实施控件但无法弄清楚如何传递在后面（.cs）文件中单击的日期

任何想法我应该怎么做。

更新

<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

您可以将其存储在ASP.NET hidden field中，并在后面的代码中访问它您可以像 -

那样实现它

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

并在您的Javascript代码中

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

然后在代码隐藏中访问它，如 -

hdnDate.Value

更新：
要仅选择几个日期，请使用DatePicker的beforeShowDay选项。

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 
                   }
                });

            }

        });
    });

服务器端定义静态方法

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

这是一个很好的链接：http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/检查

Answer 3

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

和你的jQuery

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

这假设您处于客户端ID配置或使用其他类...

背后的代码

string dateString = DataPicker.Text

或通过将其作为模型属性传递，演员表将自动完成

Answer 4

根据您使用的确切方法，实施很复杂/容易。

如果您正在使用Web表单，并且“需要”日期选择事件以在服务器上实际执行某些代码，那么您需要执行以下操作：

在页面中添加隐藏字段
在您的代码中注册自定义回发机制。这是相当复杂的，但是，以下SO帖子将指导您朝着这个方向：ASP.NET postback with JavaScript
在日期选择器初始化站点中，写下如下内容：

-

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

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

或者，您可以使用其中一个答案中提到的页面方法。

如果你使用的是asp.net mvc，你需要将正确的表单提交给服务器，因此在上面调用onDateChanged，你会找到html表单的实例，然后调用submit。

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

或者，如果您的控制器中有一个操作只接收进行某些处理的日期并返回一些数据，则可以使用$.ajax()调用异步实现此操作。

C＃中的jQueryUI日历单元格

4 个答案: