@Alexey10

Как добавить кнопки переключения по годам jquery ui datepicker?

Ребят, всем привет.
Использую календарь jquery ui datepicker.
Мне нужно под календарем сделать кнопки переключения по годам.
То есть кнопка 2017 переключает календарь на 2017 год и тд.
Как сделать подскажите ?
Вот что пока написал:
var inputDate = $("#datepicker");
	inputDate.datepicker({      
		showButtonPanel: true,
    });	

var Button2018     = '<button id="Button2018" class="ui-datepicker-current ' + 
	              'ui-state-default ui-priority-secondary ui-corner-all" '+
	              'type="button">2018</button> ';

var Button2017     = '<button id="Button2017" class="ui-datepicker-current ' + 
		                  'ui-state-default ui-priority-secondary ui-corner-all" '+
		                  'type="button">2017</button> ';
		
$('#datepicker').datepicker("option", "currentText", "Today " + Button2017  + Button2018 );


$('#Button2018').click(Button2018Selected);
$('#Button2017').click(Button2017Selected);

function Button2018Selected(){
		
    	$.datepicker._adjustDate(inputDate, +1, 'Y');
}
function Button2017Selected(){
		
    $.datepicker._adjustDate(inputDate, -1, 'Y');
	     
}
  • Вопрос задан
  • 199 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
А что, если надо было бы сделать 10 кнопок - вы бы под каждую написали отдельную функцию? Нет, так дела не делаются. Уберите id, добавьте кнопкам атрибут, который будет обозначать соответствующий год:

<input class="date">
<input class="date">
<input class="date">

const yearButton = year => `
  <button
    data-year="${year}"
    class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all"
  >${year}</button>
`;

$('.date').datepicker({
  showButtonPanel: true,
}).each(function(i) {
  $(this).datepicker(
    'option',
    'currentText',
    `Today ${yearButton(2015 + i * 2)}${yearButton(2015 + i * 2 + 1)}`
  );
});

$(document).on('click', '[data-year]', function() {
  $.datepicker._curInst.input.datepicker('setDate', `01/01/${$(this).data('year')}`);
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы