将自定义参数添加到jQuery UI Datepicker [英] Add custom parameter to jQuery UI Datepicker

问题描述

我正在寻找一种向jQuery UI Datepicker中的日期添加参数的方法. 我正在使用Datepicker显示课程开始日期.我需要的参数将是在该特定日期开始的课程的ID.

I am looking for a way to add a parameter to the dates in the jQuery UI Datepicker. I am using the Datepicker to display course start dates. The parameter I need would be the id of the course that starts on that particular date.

我正在像这样初始化日期选择器:

I am initializing the datepicker like this:

$( "#datepicker" ).datepicker({
    dateFormat: 'dd-mm-yy',
    showWeek: true,
    firstDay: 1,
    numberOfMonths: 3,
    beforeShowDay: enableAllTheseDays
});

enableAllTheseDays函数如下所示:

The function enableAllTheseDays looks like this:

function enableAllTheseDays(date) {
    var m = ('0'+parseInt(date.getMonth()+1)).slice(-2),
        d = ('0'+date.getDate()).slice(-2),
        i y = date.getFullYear();
    for (i = 0; i < enabledDays.length; i++) {
        if($.inArray((d + '-' + (m) + '-' + y).toString(),enabledDays) != -1) {
            return [true];
        }
    }
    return [false];
}

enabledDays数组包含所有启用的日期，其余日历被禁用.另外，我在每个日期添加了一个带有课程ID的数组.

The enabledDays array contains all enabled dates, the rest of the calendar is disabled. In addition, I added an array with the course id to each date.

我认为我需要在enableAllTheseDays函数中进行更改，但是我无法弄清楚如何获得对基础日期对象的访问权限，以便我可以将课程ID插入到各个已启用日期的属性中. 这样，我可以在选择日期后将课程ID作为参数传递给输入字段.

I figure I need to make the change in the enableAllTheseDays function, but I can not figure out how to get access to the underlying date object so that i can insert the course id as an attribute to the individual enabled dates. This way I could pass the course id as a parameter to the input field after date selection.

感谢您的见解.

推荐答案

这里尝试使用onSelect方法进行日期选择器.

Heres my attempt using the onSelect method for datepicker.

我还没有更新基础的Date对象，而是只是将一个新的data属性添加到"Result"输入字段中.选择后，它将搜索名为课程的对象(代表您的课程ID和日期列表)以查找与所选日期匹配的对象.

I have not updated the underlying Date object, instead just added a new data attribute to the "Result" input field. On select, it searches an object called courses (representing your list of course ids and dates) for a match for the selected date.

使用firebug/developer工具检查输入字段，以查看data-course-id属性更新.该月的前三天有相关课程...

Inspect the input field with firebug/developer tools to see the data-course-id attribute update. First 3 days of the month have associated courses...

http://jsfiddle.net/Seandeburca/qbLwD/

var input = $("#datepicker");
var result = $("#result");

var courses = {
    "01-09-2013" : "javascript",
    "02-09-2013" : "history",
    "03-09-2013" : "biology",
    "10-09-2013": "physics"
};

input.datepicker({
   dateFormat: 'dd-mm-yy',
   showWeek: true,
   firstDay: 1,
   numberOfMonths: 3, 

   onSelect: function(dateText, pickerObj){

     result.attr("data-course-id", courses[dateText]); 
     course.innerHTML = courses[dateText]; 
   },

   altField: "#result"
});

这篇关于将自定义参数添加到jQuery UI Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！