Question

我有一个Jquery UI datepicker，我需要将数据属性添加到特定日期，因此我可以用它来显示在特定日期发生的事件。

我当前的状态仍然非常简单，我看到“突出显示”确实在特定日期添加了“标题”attr，但我似乎无法想象它甚至可以添加更多自定义数据属性

这是我突出显示的日期：

我希望有一个简单的数据属性和压缩日期，如data-events-date =“12042017”，所以我可以从列表中提取当天事件的数据。

 jQuery(document).ready(function() {

    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '12/04/2017' )] = new Date( '12/04/2017' ).toString();
    eventDates[ new Date( '12/06/2017' )] = new Date( '12/06/2017' ).toString();
    eventDates[ new Date( '12/20/2017' )] = new Date( '12/20/2017' ).toString();
    eventDates[ new Date( '12/25/2017' )] = new Date( '12/25/2017' ).toString();

    // datepicker
    jQuery('#courses-calendar').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                 return [true, "event", highlight];
            } else {
                 return [true, '', ''];
            }
         }
    });
});

如果有一个更好但更简单的选择 - 我愿意接受建议。谢谢

更新1 27/9

所以我回去改变了datepicker的工作方式，所以我不必将数据属性用作触发器。现在的问题 - 我不知道如何将“event”类添加到我的数组中的日期（想想我搞砸了那些东西）。

这是我的新代码：https://jsfiddle.net/5mkp1gxn/

只需要将类“event”添加到阵列上显示的日期。

Answer 1

为什么不设置数据如data-events-date =＆＃34; 12-04-2017＆＃34; 并将代码更改为

// datepicker
jQuery('#courses-calendar').datepicker({
    beforeShowDay: function( date ) {    //does heres date is data-events-date attribute? 
        var highlight = new Date( date.split("-").join("/")).toString();
        if( highlight ) {
             return [true, "event", highlight];
        } else {
             return [true, '', ''];
        }
     }
});

edited1

我使用Tooltip来美化事件的标题，你可以使用HTML和东西显示你想要的任何东西...... 例如，尝试将其中一个日期悬停在eventDates：

中

由于本地化无法正常工作，请使用您的日期格式在本地尝试

＆＃13;

//var a = ["2017/3/04","2017/9/28"];
var events = {
            "course": [{
                "date": "9-28-2017",
                "hour": "17:30",
                "title": "Class Name 1",
                "manager": "Khal Drogo",
                "link": "http://www.google.co.il"
            },
            {
                "date": "9-4-2017",
                "hour": "17:40",
                "title": "Class Name 2",
                "manager": "Little Finger",
                "link": "http://www.google.co.il"
            },
            {
                "date": "9-5-2017",
                "title": "Class Name 3",
                "manager": "Sansa Stark",
                "link": "http://www.google.co.il"
            },
            ]
    };
 a = events["course"];
//var a = {"2017/3/04":"do sth", "2017/9/28":"it works"}
// datepicker
jQuery('#courses-calendar').datepicker({
    beforeShowDay: function(date) {
        var dstring = date.toLocaleString().substring(0,9);
        var dAry = dstring.split("/");
        dAry.push(dAry.shift());
        dstring = dAry.join("-").split(" ").join("");
        var item,isHightlight=false;
        for(var i in a){
         if(a[i].date == dstring){
             isHightlight = true;
             item = a[i];
             break;
         }
        }
        
        //var isHightlight = typeof a[dstring] !== "undefined"?1:0;
        //highlight = date.toString();  //if u want time, use this
        highlight = typeof item !== "undefined" ? "title:"+(item.title+" \ncontent:"+item.manager+" \nlink:"+item.link):undefined;

        if( isHightlight === true ) {
            return [true, "event", highlight];
        } else {
            return [true, '', ''];
        }
}
});

＆＃13;

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<input id="courses-calendar" />

＆＃13;

edited2

如果你不想要这个代码，我想你应该问一个新问题。

Answer 2

我使用Tooltip来美化事件的标题，你可以使用HTML和东西显示你想要的任何东西...... 例如，尝试将其中一个日期悬停在eventDates：

中

由于本地化无法正常工作，请使用日期格式在本地试用

＆＃13;

// An array of dates
var eventDates = {
	'27/09/2017': 'EVENT NAME',
	'12/04/2017': 'EVENT NAME',
	'12/06/2017': 'EVENT NAME',
	'12/20/2017': 'EVENT NAME',
	'12/25/2017': 'EVENT NAME'
};

function pad (str, max) {
  str = str.toString();
  return str.length < max ? pad("0" + str, max) : str;
}

// datepicker
jQuery('#courses-calendar').datepicker({
	beforeShowDay: function(date) {
		var day = date.getDate();
		var month = date.getMonth() + 1;
		var year = date.getFullYear();
		var dateString = pad(day,2)+'/'+pad(month,2)+'/'+year;
		if(dateString in eventDates) {
			return [true, 'event', eventDates[dateString]];
		} else {
			return [true, '', ''];
		}
	}
});

jQuery(document).tooltip({
	items: '.event',
	content: function() {
		var day = $(this).text();
		var $parent = $(this).closest('td');
		var month = $parent.data('month') + 1;
		var year = $parent.data('year');
		var date = pad(day,2)+'/'+pad(month,2)+'/'+year;
		return date+' - <i>'+eventDates[date]+'</i><br>You can print here whatever you want...<br><b>Even in HTML!</b>';
	}
});

＆＃13;

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-it.js"></script>

<input id="courses-calendar" />

＆＃13;

将数据属性添加到特定日期（Jquery UI）

2 个答案:

edited1

edited2