jQuery hinzufügen subtrahieren stammt aus dem aktuellen Datum mit Navigation

Question

Ich habe ein kleines Problem beim Aktualisieren der Daten-Attribute, wenn dynamisch Daten mit einer einfachen Navigation zu ändern:

Hier html:

<button id="prev" data-date="2016, 04, 10">Previous</button> 
<button id="next" data-date="2016, 04, 03">Next</button> 

hier ist Javascript :

function addDays(noOfDays, date) { 
     var origTimezoneOffset = date.getTimezoneOffset(); 
     date = new Date(date.getTime() + (noOfDays * (1000 * 60 * 60 * 24))); 
     var offsetDiff = (date.getTimezoneOffset() - origTimezoneOffset) * 60 * 1000; 
     date = new Date(date.getTime() + offsetDiff); 

     var month = (date.getMonth() + 1); 
     var day = (date.getDate()); 
     if (month < 10) { 
      month = '0' + month; 
     } 
     if (day < 10) { 
      day = '0' + day; 
     } 
     var formatted = date.getFullYear() + ', ' + month + ', ' + day; 
     return formatted; 
    } 

und hier ist Onclick-Ereignis:

$("#prev, #next").on('click', function() { 
     var string = $(this).attr('data-date'); 

     if ($(this).attr('id') === "next") { 
      $(this).attr("data-date", addDays(7, new Date(string))); 
      $("#prev").attr('data-date', addDays(-7, new Date(string))); 
     } else { 
      $(this).attr('data-date', addDays(-7, new Date(string))); 
      $("#next").attr('data-date', addDays(7, new Date(string))); 
     } 
    }); 

Alles funktioniert völlig in Ordnung in FF und Chrome, aber IE ans Safari kehrt NaN, NaN, NaN

Ich habe auch erstellt jsbin: https://jsbin.com/puvakivika/edit?html,js,output

Answer 1

Nach dem Date format Sie müssen die Zeichenfolge "konvertieren 2016, 04, 10 "bis" 2016/04/10 "bevor zu verfahren.

Für weitere Informationen über das Datumsformat sehen Parse

In Ihrem Fall müssen Sie ersetzen einen einfachen String verwenden: .replace (/,/g, '-')

Für Daten atribute statt mit .attr .data(key, value)

function addDays(noOfDays, date) { 
    var origTimezoneOffset = date.getTimezoneOffset(); 
    date = new Date(date.getTime() + (noOfDays * (1000 * 60 * 60 * 24))); 
    var offsetDiff = (date.getTimezoneOffset() - origTimezoneOffset) * 60 * 1000; 
    date = new Date(date.getTime() + offsetDiff); 

    var month = (date.getMonth() + 1); 
    var day = (date.getDate()); 
    if (month < 10) { 
    month = '0' + month; 
    } 
    if (day < 10) { 
    day = '0' + day; 
    } 
    var formatted = date.getFullYear() + ', ' + month + ', ' + day; 
    return formatted; 
} 

$(function() { 
    $("#prev, #next").on('click', function(e) { 
    var string = $(this).attr('data-date').replace(/, /g, '-'); 

    if ($(this).attr('id') === "next") { 
     $(this).attr("data-date", addDays(7, new Date(string))); 
     $("#prev").attr('data-date', addDays(-7, new Date(string))); 
    } else { 
     $(this).attr('data-date', addDays(-7, new Date(string))); 
     $("#next").attr('data-date', addDays(7, new Date(string))); 
    } 
    }); 
}); 

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 

<button id="prev" data-date="2016, 04, 10">Previous</button> 
<button id="next" data-date="2016, 04, 03">Next</button>