How to create dynamic array for each object datetimepicker

Question

Plugin: eonasdan/Bootstrap 3 Datepicker

Explaination:

I want to write an application that user can select 5 different hours for each day. so i created an array and add each day (without duplicate), for example user select 31/12/2017 and 30/12/2017 , now i want to give they this ability to select only 5 different hour for each day that selected.

Tried Code:

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

(For testing, select a date, then click on save button, then check console)

Goal:

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

Problem:

I couldn't figured out how can i add another time to each day. it's my first time i work with array and object like this.
I want to prevent duplicate entry and only five different hour per day.

Somehow I'm in learning.

maybe i am wrong but i don't see datetimepicker bootstrap provides anything like you desire, you are trying to show multiple timepickers for a single date selected inside the datetimepicker? and then want to get those relevant times for every date selected in the dateArray isnt it? — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Dec 31, 2017 at 12:52
@MuhammadOmerAslam open fiddle please, you see datetimepicker , i'm get whole date with time with this plugin, and split by space, to divide date and time. Yes i want to add only five different hour, for each date that user selected. for e.g for 1/1/2018 user can select 5 different hour. But please see my goal, if someone can say how can i achieve this kind of object in jquery, i can handle other things myself. — Jack The Baker
– Jack The Baker, Commented Jan 1, 2018 at 7:45

cauchy · Accepted Answer · 2018-01-01 08:44:42Z

3

There is some problem with your JS Code:

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);
});

Note included logic for time split. You can use split by : and take the first 2 element of array.

edited Jan 1, 2018 at 8:44

answered Jan 1, 2018 at 8:01

cauchy

1,1431 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jack The Baker Over a year ago

Thanks it works , just one problem, select 1/1/2018 , the select 5 different hour, okay, it's done, now select 2/1/2018 , it also get all hour has set for past day. i mean all hour that set for 1/1/2018

cauchy Over a year ago

You want total hour to be selected only 5 hour or you want for each day 5 hour. I implemented for each day 5 hour.

Pedram Over a year ago

Another issue if ($.inArray(unqdate, dateArray) == -1 && i< 5) { it won't select more that 5 date.

Pedram Over a year ago

@cauchy OP want 5 hour per each day

Jack The Baker Over a year ago

another things is it set duplicate hour for each day. :(

|

Pang · Accepted Answer · 2018-02-07 05:26:41Z

I have created JSON response for your requirement.

Result :: JSON.stringify(parentObject)

Code is as below.

$(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));
    }
});});

Collectives™ on Stack Overflow

How to create dynamic array for each object datetimepicker

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related