Livewire で Fomantic-UI のカレンダーを使うには２？calendar

/ Livewire / By
ショコラ
ショコラ

Livewire で Fomantic-UI のカレンダーを使うには２？calendar

カレンダーのポイントは、カレンダーが消えるタイミングで イベントを発火 するところです。

もっさん先輩
もっさん先輩

出張日のカレンダー

<div class="ui calendar datetime shuccho_dt">
  <div class="ui input left icon">
    <i class="icon calendar"></i>
    <input type="text" wire:model="shuccho_dt">
  </div>
</div>

カレンダー共通のJavaScript部分

// カレンダー
$('.ui.calendar').calendar({
  monthFirst: false,
  text: {
    days: ['日','月','火','水','木','金','土'],
    months:     ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    monthsShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    today: '今日',
    now: '今',
    am: '午前',
    pm: '午後'
  },
  formatter: {
    date: 'YYYY年MMMMD日',
    datetime: 'YYYY年MMMMD日 HH時mm分',
  },
})
$('.ui.calendar.date').calendar('setting','type','date')
$('.ui.calendar.datetime').calendar('setting','type','datetime')

任意のカレンダーのスクリプト部分

カレンダー変更時に通信するならこちら

$('.shuccho_dt').calendar('setting','onHidden',(date,text,mode) => @this.set('shuccho_dt',text))

後でデータを送るならこちら

$('.shuccho_dt').calendar('setting','onHidden',(date,text,mode) => $('.shuccho_dt input')[0].dispatchEvent(new Event('input')))

JavaScriptでカレンダーを消して通信するならこちら

<button type="button" class="ui button"
 onClick="$('.shuccho_dt').calendar('clear'); @this.set('shuccho_dt','')">

JavaScriptでカレンダーを消して、後でデータを送るならこちら

<button type="button" class="ui button"
 onClick="$('.shuccho_dt').calendar('clear'); $('.shuccho_dt input')[0].dispatchEvent(new Event('input'))">

以上

Scroll to Top