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

时间:2013-06-19 17:57:02

标签: jquery css html5

我正在开发内部分析报告页面,需要时间生成记录。我的灵感来自Google Analytics的工作方式。

首先是每小时,每天,每周,每月,第二件事是在日期之间显示。

我希望以下拉格式显示这些选项。对于每小时,每天,每周和每月,它似乎很简单,但在下拉列表中显示两个日期选择器似乎很难。我怎么能这样做?

仅作为示例,以下是Google Analytics中显示的内容。

enter image description here

这就是我的尝试: -

<?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>

感谢。

1 个答案:

答案 0 :(得分:0)

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

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