javascript - 将工作时间从一种形式链接到另一种形式

Question

我有一个模型，我们可以在其中选择机构一周中每一天的营业时间，从某某到某某，例如Monday 12:00 AM - 11:30 PM

<?php

namespace common\models;

use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\db\Expression;

class WorkHours extends _source_WorkHours
{
    public const WEEK_DAY_MON = 'Mon';
    public const WEEK_DAY_TUE = 'Tue';
    public const WEEK_DAY_WED = 'Wed';
    public const WEEK_DAY_THU = 'Thu';
    public const WEEK_DAY_FRI = 'Fri';
    public const WEEK_DAY_SAT = 'Sat';
    public const WEEK_DAY_SUN = 'Sun';


    /**
     * {@inheritdoc}
     */
    public function behaviors(): array
    {
        return [
            'timestamp' => [
                'class'      => TimestampBehavior::class,
                'attributes' => [
                    ActiveRecord::EVENT_BEFORE_INSERT => ['created_at'],
                ],
                'value'      => new Expression('NOW()'),
            ],
        ];
    }

    public static function weekDays(): array
    {
        return [
            self::WEEK_DAY_MON => 'Monday',
            self::WEEK_DAY_TUE => 'Tuesday',
            self::WEEK_DAY_WED => 'Wednesday',
            self::WEEK_DAY_THU => 'Thursday',
            self::WEEK_DAY_FRI => 'Friday',
            self::WEEK_DAY_SAT => 'Saturday',
            self::WEEK_DAY_SUN => 'Sunday',
        ];
    }

    public static function getWeekDay(string $val): string
    {
        $ar = self::weekDays();

        return $ar[$val] ?? $val;
    }

    public static function hoursList(): array
    {
        $list = [];
        for ($i = 0; $i < 24; $i++) {
            $A = 'AM';
            $n = $i;
            if ($i >= 12) {
                $A = 'PM';
                $n = $i - 12;
            }

            $n = $n < 10 ? '0' . $n : $n;
            $_A = ($i === 12 ? 'AM' : $A);
            $list[$i . '.00'] = $n . '.00 ' . ($i === 0 ? 'PM' : $_A);
            $list[$i . '.30'] = $n . '.30 ' . $A;
        }
        return $list;
    }
}

接下来，我在创建机构时使用此模型，以及在那里选择开放时间的能力

<div class="form-group">
        <label class="control-label col-sm-3">Wokr Hours</label>
        <div class="col-sm-6">

            <div class="form-group">
                <?php foreach (WorkHours::weekDays() as $weekDay => $day) { ?>
                    <div class="col-sm-2"><?= $weekDay ?></div>
                    <div class="col-sm-5">
                        <?= $form->field(
                            $restaurantWorkHoursForm,
                            RestaurantWorkHoursForm::getAttributeName($weekDay, 'open'),
                            ['template' => '<div class="col-sm-12">{input}</div>']
                        )->dropDownList(WorkHours::hoursList(), ['prompt' => ''])->label(false) ?>
                    </div>
                    <div class="col-sm-5">
                        <?= $form->field(
                            $restaurantWorkHoursForm,
                            RestaurantWorkHoursForm::getAttributeName($weekDay, 'close'),
                            ['template' => '<div class="col-sm-12">{input}</div>']
                        )->dropDownList(WorkHours::hoursList(), ['prompt' => ''])->label(false) ?></div>
                <?php } ?>
            </div>
        </div>
    </div>

在您可以选择时间的机构中预订地点时，我也使用此模型，但在这里您可以选择一天中的任何时间

<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('time') ? 'btn-error' : '' ?>"
               id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="icon br-clock"></span> <span class="js-value">
                    <?= $restaurantReservationForm->time
                        ? WorkHours::hoursList()[$restaurantReservationForm->time] : '-- : --' ?>
                </span>
            </a>
            <ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
                <?php foreach (WorkHours::hoursList() as $k => $v) { ?>
                    <li><a class="dropdown-item <?= $restaurantReservationForm->time === $k ? 'active' : ''
                        ?>" href="#" data-value="<?= $k ?>"><?= $v ?></a></li>
                <?php } ?>
            </ul>

现在有什么问题。我有两种形式。一种是指明时间，另一种是从第一种形式中选择时间。您如何将我们指定的营业时间与预订时间的选择联系起来？
假设我们有工作时间 12:00 AM - 11:30 PM , 任何时间都可以在预订中，但必须只有在我们之前指定的机构的开放时间内才有选择，即从 12:00 AM 开始。至 11:30 PM ，以此类推，如果某天在机构中没有选择时间，那么预约也会为空
有没有办法通过 json ?

Answer 1

这当然是可以解决的，但是您需要在服务器端和客户端都处理它。服务器端的需要是确保技术先进的用户不会做任何恶作剧，而客户端的需要是帮助用户知道他或她可以从哪个时期选择值。
在服务器端，您在存储方面有多种选择，但一种可行的方法(假设将来也将重用所选间隔)是将这个值存储到数据库中。这意味着您将需要在服务器端为该值设置一个 CRUD，以及一个服务于客户端请求的 API 函数，告诉用户他/她的选择是什么。在服务器端，您可以通过 json_encode 将内容编码为 JSON并将结果发送给客户端。
您将需要在服务器端和客户端都使用验证器，以确定给定日期是否在指定时间间隔内。
简而言之，您需要:

此时间间隔的数据库模式支持

应用服务器端 CRUD

服务器端 API

处理 API 请求的客户端功能

服务器端和客户端的验证器

使用验证器处理 UI 呈现和处理的逻辑

在存储所选日期或日期间隔时处理逻辑