编辑每周的开放和关闭时间(按日计算)

Question

我正忙着每周的营业和下班时间(按日计算)。我发现jquery.businessHours插件工作得很好，我可以成功地插入json格式的数据。我以这样的json格式插入了数据。但是每周的开放和关闭时间都是业务上的，所以有一种功能可以让企业主编辑他们的营业时间。

请访问这个js小提琴链接：https://jsfiddle.net/wdpu6jbf/

我试过这个密码，

$adminid = '135';
$res = $conn->query("select json_data_timing_hours from timing_hours where admin_id='$adminid'");
$row = mysqli_fetch_assoc($res);
echo $row['json_data_timing_hours'];

因此，我得到了存储在数据库中的Json数据：

Array1

[
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  }
]

现在，我的问题是如何编辑矩形字段与颜色和数字也。当我带着编辑请求来到这个页面时，它是否可能是根据存储在数据库中的颜色和数据来填充的，因为所有的东西都来自于很难理解的脚本。

例:在Array1，每周五天，时间从09:00到6:00。如果数据以Array2 2的方式存储。

Array2

[
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  }
]

然后，当编辑请求星期一和星期二的颜色是浅绿色和其他颜色是红色与特定的时间。如果你方无法提供完整的代码，那么请给我一个提示。如果需要其他信息，请告诉我。

营业时间js链接(我们需要根据结果更改该链接)：https://cdnjs.cloudflare.com/ajax/libs/jquery.businessHours/1.0.1/jquery.businessHours.js

打开这个链接，我必须动态地更改operationTime、defaultOperationTimeFrom和defaultOperationTimeTill变量，但是我无法理解它。

编辑：--我必须更改上面js的这个特定部分，

  operationTime: [
                {},
                {},
                {},
                {},
                {},
                {isActive: false},
                {isActive: false}
            ],
            defaultOperationTimeFrom: '9:00',
            defaultOperationTimeTill: '18:00',

Answer 1

您可以为时间文本框添加onblur事件，这意味着如果任何人编辑时间并移动光标，使用onblur事件，您可以编辑数据库中的字段，并且应该在文本框中使用一些唯一的ID或类。

如果你有问题请告诉我。