如何为每个对象的datetimepicker创建动态数组

Question

插件：eonasdan/Bootstrap 3 Datepicker 说明：

我想编写一个应用程序，用户可以为每天选择5个不同的小时。因此，我创建了一个数组，并添加了每一天（无重复），例如，用户选择了31/12/2017和30/12/2017，现在我想让他们只能选择每天选定的5个不同的小时。

尝试的代码：

var limit = 5;
var i = 0;
var dateArray = new Object();

$('#ss').click(function() {
  if ($('#datetimepicker1 input').val().length > 0) {
    var date = $('#datetimepicker1 input').val();
    var getDate = date.split(' ');
    var unqdate = getDate[0];
    var unqtime = getDate[1];

    if ($.inArray(unqdate, dateArray) == -1) {
      dateArray[unqdate] = unqtime
    }

  }
  console.log(dateArray);
});

JSFiddle

（用于测试，请选择一个日期，然后点击保存按钮，然后检查控制台）

目标：

var dateArray = {
  "31-12-2017": [{
    "time": "14:00"
  }, {
    "time": "17:15"
  }],
  "30-12-2017": [{
    "time": "13:00"
  }, {
    "time": "12:15"
  }]
}

问题：

1. 我不知道如何为每一天添加另一个时间。这是我第一次使用类似数组和对象的东西。 2. 我想要防止重复输入，每天只允许五个不同的小时数。

我正在学习中。

- Jack The Baker

---

也许我错了，但我认为 datetimepicker bootstrap 没有提供像您要求的那样的功能。您是想在 datetimepicker 中选择一个日期后显示多个 timepickers 吗？然后再为 dateArray 中每个选择的日期获取相应的时间？ - Muhammad Omer Aslam

@MuhammadOmerAslam 打开fiddle，你能看到datetimepicker，我用这个插件获取了完整的日期和时间，并通过空格进行拆分，以区分日期和时间。是的，我想为用户选择的每个日期添加仅五个不同的小时。例如对于2018年1月1日，用户可以选择5个不同的小时。但请看我的目标，如果有人能说出如何在jquery中实现这种对象，我可以自己处理其他事情。 - Jack The Baker

Answer 1

您的JS代码出现了一些问题:

var limit = 5;
var i = 0;
var dateArray = new Object();

$('#ss').click(function() {
  if ($('#datetimepicker1 input').val().length > 0) {
    var date = $('#datetimepicker1 input').val();
    var getDate = date.split(' ');
    var unqdate = getDate[0];
    var unqtime = getDate[1];

    if ($.inArray(unqdate, dateArray) == -1) {
      if(dateArray[unqdate] && dateArray[unqdate].length < limit) {
         if(!dateArray[unqdate].find((ele) =>ele.time === unqtime)){
          dateArray[unqdate].push({"time": unqtime})
         }
      } else {
         dateArray[unqdate] = [{"time": unqtime}]
      }
   }

  }
  console.log(dateArray);
});

请注意时间拆分的逻辑。您可以使用:进行拆分，并取数组的前两个元素。

- cauchy

---

谢谢，它可以正常工作，只有一个问题，选择1/1/2018，选择5个不同的小时，好的，搞定了，现在选择2/1/2018，它也会获取过去一天所设置的所有小时。我的意思是所有设置为1/1/2018的小时。 - Jack The Baker

你想要选择总时间只有5小时，还是每天都需要5小时？我实现了每天5小时的功能。 - cauchy

另一个问题是 if ($.inArray(unqdate, dateArray) == -1 && i< 5) { 这个代码不会选择超过5个日期。 - Pedram

@cauchy OP希望每天工作5个小时。 - Pedram

另一件事是它为每天设置了重复的小时。 :( - Jack The Baker

感谢 @tourtravel :) - cauchy

Answer 2

我已经为您的需求创建了JSON响应。

结果为：JSON.stringify(parentObject)

代码如下。

$(document).ready(function() {

$('#datetimepicker1').datetimepicker({
    stepping: 30,
    sideBySide: true,
    showTodayButton: true,
    format: 'DD-MM-YYYY HH:mm:ss',
});

// my code

var limit = 5;
var i = 0;
var parentObject = new Object();
var parentArray = [];
var dateAndTimeObject;


function isDateSelectedExists(date) {

    for (var i = 0; i < parentArray.length; i++) {
        var obj = parentArray[i];
        if (obj["date"] === date) {
            return i;
        }
    }
    return -1;
}

$('#ss').click(function() {
    if ($('#datetimepicker1 input').val().length > 0) {

        var date = $('#datetimepicker1 input').val();
        var getDate = date.split(' ');
        var unqdate = getDate[0];
        var unqtime = getDate[1];

        var tempIndex = isDateSelectedExists(unqdate);
        console.log("tempIndex :: " + tempIndex);
        if (tempIndex == -1) {

            console.log("date doesn't exists");
            dateAndTimeObject = new Object();
            dateAndTimeObject["date"] = unqdate;
            var timeArray = [];
            timeArray.push(unqtime);
            dateAndTimeObject["time"] = timeArray;
            parentArray.push(dateAndTimeObject);
            parentObject["res"] = parentArray;

        } else {
            console.log("date exists");
            dateAndTimeObject = parentArray[tempIndex];
            var timeArray = dateAndTimeObject["time"];
            if(timeArray.length<5) timeArray.push(unqtime);
            dateAndTimeObject["time"] = timeArray;

        }
        console.log("final res :: " + JSON.stringify(parentObject));
    }
});});

- Chintan Joshi