Question

我正在开始和关闭一周的工作时间（Daywise）。我找到了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数据：

数组1

[
  {
    "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
  }
]

现在，我的问题是我如何编辑带有颜色和数字的矩形字段。是否有可能当我在这个带有编辑请求的页面上根据存储在数据库中的颜色和数据来填充它，因为所有内容都来自于非常难以理解的脚本。

Ex：在Array1中每周五天，时间从09:00到18:00。如果数据以Array2的方式存储。

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＆amp; defaultOperationTimeTill动态变量，但我怎么能解决它。

修改我必须改变上面js的这个特定部分，

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

Answer 1

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

如果您有疑问，请告诉我。

编辑周的开始和结束时间（按日）

1 个答案: