2015-11-05 138 views
0

我想填充一個HTML選擇字段(#contestdate)與基於當前日期爲我正在運行的事件的選項。我將JavaScript用於主要計算,並將jQuery添加到選擇字段。Javascript日期範圍與月重疊

日期範圍應該有當前日期在中間(下面突出顯示紅色),並且在當前日期的任意一邊有7天的選擇(我需要將前幾天和後兩天都選爲選項)。

我有代碼工作來顯示日期,但是,日子進入否定狀態。雖然沒有顯示,但這些日期還是在月底之前。下面的代碼應顯示2015年10月30日和2015年10月31日作爲第一個兩個選擇(在「所有日期」):

How it looks at the moment

我需要的是它可以自動計算出有多少天在每個月中,並相應地修改日期。我將在2015年底之前開展這項活動,所以我還需要對這些年份進行計算。

我想不出一個方法來做到這一點,沒有每個月的噸變量和每個月的相應條件。

我的代碼如下:

// Add the available days to the dropdown for date selection (American format) 
$(document).ready(function() { 
    var today = new Date(); 
    var dd = today.getDate(); 
    var mm = today.getMonth() + 1; // January is 0 
    var yyyy = today.getFullYear(); 

    // Days 9 and under 
    if (dd < 10) { 
     dd = '0' + dd; 
    } 

    // Months 9 and under 
    if (mm < 10) { 
     mm = '0' + mm; 
    } 

    // Previous dates (Needs calculation for change in month/year) 
    dd = dd - 8; 
    for (i = 1; i < 8; i++) { 
     dd = dd + 1; 
     theDate = mm + '/' + dd + '/' + yyyy; 
     $('#contestdate').append($('<option />').val(i).html(theDate)); 
    } 

    // Current date 
    dd = dd + 1; 
    theDate = mm + '/' + dd + '/' + yyyy; 
    $('#contestdate').append($('<option />').val('8').html(theDate.fontcolor("red"))); 

    // Future dates (Needs calculation for change in month/year) 
    for (i = 9; i < 16; i++) { 
     dd = dd + 1; 
     theDate = mm + '/' + dd + '/' + yyyy; 
     $('#contestdate').append($('<option />').val(i).html(theDate)); 
    } 
}); 

請注意,我需要在美國的日期格式(MM/DD/YYYY)的日期,而這可能會改變的解決方案。

如果任何人都可以讓我知道的(或點我的方向是正確的)的方式可以順利地做到這一點,那將是非常讚賞:)

+0

爲什麼你不使用'Date'對象獲取過去和未來的日期? – dunli

回答

1

我創建了一個筆:http://codepen.io/anon/pen/OyoWXK

操作Date對象以獲取過去和未來的日期。

至於選項value,我剛剛使用了Date對象,您可以將其更改爲任何符合您需要的對象。

希望這可以幫助你。

+0

謝謝!我沒有意識到你可以用getDate和getMonth做另外的事情!這是非常有用的:)我也發現了插件http://momentjs.com/,它可以派上用場,以便毫無疑問地改變項目的需求:) –

+0

@ObsidianAge很棒,它幫助你,yep,momentjs是一個非常棒的與日期有關的有用工具。 – dunli