未來日期採摘

我試圖在我的網站上實現一項功能，該功能允許用戶將記錄添加到我的數據庫中，並在我的一個表單中用戶需要選擇未來的日期。未來日期採摘

例如：

選擇框1 - 天：

<select name="startDay" class="form-control""> 
<option value="Today">Today</option> 
<option value="Tomorrow">Tomorrow</option> 
<option value="In 2 days">In 2 days</option> 
</select>

****選擇框2 - 小時：（從6:00到24:30）** ** 循環創建只有一個小時尚未通過的選項！例如，如果現在時間是21:00 ，循環將只顯示21:00，21:30，22:00，等等。

<select name="startHour" class="form-control"> 

    <?php 
       for ($i = 6; $i <= 24; $i++){ 
        for ($j=0; $j < 60; $j+=30) { 
         if ($j==0) $show = "00"; else $show="30"; 
         if (date('H') < $i) 
       echo '<option>'.$i.':'.$show.'</option>'; 
       } 
       } 
       ?> 
       </select>

我的問題是：當用戶在第一個選擇框中選擇「Tomorrrow」，它仍然顯示今天不能通過的時間。這意味着即使他想爲明天設置一個新記錄，用戶也只能選擇僅今天可用的小時數。

任何想法如何糾正它，並允許「明天」和以上用戶選擇一天中的任何時間？

來源

2015-05-09 Eliran Cohen

爲什麼不使用''元素？ Internet Explorer中不支持 –

type =「date」。 –

我的道歉，我一個人不關心IE，但如果你想支持它，那很糟糕。這是很多工作，祝你好運 –

這裏是一個完整的解決方案：

<select id="startDay" name="startDay" class="form-control"> 
    <option value="Today">Today</option> 
    <option value="Tomorrow">Tomorrow</option> 
    <option value="In 2 days">In 2 days</option> 
</select> 
<select id="startHour" name="startHour" class="form-control"> 
</select> 

<script> 
$(document).ready(function() { 
    $('#startDay').change(startDayChange) 
    // prepare startHour from startDay default value when just loaded 
    .change(); 
}); 
function startDayChange() { 
    // define minimum startHour depending on startDay: 
    var minStartHour = new Date(); 
    if ($('#startDay').val() == "Today") { 
     if (minStartHour.getMinutes() < 30) { 
      minStartHour.setMinutes(30,0); 
     } else { 
      minStartHour.setHours(minStartHour.getHours() + 1); 
      minStartHour.setMinutes(0,0); 
     } 
    } else { 
     minStartHour.setHours(6,0,0); 
    } 
    // prepare bounds for allowed hours: 
    var startHour = minStartHour, 
     stopHour = new Date(); 
    stopHour.setHours(24,30); 
    // generate options: 
    $('#startHour').empty(); 
    while (startHour.getTime() < stopHour.getTime()) { 
     $('#startHour').append(
      '<option>' 
      + startHour.toString().match(/\d{2}:\d{2}/) 
      + '<\/option>' 
     ); 
     startHour.setTime(startHour.getTime() + 1800000); 
    } 
} 
</script>

請注意：有這麼多的方式來實現這一點，我們不能說這是「」的解決方案。可以找到許多其他（也許更好）的。
有一個工作示例here。

順便說一句，對於這裏的任何進一步問題，請不要從頭開始提出一個完全構建的解決方案：它超出了本網站任務的範圍，這是爲了解決編碼時遇到的特定問題，而不是提供給定最終用戶的完整代碼需要！

來源

2015-05-12 12:33:57 cFreed

謝謝先生，但這甚至不是0.1％我現在建立。這段代碼將幫助我練習我的JS。 –

@EliranCohen。是的，當然這不是一個完整的應用程序！但是，我所謂的「最終用戶需求」代表的是，您希望答案從頭開始包含一般戰略指導，正確的編碼幫助，問題解釋等等......請僅限於一個主題爲每個問題！ :-)儘管如此，隨時可以再次提出其他問題，甚至是關於同一個應用程序，但一次只能有一個。無論如何，感謝接受我的答案。 – cFreed

由於您使用「javascript」標記發佈了您的問題，因此似乎很清楚您希望答案也是javascript。所以我想知道爲什麼你用PHP創建了你的選項，而你期望用javascript來進一步改變它們？

另一個重要的一點是：用PHP創建選項意味着你使用服務器的小時，而你的用戶可能有一個完全不同的！

所以它最初必須是所有JavaScript，IMO。
我想你並不是真的對JS沒有經驗，所以下面的建議只顯示可以使用哪種結構，並不包括關於工作時間的所有精確內容（但如果需要，可以隨時提問）。

<select id="startDay" name="startDay" class="form-control"> 
    <option value="Today">Today</option> 
    <option value="Tomorrow">Tomorrow</option> 
    <option value="In 2 days">In 2 days</option> 
</select> 
<select id="startHour" name="startHour" class="form-control"> 
</select> 

<script> 
$(document).ready(function() { 
    $('#startDay').change(startDayChange) 
    // prepare startHour from startDay default value when just loaded 
    .change(); 
} 
function startDayChange() { 
    var minStartHour = new Date(); 
    if ($('#startDay').val() == "Today") { 
     if (minStartHour.getMinutes() < 30) { 
      minStartHour.setMinutes(30); 
     } else { 
      minStartHour.setHours(minStartHour.getHours() + 1); 
      minStartHour.setMinutes(0); 
     } 
    } else { 
     minStartHour.setHours(6); 
     minStartHour.setMinutes(0); 
    } 
    // then work using minStartHour... 
} 
</script>

請注意，我們必須添加一個id屬性到<select>標籤。

來源

2015-05-10 18:00:20 cFreed

我感謝你的幫助，但我仍然不知道如何繼續使用JS的腳本，因爲我真的沒有經驗的JS \： –

未來日期採摘

回答

相關問題