0

Есть календарь 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/[email protected]/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 );
2
  • 1
    я тут недавно отвечал про fullCalendar, там из под коробки есть русский ru.stackoverflow.com/a/1198171/331312 4 ноя 2020 в 9:18
  • @Михаил Камахин спасибо, но не вижу казахской локали что касается месяцев и дней и не понятно как его датапикером сделать, чтобы по пиктограмме кликать и заносилось значение в input
    – Вася
    4 ноя 2020 в 9:33

1 ответ 1

0

Нашел решение. Нужно проверить 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/[email protected]/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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.