2017-08-23 65 views
0

我正在使用Moment.js生成當前周的日期數組。如何檢查日期陣列是否屬於當前周

然後我從系統中得到一個日期數組,現在我想檢查這些日期中的任何一個是否與本週創建的Moment.js匹配。如果是,那麼我想返回它們的值(0,1,2 ..所以我可以相應地操作DOM對象(例如:如果比賽返回當週的星期日和星期二,那麼我會突出顯示它們。)

我只走了這麼遠就得到一個單一的硬編碼值,如果日期本週落在下返回true或false

var REFERENCE = moment(); 
var startOfWeek = REFERENCE.clone().startOf('week'); 

var endOfWeek = REFERENCE.clone().endOf('week'); 
var highlightDays = ['2017-08-23','2017-08-25','2017-08-29']; //highlight respective days ONLY they fall under current week 

var days = []; 
var day = startOfWeek; 

while (day <= endOfWeek) { 
    days.push(day.toDate()); 
    day = day.clone().add(1, 'd'); 
} 


function isWithinThisWeek(momentDate) { 
    return momentDate.isBetween(startOfWeek, endOfWeek); 

} 


console.log("is it within this week? "+isWithinThisWeek(moment("2017-08-25"))); 

jsfiddle

回答

1

您可以使用jQuery Attribute Equals Selector [name="value"]和力矩format()以突出highlightDays陣列的當前周的日期。

format()中使用dddd令牌,您將獲得Sunday Monday ... Friday Saturday,即data-day屬性的值。

編輯:的問題是isWithinThisWeek方法,給了錯誤的結果週日,因爲作爲docs狀態:

檢查了一下是其他兩個時刻之間,可選地看着單位比例(分,小時,天等)。 這場比賽是獨家。

然後你就可以同時使用:

這裏一個活生生的例子:

var REFERENCE = moment(); 
 
var startOfWeek = REFERENCE.clone().startOf('week'); 
 
var endOfWeek = REFERENCE.clone().endOf('week'); 
 
var highlightDays = ['2017-08-18','2017-08-19','2017-08-20','2017-08-21','2017-08-22','2017-08-23','2017-08-24','2017-08-25','2017-08-26']; //highlight respective days ONLY they fall under current week 
 

 
var days = []; 
 
var day = startOfWeek; 
 

 
while (day.isBefore(endOfWeek)) { 
 
    days.push(day.toDate()); 
 
    day = day.clone().add(1, 'd'); 
 
} 
 

 
function isWithinThisWeek(momentDate) { 
 
    return momentDate.isBetween(startOfWeek, endOfWeek, null, '[]'); 
 
    // return momentDate.isSame(REFERENCE, 'week') 
 
} 
 

 
for(var i=0; i<highlightDays.length; i++){ 
 
    var m = moment(highlightDays[i]); 
 
    if(isWithinThisWeek(m)){ 
 
    var dayName = m.format('dddd').toLowerCase(); 
 
    $("[data-day='"+dayName+"']").addClass("highlight"); 
 
    } 
 
}
.highlight{ 
 
    background:yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 

 
<table class="table"> 
 
    <tbody> 
 
    <tr> 
 
     <td data-day="sunday">Sunday</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-day="monday">Monday</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-day="tuesday">Tuesday</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-day="wednesday">Wednesday</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-day="thursday">Thursday</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-day="friday">Friday</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-day="saturday">Saturday</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

我的答案是相似,兩者已經發布,但是:

  • 我不使用 在numToDays溫度陣列
  • 我沒有在HTML
+0

我也不會使用numToDays數組;#: – hallleron

+0

@hallleron當然,但你依賴HTML中的元素的順序:) – VincenzoC

+0

感謝您的幫助,但不能讓週日突出顯示。 – user366123

1

編輯:固定星期日突出的錯誤。你必須subtract有一天從startOfWeek撥打isBetween()

我想這是你想要什麼:

var REFERENCE = moment(); 
 
var startOfWeek = REFERENCE.clone().startOf('week'); 
 
var endOfWeek = REFERENCE.clone().endOf('week'); 
 
var highlightDays = ['2017-08-20','2017-08-21','2017-08-22','2017-08-23','2017-08-24','2017-08-25','2017-08-26']; 
 

 
var days = []; 
 
var day = startOfWeek; 
 

 
while (day <= endOfWeek) { 
 
    days.push(day.toDate()); 
 
    day = day.clone().add(1, 'd'); 
 
} 
 

 
function isWithinThisWeek(momentDate) { 
 
    return momentDate.isBetween(startOfWeek.subtract(1, 'd'), endOfWeek.add(1, 'd')); 
 
} 
 

 
for(var i = 0; i < highlightDays.length; i++){ 
 
console.log(isWithinThisWeek(moment(highlightDays[i]))); 
 
    if(isWithinThisWeek(moment(highlightDays[i]))){ 
 
    var date_converted = new Date(highlightDays[i]); 
 
    $(".table td:eq("+date_converted.getDay()+")").addClass("highlight"); 
 
    } 
 
}
.highlight{ 
 
    background:yellow; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
\t \t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td data-day="sunday">Sunday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="monday">Monday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="tuesday">Tuesday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="wednesday">Wednesday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="thursday">Thursday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="friday">Friday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t <td data-day="saturday">Saturday</td> 
 
</tr> 
 
\t \t </tbody> 
 
\t \t </table>

我在最後增加了一個for()循環和檢查日期是在本週通過使用功能。使用這個我使用addClass()來突出顯示匹配記錄。

+0

這是偉大然而,既突出了天也就是今天或將來。即使它們仍在本週,它也不會突出顯示過去的日子。 – user366123

+0

它確實,看看,我添加了昨天的日期爲4條目...它的工作原理 – hallleron

+0

非常感謝您的幫助。真的很感激它。然而,我無法突出本週的所有日子......也許是一個Moment.js周的問題? – user366123

0

這就是你在做什麼。我添加了一個foreach循環和一個簡單的天數來將int轉換爲日期名稱。然後它根據數據日選擇td並突出顯示它。

var REFERENCE = moment(); 
 
var startOfWeek = REFERENCE.clone().startOf('week'); 
 
var endOfWeek = REFERENCE.clone().endOf('week'); 
 
var highlightDays = ['2017-08-23','2017-08-25','2017-08-29']; //highlight respective days ONLY they fall under current week 
 

 
var days = []; 
 
var day = startOfWeek; 
 

 
while (day <= endOfWeek) { 
 
    days.push(day.toDate()); 
 
    day = day.clone().add(1, 'd'); 
 
} 
 

 

 
function isWithinThisWeek(momentDate) { 
 
    return momentDate.isBetween(startOfWeek, endOfWeek); 
 
} 
 

 
var numToDays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']; 
 

 
highlightDays.forEach(function(element) { 
 
    if(isWithinThisWeek(moment(element))){ 
 
    \t var date = moment(element);  
 
    var day = date.format("d"); 
 
    $("td[data-day='"+numToDays[day]+"']").addClass("highlight"); 
 
    } 
 
});
.highlight{ 
 
    background:yellow; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
\t \t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td data-day="sunday">Sunday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="monday">Monday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="tuesday">Tuesday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="wednesday">Wednesday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="thursday">Thursday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t \t \t <td data-day="friday">Friday</td> 
 
\t \t </tr> 
 
<tr> 
 
\t <td data-day="saturday">Saturday</td> 
 
</tr> 
 
\t \t </tbody> 
 
\t \t </table>

+0

感謝您的幫助,但無法讓週日突出顯示。 – user366123

0

依靠元素的順序對我沒有信心與Moment.js,但我給它與普通的JS一試。 也許這有幫助。

var highlightDays = ['2017-08-23','2017-08-25','2017-08-29']; //highlight respective days ONLY they fall under current week 
 
var date= new Date(); //Today Date 
 
var today = date.getDay(); //Today Day of the week Number 
 
var dayMSec = 1000 * 60 * 60 * 24; //a day in ms 
 
var weekMSec = dayMSec * 7; // a week in ms 
 

 
//Here i calculate the start of the week timestamp(Using dates the starting day will be Sunday). TS in in ms 
 
var startWeekTS = date.getTime() - (dayMSec * today); 
 

 
highlightDays.forEach(function(val, index){ 
 
    if(isWithinThisWeek(val)){ 
 
    //just logging 
 
    console.log(highlightDays[index] + ' is within this week'); 
 
    } 
 
}); 
 

 

 
function isWithinThisWeek(date) { 
 
    //generate a Date() from passed arg 
 
    date = new Date(date); 
 
    //getting the ts of the date 
 
    var dateMSec = date.getTime(); 
 
    //subtracting start of the week ts and arg ts 
 
    var tsDiff = dateMSec - startWeekTS; 
 
    
 
    //if ts is between 0 and a week expressed in ms 
 
    if(tsDiff >= 0 && tsDiff< weekMSec){ 
 
     //here we go 
 
     return true; 
 
    } 
 
    
 
    //nope 
 
    return false; 
 
}

+0

即使我想堅持moment.js我仍然感謝您的幫助。 – user366123

相關問題