Datepickerで選択した日にちを、Riot.js側に渡したい

1803 ワード
DatePicker riot.js DatePicker テキストリンク

やりたいこと

Datepickerで選択した日にちを、Riot.js側に渡したい

困ったこと

  • onchangeとかoninputはイベント発火しない
  • onblurではイベント発火したが、DatepickerのonSelectやonCloseより前となってしまい、選択後の日にちを取得できない
    • メモ：datepicker onblurで検索すると、そこそこ出てくる。

要点

  • DatepickerのonSelect/onCloseで入力フォームのtriggerを発生させれば良い
    • でも、jQueryのtriggerはうまく発動しない(何故だろう・・・)
  • Pure JavaScriptのdispatchEventならうまく動いた
    • カスタムイベントにしといた

バージョン

  • Riot.js：3.3.2
  • jQuery：3.1.1
  • Datepicker：1.10.4

実装

Datepicker側(.jsファイルに書く方)

function doOpenCalendar () {
  $('#targetdate').datepicker({
    onSelect: function (dateText) {
      $('#targetdate').val(dateText)
    },
    onClose: function () {
      const event = new Event('myevent')
      document.getElementById(id).dispatchEvent(event)
    }
  })
  $('#targetdate').datepicker('show')
}

Riot.js側(.tagファイルに書く方)

  <input
    id="targetdate"
    type="text"
    name="targetdate"
    readonly="readonly"
    onfocus={open_calendar}
    onmyevent={close_calendar}
  >

  open_calendar(e) {
    e.preventDefault()
    doOpenCalendar()
  }

  close_calendar(e) {
    e.preventDefault()
    console.log(e.target.value)
  }