JavaScript получить фокус на элемент / тег и перемещаться с помощью клавиши курсора

Question

Я создал приложение календаря, календарь на целую страницу, но проблема в том, что я хочу, чтобы всякий раз, когда страница календаря загружалась, дата фокусировалась / выбиралась автоматически, и я могу использовать стрелки для перемещения по датам,

Например, если я использую клавишу со стрелкой влево, предыдущая дата будет сфокусирована / выбрана и т. д.

Пожалуйста, дайте мне любое возможное решение в javascript или jquery.Я использовал div для разделения каждого элемента календаря,

Answer 1

Назначьте идентификатор каждому div.Например,

<div class="calendar" id="day1"></div>
<div class="calendar" id="day2"></div>

и некоторые javascript

var date = new date();  //GET DATE INFORMATION
var day = date.getDate(); //EXTRACT DAY OF MONTH

$(document).ready(function(){

  $('#day'+day).css("outline-style","solid"); //ADD FOCUS TO CURRENT DAY

  $('body').keyup(function(e){
    if (e.keycode == 37){  //IF LEFT ARROW
      $(".calendar").css("outline-style","none");
      day = day - 1;  
      $('#day'+day).css("outline-style","solid");
    }
    if (e.keycode == 39){  //IF RIGHT ARROW
      $(".calendar").css("outline-style","none");
      day = day + 1;
      $('#day'+day).css("outline-style","solid");
    }
  });

});

и некоторые css

.calendar{
outline-style:none;
outline-width:1px;
outline-color:<YOUR CHOICE>;
}

Это решение не учитывает нажатие левой стрелки, когда оно является первыммесяц или стрелка вправо, когда это последний месяц, но идея есть.