Hubspotのフィールドタイプ：日付選択カレンダーを、Picker.jsに変更する方法

Hubspotの日付選択カレンダーを使用しながら、例えばお正月休暇などを設定して、ユーザーが選択できないように変更できるpicker.jsに入れ替える方法を考察しました。

まずはHubspotのフォームでフィールドタイプ：日付選択カレンダーを用意します。必須は外して、初期値の設定も無くして用意します。
その際に、コンタクトのプロパティー名をメモしておいてください。

手順１：picker.jsの用意

picker.jsを設定します。
公式サイトからダウンロードしたファイルを用意して
hubspotのマーケティング>ファイルとテンプレート>ファイルに
以下のCSSの2ファイル
/Custom/page/pickadate/css/default.css
/Custom/page/pickadate/css/default_date.css
以下のJSの3ファイル
/Custom/page/pickadate/js/picker.js
/Custom/page/pickadate/js/picker_date.js
/Custom/page/pickadate/js/legacy.js
を用意しました

今回は、hubspotテンプレートに追加していきます。
hubspotのマーケティング>ファイルとテンプレート>デザインツールに移動し、テンプレートから追加したい編集画面を選択したら「追加のマークアップ」に以下追加


<!-- pickadate用スタイル -->
<link rel="stylesheet" href=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/css/default.css') }}">
<link rel="stylesheet" href=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/css/default_date.css') }}">

<!-- pickadate本体 -->
<script src=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/js/picker.js') }}"></script>
<script src=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/js/picker_date.js') }}"></script>
<!-- レガシーブラウザへの対応用ファイル -->
<script src=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/js/legacy.js') }}">
</script>

これで、入力項目の下準備が出来ました。

カレンダーの色の変更

日曜・土曜・選択できない日などにオリジナルカラーを設定する。


<style>
fieldset:first-child {
  display: none;
 }
h2.heading1 span{
	display: inline;
}
.datepicker{
	border: 2px solid #ccc;
	font-size: 20px;
}
/*日曜*/
tr td:first-child .picker__day--infocus {
  color: #e34e22;
}
/*土曜*/
tr td:last-child .picker__day--infocus {
  color: #143F92;
}
/*先月・来月*/
tr td:first-child .picker__day--outfocus {
    color: #fac0af;
}
tr td:last-child .picker__day--outfocus {
    color: #afc5ed;
}
/*ホバー*/
tr td:first-child .picker__day--infocus:hover,
tr td:first-child .picker__day--outfocus:hover {
    color: #e34e22;
}
tr td:last-child .picker__day--infocus:hover,
tr td:last-child .picker__day--outfocus:hover {
    color: #143F92;
}
/*選択不可*/
tr td:first-child .picker__day--disabled,
tr td:first-child .picker__day--disabled:hover,
tr td:first-child .picker__day--disabled:hover {
    color: #fac0af;
}
tr td:last-child .picker__day--disabled,
tr td:last-child .picker__day--disabled:hover,
tr td:last-child .picker__day--disabled:hover {
    color: #afc5ed;
}
.picker__footer {
    text-align: right;
}
</style>

旧バージョンのIEは外す

旧バージョンのIEでは、picker.jsがうまく起動しません。
これは仕様上仕方がないので、今回はpicker.jsに切り替える処理から外します。


<script>
$(window).load(function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('trident') > -1 || userAgent.indexOf("firefox") > -1 ) {
		/*IE6.7.8.9.10.11*/
	} else {
		/*旧IE以外のブラウザ*/
	}
});
</script>

カレンダーの初期値を今日の3日後にする

何かの予約サイトフォームだと仮定してください。当日の予約は電話でのみの受付の場合、サイトからの予約は当日から3日後にしたくありませんか？


		var nowDate = new Date();
		//本日から　3日後のDate
		var i=3;
		var futureDate = new Date(nowDate.getTime() + i*24*60*60*1000);
		var futureTxt = futureDate.getFullYear() + '-' + (futureDate.getMonth()+1) + '-' + futureDate.getDate();

picker.js のカレンダーを追加

冒頭に書いた「コンタクトのプロパティー名をメモしておいてください。」の出番です。
futureTxtが先ほどの初期値になります。


		$('.hs-dateinput').append('<input type="text" class="datepicker hs-input" name="コンタクトのプロパティー名 " value="' + futureTxt + '">');

Hubspotの元々のカレンダー機能に処理を加える

非表示にして、データがダブらないようにdisabledを加えます。


		$('.hs-dateinput > input:first-child,.hs-datepicker').css({'display': 'none'});
		$('.hs-dateinput > input:first-child').prop("disabled", true);

pickadateの設定

