今天通过CSS制作HTML月份日期日期

Question

我正在处理内部分析报告页面并需要时间生成记录。我的灵感来源于Google Analytics如何做到这一点。

第一件事就是每小时，每天，每周，每月，第二件事是在日期之间显示它。

我希望能以下拉格式显示这些选项。对于每小时，每天，每周和每月，它似乎很简单，但在下拉菜单中显示两个日期选择器似乎很难。我怎样才能做到这一点？

只是举个例子，这里就是它在Google Analytics中的显示方式。

这是我的尝试： -

<?php 
    $todo=$_POST['todo']; 
    if(isset($todo) and $todo=="submit"){ 
    $month=$_POST['month']; 
    $dt=$_POST['dt']; 
    $year=$_POST['year']; 
    $date_value="$month/$dt/$year"; 
    echo "mm/dd/yyyy format :$date_value<br>"; 
    $date_value="$year-$month-$dt"; 
    echo "YYYY-mm-dd format :$date_value<br>"; 
    } 

?> 
    <form method=post name=f1 action=''><input type=hidden name=todo value=submit> 
    <table border="0" cellspacing="0" > 
    <tr><td align=left > 
    <select name=month value=''>Select Month</option> 
    <option value='01'>January</option> 
    <option value='02'>February</option> 
    <option value='03'>March</option> 
    <option value='04'>April</option> 
    <option value='05'>May</option> 
    <option value='06'>June</option> 
    <option value='07'>July</option> 
    <option value='08'>August</option> 
    <option value='09'>September</option> 
    <option value='10'>October</option> 
    <option value='11'>November</option> 
    <option value='12'>December</option> 
    </select> 

    </td><td align=left > 
    Date<select name=dt > 
    <option value='01'>01</option> 


    <option value='02'>02</option> 
    <option value='03'>03</option> 
    <option value='04'>04</option> 
    <option value='05'>05</option> 
    <option value='06'>06</option> 
    <option value='07'>07</option> 
    <option value='08'>08</option> 
    <option value='09'>09</option> 
    <option value='10'>10</option> 
    <option value='11'>11</option> 
    <option value='12'>12</option> 
    <option value='13'>13</option> 
    <option value='14'>14</option> 
    <option value='15'>15</option> 
    <option value='16'>16</option> 
    <option value='17'>17</option> 
    <option value='18'>18</option> 
    <option value='19'>19</option> 
    <option value='20'>20</option> 
    <option value='21'>21</option> 
    <option value='22'>22</option> 
    <option value='23'>23</option> 
    <option value='24'>24</option> 
    <option value='25'>25</option> 
    <option value='26'>26</option> 
    <option value='27'>27</option> 
    <option value='28'>28</option> 
    <option value='29'>29</option> 
    <option value='30'>30</option> 
    <option value='31'>31</option> 
    </select> 


    </td><td align=left > 
    Year(yyyy)<input type=text name=year size=4 value=2005> 
    <input type=submit value=Submit> 
    </table> 


    </form> 

感谢。

Answer 1

您可以通过使用和自定义来自jQuery UI的Datepicker小部件以及可用于选择时间的Timepicker插件来实现类似的效果。

Here's an example如何使用DatePicker显示多个月份。 Timepicker主页有several examples如何定制它以满足您的需求。