Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

flatpickr まとめ と 祝日判定

カレンダー機能が欲しかったので、いいライブラリが見つかって使ってみた。
installもできるが、今回はlinkとscriptをhtml上においておく方法でやりました。
こういうの名前あると思うのですが、忘れました。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

参考:
公式
https://flatpickr.js.org/getting-started/
日本語版
https://tr.you84815.space/flatpickr/examples.html

const config ={
mode: 'multiple',
dataFormat: 'Y/m/d',
locale: 'ja',
disable: ['2021-02-23']
}
flatpickr('.flatpickr',config)

こんな感じで使用可能。
mode:multipleはカレンダー複数選択可能になる。
disable:[]は中に日付を入れると、その日付は選択できないようになる。
一度選択したらこの中に入れて2度選択できないようにしてみるといいかもね。
例) config.disable.push(2021-02-28)

月日数計算

function detMonthDays(yearStr,monthStr){
 let dayStr = 01
 let jsMonth = monthStr -1
 return new Date(yearStr,jsMonth+1,0).getDate()
}

getMonthDays(2021,02) //28
//月の日数を計算する関数 多分これで閏年も行けるはず

祝日計算

加えて、祝日を判定することがあったのでやってみました。
祝日は、可変的で固定ではないので計算は基本できません。
元号が変われば、天皇誕生日が変わりますし、オリンピック開催とかでも変わるのかな?

国が出している、csvから情報を取得して判定する方法をとります。
こんな感じのデータ
国民の祝日・休日月日,国民の祝日・休日名称
2021/1/1,元日
2021/1/11,成人の日
2021/2/11,建国記念の日

function getHoliday(){
 let req = new XMLHttpRequest()
 req.open('get','syukujitsu.csv',true)
 req.send(null)
 req.onload = function(){
 splitCsv(req.responseText)
 }
}

function splitCsv(str){
 let result = []
 let tmp = str.split('\n')

 for(let i = 1,i < tmp.length,i++){
  result[i] = tmp[i].split(',')
  result[i][0] = result[i][0].replace('\//','')
  holiday_result.push(result[i][0])
 }
}

流れは:
getHolidayでcsvをXMLHttpRequestで読み込む

splitCsvを読む

回数分forで回す(ただし、初回は省く)

データが、2021/1/1の形ですが、今回は2021-1-1の形にしたかったので
正規表現を用いて、/と-を入れ替え処理を挟む

入れ替えたデータをholiday_resultの配列に入れる
な感じ。

req.onload = function(){
splitCsv(req.responseText)
}

はrerurn設定ができなかったために、今回は、関数外にholiday_resultの配列を定義して使用しました。

読み込みの中では値を返すことはできないのかもしれません。(検索しても出て来なかった..)
あくまで、csvを読み込む処理を行うのみなのかもしれません。

dossy
関西人 ruby/javascript少々/Golang少々/PHP少々/Vue.js少々/Python少々 頭を賢くする方法を日々模索中 記事を読むには英語が大事だと思う
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away