2016-04-10 9 views
1

私は動的に簡単なナビゲーション使用して日付を変更する場合、データの属性を更新する小さな問題を抱えていると、現在の日付からsubstract日付を追加:ここjQueryのナビゲーション

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

はjavascriptのである:ここでは

はhtmlです:

$("#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))); 
     } 
    }); 
0:

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

、ここではonclickのイベントです

すべてはFFとChromeで完全に正常に動作しますが、IE ANS Safariが NaNの場合、NaNの場合、NaNを

を返す私もjsbin作成しました:https://jsbin.com/puvakivika/edit?html,js,output

答えて

0

Date formatあなたは「文字列を変換する必要がありますによると、 2016、04、10 "から" 2016/04/10 "に変更してください。日付フォーマットの詳細については

あなたの場合Parse

を参照してください、あなたは交換する単純な文字列を使用する必要があります。.replace(/、/ gで、 ' - ')

データatributeのために代わりに.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> 
+0

.ATTR使用を使用して感謝しますよu。あなたは私の一日を救った。 – Alko

関連する問題