Блог

У меня есть эта форма, в которой я пытаюсь реализовать flatpickr.js . Мне удалось заставить календарь работать, и он сохраняет дату, как ожидалось, но, похоже, я не могу заставить его использовать параметры конфигурации, которые я передаю в наборе данных (мне специально нужно иметь возможность выбирать время в дополнение к датам).

Это поле ввода HTML:

 <%= f.text_field :authorized_at, data: { controller: "flatpickr", attributes: {enableTime: true, dateFormat: "Y-m-d H:i"} }, placeholder: "aaaa-mm-dd" , class: "form-control" %>
  

И в flatpickr.js контроллер, у меня есть это:

 import { Controller } from 'stimulus';
import flatpickr from 'flatpickr';

export default class extends Controller {

    connect() {
    let config = this.element.dataset.attributes
    console.log("Hello flatpickr")
    flatpickr(this.element, {config});
  }
}
  

Ведение журнала консоли this.element.dataset.attributes эффективно возвращает хэш с соответствующими параметрами, но календарь в представлении не отображает средство выбора времени.

Какие-либо подсказки о том, чего мне не хватает?

Мне удается заставить его работать, передавая параметры непосредственно в хэш контроллера следующим образом:

 flatpickr(this.element, {enableTime: true, dateFormat: "Y-m-d H:i"});
  

Но сохранение набора данных атрибутов в переменной и передача этого не работает.

РЕДАКТИРОВАТЬ: Хорошо, итак, проблема заключалась в том, что набор данных атрибутов отправлял ключи в виде строк, тогда как ожидался объект js.

Поэтому мне пришлось вызвать JSON.parse и передать набор данных, чтобы преобразовать его обратно, и это сработало:

     connect() {
    let config = JSON.parse(this.element.dataset.attributes)
    console.log("Hello flatpickr")
    flatpickr(this.element, config);
  }