编辑每周的开放和关闭时间(按天)


Edit opening and closing hours of week (daywise)

我正在处理每周的开放和关闭时间(Daywise)。我找到了jquery.businessHours插件,它工作得很好,我可以成功地插入json格式的数据。我已经插入了像这样的json格式的数据。但每周的营业时间和营业时间是商业性的,因此企业主可以编辑他们的营业时间。

请访问此js-fiddle链接: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
  }
]

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

例如:在阿拉斯一周五天,时间是从09:00到18:00。如果数据是以Array2的方式存储的。

阵列2

[
  {
    "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',

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

如果你有问题,请告诉我。