フォームなどでカレンダー表示させる「Datepicker」は今でもよく使われるプラグインですが、イベント等のLPなどで予約フォームを作る際に、期間を限定して、なおかつ定休日などのNGな日を指定して、ユーザーに選ばれないようにするというやり方をご紹介します。
まずはDatepickerの簡単な使い方から。
Datepickerは他のjQueryプラグインと同様、必要なJavaScriptとCSSファイルを読み込んで、オプションを決めるといった流れです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
オプションの書き方
<script> $(function(){ $("#datepicker").datepicker(); }); </script>
この辺りの詳しい情報はhttps://agohack.com/jquery-ui-datepicker/を参照ください。
<script> $(function() { var dateFormat = 'yy/mm/dd'; var disableDates = ['2022/12/14','2022/12/15','2022/12/19','2022/12/21'];//NGな日を決める $('#datepicker').datepicker({//IDを指定 dateFormat: dateFormat, minDate: new Date(2022, 12 - 1, 10),//期間の始まり(これは12月10日) maxDate: new Date(2022, 12 - 1, 23),//期間の終わり(これは12月23日) beforeShowDay : function(date) { var disableDate = $.datepicker.formatDate(dateFormat, date); if (disableDates.indexOf(disableDate) !== -1) { return [false, '']; } return [true, '']; }, }); }); </script>
指定した日と期間を書き換えればそのまま使えます。
ネットでdatepickerの期間限定や、NGな日の指定といったサンプルはありましたが、この2つが同時に指定されているサンプルがなかったので書いてみました。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)