詳しい設定の方法は、他サイト様でも多く書かれていますので、そちらを参考にしてください。


		$('.datepicker').pickadate({
			monthsFull: [ '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月' ],
			weekdaysFull: [ '日' , '月', '火', '水', '木', '金', '土'],
			weekdaysShort: [ '日' , '月', '火', '水', '木', '金', '土'],
			today: false,
			clear: false,
			close: '閉じる',
			format: 'yyyy-mm-dd',
			firstDay: 0,//日曜始まり
			min: 3,//当日より3日以内非選択
			max: new Date(2020,03,01),//実際の日付から30日マイナス（2020,03,31）
			disable: [
			//年末年始
				{ from: [2019,11,29], to: [2019,12,01] },//実際の日付から30日マイナス（2019,12,29～2020,01,01）
			//定休：毎週 水曜日
			//1:日 2:月 3:火 4:水 5:木 6:金 7:土
				4
			]
		});

完成がこちら


<!-- pickadate用スタイル -->
<link rel="stylesheet" href=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/css/default.css') }}">
<link rel="stylesheet" href=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/css/default_date.css') }}">
<style>
fieldset:first-child {
  display: none;
 }
h2.heading1 span{
	display: inline;
}
.datepicker{
	border: 2px solid #ccc;
	font-size: 20px;
}
/*日曜*/
tr td:first-child .picker__day--infocus {
  color: #e34e22;
}
/*土曜*/
tr td:last-child .picker__day--infocus {
  color: #143F92;
}
/*先月・来月*/
tr td:first-child .picker__day--outfocus {
    color: #fac0af;
}
tr td:last-child .picker__day--outfocus {
    color: #afc5ed;
}
/*ホバー*/
tr td:first-child .picker__day--infocus:hover,
tr td:first-child .picker__day--outfocus:hover {
    color: #e34e22;
}
tr td:last-child .picker__day--infocus:hover,
tr td:last-child .picker__day--outfocus:hover {
    color: #143F92;
}
/*選択不可*/
tr td:first-child .picker__day--disabled,
tr td:first-child .picker__day--disabled:hover,
tr td:first-child .picker__day--disabled:hover {
    color: #fac0af;
}
tr td:last-child .picker__day--disabled,
tr td:last-child .picker__day--disabled:hover,
tr td:last-child .picker__day--disabled:hover {
    color: #afc5ed;
}
.picker__footer {
    text-align: right;
}
</style>
<!-- pickadate本体 -->
<script src=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/js/picker.js') }}">
</script><script src=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/js/picker_date.js') }}"></script>
<!-- レガシーブラウザへの対応用ファイル --><script src=" {{ get_asset_url('/コードファイル/Custom/page/pickadate/js/legacy.js') }}"></script>
<script>
$(window).load(function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('trident') > -1 || userAgent.indexOf("firefox") > -1 ) {
		/*IE6.7.8.9.10.11*/
	} else {
		var nowDate = new Date();
		//本日から　3日後のDate
		var i=3;
		var futureDate = new Date(nowDate.getTime() + i*24*60*60*1000);
		var futureTxt = futureDate.getFullYear() + '-' + (futureDate.getMonth()+1) + '-' + futureDate.getDate();

		$('.hs-dateinput').append('<input type="text" class="datepicker hs-input" name="コンタクトのプロパティー名 " value="' + futureTxt + '">');
		$('.hs-dateinput > input:first-child,.hs-datepicker').css({'display': 'none'});
		$('.hs-dateinput > input:first-child').prop("disabled", true);

		$('.datepicker').pickadate({
			monthsFull: [ '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月' ],
			weekdaysFull: [ '日' , '月', '火', '水', '木', '金', '土'],
			weekdaysShort: [ '日' , '月', '火', '水', '木', '金', '土'],
			today: false,
			clear: false,
			close: '閉じる',
			format: 'yyyy-mm-dd',
			firstDay: 0,//日曜始まり
			min: 3,//当日より3日以内非選択
			max: new Date(2020,03,01),//実際の日付から30日マイナス（2020,03,31）
			disable: [
			//年末年始
				{ from: [2019,11,29], to: [2019,12,01] },//実際の日付から30日マイナス（2019,12,29～2020,01,01）
			//定休：毎週 水曜日
			//1:日 2:月 3:火 4:水 5:木 6:金 7:土
				4
			]
		});
	}
});
</script>

Ofuta me!

Movable Typeの方が使い慣れているWordPress初心者のブログ

hubspotのフォーム(フィールドタイプ：日付選択カレンダー)を、指定の日付や曜日を選択できないように変更できるpicker.jsに入れ替える方法

手順１：picker.jsの用意

カレンダーの色の変更

旧バージョンのIEは外す

カレンダーの初期値を今日の3日後にする

picker.js のカレンダーを追加

Hubspotの元々のカレンダー機能に処理を加える

pickadateの設定

完成がこちら

コメントを残すコメントをキャンセル

2024年10月
月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

手順１：picker.jsの用意

カレンダーの色の変更

旧バージョンのIEは外す

カレンダーの初期値を今日の3日後にする

picker.js のカレンダーを追加

Hubspotの元々のカレンダー機能に処理を加える

pickadateの設定

完成がこちら

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル