Как добавить локализацию в календарь datapicker на чистом js?

199
19 апреля 2022, 00:00

Есть календарь datapicker на чистом javascript.

document.addEventListener('DOMContentLoaded', () => {
  if (datepicker) {
    let datepickerClickElem = document.querySelector('.datepicker img');
    let datePickerElem = document.querySelector('.date-picker-element');
    let picker = null;
    if (datePickerElem) {
      picker = datepicker(datePickerElem, {
        customDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        customMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      });
      if (datepickerClickElem) {
        datepickerClickElem.addEventListener('click', function(e) {
          e.stopPropagation();
          let isHidden = picker.calendarContainer.classList.contains('qs-hidden');
          if (isHidden) {
            picker[isHidden ? 'show' : 'hide']();
          }
        });
      }
    }
  }
})
<link href="https://unpkg.com/js-datepicker/dist/datepicker.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/js-datepicker@5.16.0/dist/datepicker.min.js"></script>
<div class="datepicker">
  <img src="https://img1.freepng.ru/20180403/lkq/kisspng-solar-calendar-symbol-computer-icons-encapsulated-calendar-icon-5ac41db82504c0.0773126515228021041516.jpg" width="50px" height="50px">
  <input class="date-picker-element" type="text">
</div>

Мне нужно его локализировать (месяцы, недели) в зависимости html lang="ru-RU" или lang="kz-KZ".

Для datapicker библиотеки jquery есть такой вариант, но он кроме самой jquery тянет за собой еще и jquery ui, что совсем не вариант

datepicker.regional.ru = {
    closeText: "Закрыть",
    prevText: "&#x3C;Пред",
    nextText: "След&#x3E;",
    currentText: "Сегодня",
    monthNames: [ "Январь","Февраль","Март","Апрель","Май","Июнь",
    "Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь" ],
    monthNamesShort: [ "Янв","Фев","Мар","Апр","Май","Июн",
    "Июл","Авг","Сен","Окт","Ноя","Дек" ],
    dayNames: [ "воскресенье","понедельник","вторник","среда","четверг","пятница","суббота" ],
    dayNamesShort: [ "вск","пнд","втр","срд","чтв","птн","сбт" ],
    dayNamesMin: [ "Вс","Пн","Вт","Ср","Чт","Пт","Сб" ],
    weekHeader: "Нед",
    dateFormat: "dd.mm.yy",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.ru );
Answer 1

Нашел решение. Нужно проверить HTMLElement.lang - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang

document.addEventListener('DOMContentLoaded', () => {
    if (datepicker) {
        let datepickerClickElem = document.querySelector('.datepicker img');
        let datePickerElem = document.querySelector('.date-picker-element');
        let picker = null;
        if (datePickerElem) {
            console.log(document.documentElement.lang);
            if (document.documentElement.lang === "ru-RU") {
                picker = datepicker(datePickerElem, {
                    customDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
                    customMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
                });       
            }
            else {
                picker = datepicker(datePickerElem, {
                    customDays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
                    customMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                });       
            }
            if (datepickerClickElem) {
                datepickerClickElem.addEventListener('click', function(e) {
                    e.stopPropagation();
            
                    let isHidden = picker.calendarContainer.classList.contains('qs-hidden');
                    if (isHidden) {
                        picker[isHidden ? 'show' : 'hide']();
                    }
                });    
            }  
        }
    }
})
<link href="https://unpkg.com/js-datepicker/dist/datepicker.min.css" rel="stylesheet" />
<script src="https://unpkg.com/js-datepicker@5.16.0/dist/datepicker.min.js"></script>
<div class="datepicker">
  <img src="https://img1.freepng.ru/20180403/lkq/kisspng-solar-calendar-symbol-computer-icons-encapsulated-calendar-icon-5ac41db82504c0.0773126515228021041516.jpg" width="50px" height="50px">
  <input class="date-picker-element" type="text">
</div>

READ ALSO
Помогите, пожалуйста, перевести в jquery
jQuery

Помогите, пожалуйста, перевести в jquery

 121
Проблемы с js Wordpress
jQuery

Проблемы с js Wordpress

Есть сайтссылка на сайт Когда заходишь сюда - видно отвал jQuery из-за ошибок в консоли, ошибки вызывают как по мне какие-то автогенерирующиеся...

 166
Как найти все td под th?
jQuery

Как найти все td под th?

Делаю календарь(с разбивкой по неделям)С возможностью выбрать время и закрасить его

 238
JS Как менять активный элемент коллекции?
jQuery

JS Как менять активный элемент коллекции?

Пытаюсь переписать код с jQuery на ванильный JSПри клике на элемент коллекции должен добавляться класс 'active', а при клике на другой элемент класс...

 139