2017-12-31 33 views
3

Plugin dynamische Array erstellen:eonasdan/Bootstrap 3 DatepickerWie für jedes Objekt Datetime

Explaination:

Ich möchte eine Anwendung schreiben, die Benutzer 5 verschiedene Stunden für jeden Tag auswählen können. Also habe ich ein Array erstellt und jeden Tag hinzugefügt (ohne Duplikat), zum Beispiel user select 31/12/2017 und 30/12/2017, jetzt möchte ich ihnen diese Möglichkeit geben, nur 5 verschiedene Stunden für jeden ausgewählten Tag auszuwählen.

Versuchte 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

(Zum Testen ein Datum auswählen, dann auf Speichern klicken auf, dann Konsole überprüfen)

Ziel:

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

Problem:

  1. Ich kann nicht herausgefunden, wie kann ich ein anderes Mal jeden Tag hinzu. Es ist mein erstes Mal, dass ich mit Array und Objekt so arbeite.

  2. Ich möchte doppelte Eingabe und nur fünf verschiedene Stunden pro Tag verhindern.

Irgendwie bin ich beim Lernen.

+0

vielleicht bin ich falsch, aber ich sehe nicht, 'Datetime bootstrap' bietet alles wie Sie es wünschen, Sie mehrere' timepickers' für ein einzelnes Datum in der 'datetimepicker' ausgewählt zu zeigen versuchen? und dann die relevanten Zeiten für jedes im 'dateArray' gewählte Datum zu bekommen, nicht wahr? –

+0

@MuhammadOmerAslam offene Geige bitte, Sie sehen datetimepicker, ich bin das ganze Datum mit der Zeit mit diesem Plugin, und aufgeteilt nach Platz, um Datum und Uhrzeit zu teilen. Ja, ich möchte für jedes vom Benutzer ausgewählte Datum nur fünf verschiedene Stunden hinzufügen. für z.B. 1/1/2018 kann der Benutzer 5 verschiedene Stunden auswählen. Aber bitte sehen Sie mein Ziel, wenn jemand sagen kann, wie ich diese Art von Objekt in jQuery erreichen kann, kann ich andere Dinge selbst behandeln. –

Antwort

3

Es gibt ein Problem mit Ihrem 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); 
}); 

Hinweis enthalten Logik für die Zeit gespalten. Sie können split von : verwenden und nehmen Sie die ersten 2 Element des Arrays.

+0

Danke, es funktioniert, nur ein Problem, wählen Sie 1/1/2018, wählen Sie 5 verschiedene Stunden, okay, es ist fertig, jetzt wählen Sie 2/1/2018, es wird auch die ganze Stunde für den vergangenen Tag eingestellt. ich meine die ganze Stunde, die für 1/1/2018 –

+0

eingestellt wird Sie möchten, dass die gesamte Stunde nur 5 Stunden ausgewählt wird, oder Sie für jeden Tag 5 Stunde wollen. Ich habe für jeden Tag 5 Stunden umgesetzt. – cauchy

+1

Ein anderes Problem 'if ($ .inArray (unqdate, dateArray) == -1 && i <5) {' es wird nicht mehr als 5 Datum ausgewählt. – Pedram

1

Ich habe JSON Antwort für Ihre Anforderung erstellt.

Ergebnis :: JSON.stringify (Parent) ist

Code wie unten angegeben.

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