https://www.tokyodome-hotels.co.jp/assets/hotel/scripts/modules/reservationFormController.js

1import { toYMD } from '../../../common/scripts/utility/date.js';
2export class ReservationFormController {
3    #form;
4    /**
5     * チェックインフィールド
6     */
7    #checkin;
8    /**
9     * チェックインの隠しフィールド（サーバー送信用）
10     */
11    #checkinHidden;
12    /**
13     * チェックアウトフィールド
14     */
15    #checkout;
16    /**
17     * チェックアウトの隠しフィールド（サーバー送信用）
18     */
19    #checkoutHidden;
20    /**
21     * 子供の人数フィールド
22     */
23    #children;
24    /**
25     * 子供の人数の隠しフィールド（サーバー送信用）
26     */
27    #childrenHidden;
28    /**
29     * @constructor
30     * @param form 宿泊予約フォーム
31     */
32    constructor(form) {
33        this.#form = form;
34        this.#checkin = this.#form.querySelector('.fn-reservation-form__checkin');
35        this.#checkinHidden = this.#form.querySelector('.fn-reservation-form__checkinHidden');
36        this.#checkout = this.#form.querySelector('.fn-reservation-form__checkout');
37        this.#checkoutHidden = this.#form.querySelector('.fn-reservation-form__checkoutHidden');
38        this.#children = this.#form.querySelector('.fn-reservation-form__children');
39        this.#childrenHidden = this.#form.querySelector('.fn-reservation-form__childrenHidden');
40    }
41    init() {
42        this.#bindEvents();
43        this.#setTodayDates();
44    }
45    /**
46     * 現在日付の反映
47     */
48    #setTodayDates() {
49        if (!this.#checkin || !this.#checkout) {
50            return;
51        }
52        const today = new Date();
53        const tomorrow = new Date(today);
54        tomorrow.setDate(today.getDate() + 1);
55        const todayStr = toYMD(today);
56        const tomorrowStr = toYMD(tomorrow);
57        this.#checkin.value = todayStr;
58        this.#checkout.value = tomorrowStr;
59        // NOTE: 入力可能な最小日付を設定
60        this.#checkin.min = todayStr;
61        this.#checkout.min = tomorrowStr;
62    }
63    /**
64     * イベント登録
65     */
66    #bindEvents() {
67        this.#form.addEventListener('formdata', (event) => {
68            if (!this.#checkin || !this.#checkout) {
69                return;
70            }
71            const checkinDate = new Date(this.#checkin.value);
72            const checkoutDate = new Date(this.#checkout.value);
73            event.formData.set('checkin', toYMD(checkinDate, '/'));
74            event.formData.set('checkout', toYMD(checkoutDate, '/'));
75            event.formData.set('kids_tiers', `[{"code":"D","children":${this.#children?.value || '0'}}]`);
76        });
77    }
78}
79(() => {
80    const forms = document.querySelectorAll('.js-reservation-form');
81    if (forms.length === 0) {
82        return;
83    }
84    for (const form of forms) {
85        const reservationFormController = new ReservationFormController(form);
86        reservationFormController.init();
87    }
88})();