年間200件にものぼる公務をしてこられていたというから驚きです。この場を借りて、本当にお疲れ様でしたとお伝えしたいです。・・・ということで、Datepicker。UI」では、日本の祝日に対応してません。そこをなんとか対応させるように作っていきます。ソースhtmlのコードだけ載せます。全てを記載せず、部分的に載せていきます。HTML上記ハイライトしている部分に的を絞って、解説していきます。必要なライブラリひとまず、必要なライブラリを列挙していきます。上記8行目から11行目、18行目から25行目の部分です。jquery-1.12.4.jsjquery-ui.jsjquery-ui.cssjquery.ui.datepicker-ja.min.jsjquery.holiday.jsjquery.holiday.cssjquery-1.12.4.jsjQuery本体です。今回はバージョン1.12.4を使っています。CDNを使うと、多少表示速度が上がるそうです。』このように書きます。UIというライブラリです。このように実装します。MenuCheckboxradioControlgroupTabsDialogSliderDatepickerProgressbarまだまだありますが、たった1行で作成できます。詳しく以下のサイトでご確認ください。入れないとクソダサいデザインになります。テーマを変えることで、いろんなデザインに変更できます。href="//code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css">「themes/〇〇〇」の〇〇〇の部分の変えると、デザインを変更できます。テーマの種類はbaseui-lightnessui-darknessblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticvader全部で25種類あります。上記のDEMOで、テーマを選べるようにしています。どんなデザインか試せるので、確認してみてください。※位置がずれますが、ご了承ください。jquery.ui.datepicker-ja.min.jsdatepickerを日本語対応させるために使います。ソフトウェアというサイトにあるライブラリです。「祝祭日ツールチップ」というものです。色を任意のものに変更できます。』ここからライブラリをダウンロードします。このように実装します。中身を少し改変して、令和元年以降の対応をしていきます。jquery.holiday.css日曜、土曜、祝日の色変更するためのCSSです。このように実装します。選択できないようにしていきます。94行目から98行目までをみてください。見ました?ホントに見た?えっ?エディタ起動してない?こらぁー!はい。元はこのようになっていると思います。これを以下のように変更します。dowはどうやら曜日を表すようで、0・・・日曜6・・・土曜となっています。日付をクリックしても選択されないようになっています。今度は祝日を追加していきます。294行目から314行目までをみてください。このように変更します。先に変数individualについてですが、その年で毎回異なる祝日を登録しています。今回は新天皇即位日となる2019年5月1日を登録しています。変数annualは、毎年祝日になる日付を登録しています。「2/1」の「2」は第2週目、「1」は曜日を表すみたいです。「1」は月曜日でしたね。うまくできとる・・・(>_<)次にこの部分。[{'day':'23<2018','name':'天皇誕生日'}]2019年から12月23日は祝日ではなくなり、2018年以前に祝日が入るように登録しています。この「23<2018」の「<」の部分。以降の「>」はできますが、自分で実装する必要があります。【jquery.holiday.js】「以前」を表す”<”を使えるようにする以前を表す「<」ができるように設定していきます。204行目から234行目をみてください。年間の祝祭日を計算している部分です。この特定日以降の下に特定日以前を追加します。特定日以降の部分をコピペして、「>」を「<」に変更するだけですね。これで、2018年以前の12月23日は「天皇誕生日」とする祝日が設定できます。[{'day':'23<2018','name':'天皇誕生日'}]が機能するようになると思います。HTMLファイル内にあるscriptコード次はHTMLファイル30行目から32行目のこの部分。$.datepicker.setDefaults($.datepicker.regional["ja"]);これは、なんか日本語に対応させるために必要。$('#datepicker').datepicker().holiday();通常は$('#datepicker').datepicker();だけですが、holiday.jsを使う際、「.holiday()」をつける必要があるとのこと。まとめさて、駆け出しエンジニアのみなさん(僕も含め)、実装できたでしょうか?できなかった方は、ググってください(笑)コード量としては、そんなに多くないので、すぐ実装できると思います。※この記事の文字数が多くなってしまった。こんな簡単にデザインの良いカレンダーを実装できるとは、いい世の中になった。holiday.jsというライブラリを作成したドルフィーソフトウェアの中の方、ありがとうございます!このライブラリ使っている方、結構多いんじゃない?っていうくらい良くできてますよね。初心者の僕が言うのもなんですけど・・・。』を使う理由は、高速で、高い安定性を誇っているからです。月額900円から利用できるので、ブログ初心者の僕にとって、経済的にみてありがたい。・ブログを始めたい・自分のサイトを作りたい・プログラミングでもっとステップアップしたいという方は、1度試してみるといいと思います。23:54こんにちわ。datepickerを探していてたどり着きました。詳しく書いてありありがたい限りです。10:53コメントありがとうございます。jquery.holiday.jsの200行目付近に「//年間の祝祭日の計算」という祝祭日の日付計算をしている部分があります。そこで分岐をするための文字列です。17:44はじめまして。わかりやすい情報ありがとうございます。18:50コメントありがとうございます。返信が大変遅くなりまして、申し訳ございません!振替休日の件ですが、このように260行目付近に振替休日の補正をしたコードがありまして、対応はされている思いますが、できませんでしたか?試しに天皇誕生日(2月23日で今年は日曜日)を入れたところ、その翌日は休日と同じ状態になりました。よければ、どの振替休日が反映されていない教えて頂ければ確認してみます。コメントをキャンセルメールアドレスが公開されることはありません。【ブログにプログラミングは必要?】勉強してからでも遅くない!30代高卒パパがブログをするまでに行った、たった3つのこと今回は、プログラミングを勉強してからブログを開始した、30代高卒パパが行った3つのことについてご紹介していきます。61日目から80日目まで書いていきます。今回は、20日分書いていきます。最近#100DaysOfCodeというTwitterのハッシュタグが流行っています。文字通り、プログラミングの勉強を100日間続けてたら、しっかり身につくんじゃね?という試みですね。...ドットインストールから卒業。Windowsで2個目のローカル開発環境を構築してみた【LAMP】こんにちは。パソコン教室の先生をしてます、じゅんぱぱ(@HakataJunpapa)です。今回は、「Windowsで2個目のローカル開発環境を構築してみた」です。...jQueryを使い、iframeのsrcを動的に書き換えようとしてハマった話まずは、以下のHTMLを見てください。ここで、はまりました。@HakataJunpapa高卒パパブロガーの「じゅんぱぱ」です。高卒でも好きなことを「トコトン」やっていけば、楽しい仕事ができ、家族もでき、幸せに生活できるぞ!ということを証明します。最新投稿一覧2019/09/26シフォンケーキマリー(MARIE)が博多駅に!どんなお店?味は?種類は?こんにちは。甘いもの好きパパ、じゅんぱぱ(@HakataJunpapa)です。2019年9月、博多駅構内にオープンした「MARIE(マリー)」というシフォンケーキ店に行ってきました。...2019/09/03【じゅんぱぱの独り言】ブログ開始から半年を終えて・・・|記事数50どうも、こんにちは。じゅんぱぱ(@HakataJunpapa)です。この記事を見ている人のほとんどは、ぼくのTwitter経由からだと思います。...2019/08/28【福岡】明太フランスよりもうまい?箱崎のパン屋「パンストック」塩パンうめぇ~な話こんにちは。高卒パパブロガーじゅんぱパン(@HakataJunpapa)です。ラスクも販売してました。