Главная > Javascript > ui datepicker подсветка определенных дат

ui datepicker подсветка определенных дат

21 марта 2016 Написать комментарий К комментариям

В примере нужно в inline datepicker сделать активными только те даты, когда публиковались материалы, соответственно по клику на дату — фильтр.
Собираем все даты в массив:

$ann_dates=array();
$all_ann=get_from_base('date','announce','1','id');
foreach($all_ann as $item){
	$ann_dates[]=date('Y-m-d',$item['date']);
}
$ann_dates=json_encode($ann_dates);

Добавляем beforeShowDay:

$(document).ready(function(){
	class_enabled='enabled';
	class_disabled='disabled';
	dates=<?=$ann_dates?>;
	$("#datepicker").datepicker({
		inline:true,
		<?if($_GET['type']=='announce'&&isset($_GET['d'])&&isset($_GET['m'])&&isset($_GET['y'])){?>
			defaultDate:"<?=$_GET['d']?>.<?=$_GET['m']?>.<?=$_GET['y']?>",
		<?}?>
		beforeShowDay:function(d){
			var date=$.datepicker.formatDate('yy-mm-dd',d);
			for(i=0,c=dates.length;i<c;i++){
				if(date==dates[i]){
					return[true,class_enabled];
				}
			}
			return[false,class_disabled];
		},
		onSelect:function(dateText,inst){
			$(this).css("background-color","");
			window.location.href="/announce/?d="+inst.selectedDay+"&m="+(inst.selectedMonth+1)+"&y="+inst.selectedYear
		}
	});
});

Это упрощенный вариант на основе реализации для Modx:
https://habrahabr.ru/post/111155/

Categories: Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации