javascript - 在发布表单之前在输入文本框中显示日期？

Question

我有这个表单，它通过选择日期范围发布到 PHP 脚本，这是我的 fiddle用于视觉理解。如何根据发布之前选择的单选按钮在空框/输入字段(不允许输入)中显示日期？

提前致谢!

示例:

 I select one month ago:
(  )       (  )     (X)     (  )
1day     1week     1month    3months

-----------------
|2014 - 11 - 01  |   Date From: (the date being selected)
-----------------

-----------------
|2014 - 12 - 01  |  Date: To: (the present day, today)


 ---------
| get aht |  (button)
 ---------

这是我的表格:

<div id="menu_option">
        <h1>Menu Option</h1>
            <div id="button_position">


        <div id="date_selector">    
            <label>Select Date Range</label>
            <form action="show_aht2.php" method="post" id="formtopost">
                    <input type="radio" name="date_selected" value="1d" checked="checked"/>1d
                    <input type="radio" name="date_selected" value="1w" />1w
                    <input type="radio" name="date_selected" value="1m" />1m
                    <input type="radio" name="date_selected" value="3m" />3m
                    <input type="button" id="aht_btn" name="get_aht" value="Get AHT" />
            </form>
  </div><!--date selector-->

                <div class="clear"></div>   

  <button id="refresh_page">Refresh Page</button>

    </div>

CSS:我想在 AHT 按钮之前显示日期框。另外，如何使所有按钮的大小相同？

/*container for all divs inside*/
#container {
width:1450px;   
}

/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
float:left;
}

/*menu bar option*/
#menu_option{
width:230px;
height:600px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
float:right;
overflow:hidden;
text-align:center;
}

input[type="radio"] {
margin-left:10px;
}

#date_selector{
border:3px;
border-color:black;
}

#button_position{
/*width: 100px;
height: 80px
position: absolute;*/
}

#button_position button{
font-weigth:bold;    
font-size:1.3em;
}

button:hover{
cursor: pointer;
}

button {
margin:5px auto; 
font:16px tahoma; /*every size you want.*/
}

/*clear */
.clear {
clear:both;
}

Answer 1

如果您想在发布表单之前显示日期范围，并且希望发布日期，则需要在表单中添加两个 readonly 文本框并使用 javascript 代码下面。

HTML

<input type="text" id="from_date" name="from_date" readonly="readonly" />
<input type="text" id="to_date" name="to_date" readonly="readonly" />

Javascript

<script type="text/javascript">
    function formatDate(d) {
      var dd = d.getDate()
      if ( dd < 10 ) dd = '0' + dd;

      var mm = d.getMonth()+1
      if ( mm < 10 ) mm = '0' + mm;

      var yy = d.getFullYear();
      if ( yy < 10 ) yy = '0' + yy;

      return yy+'-'+mm+'-'+dd;
    }

    function getDateRange(value){
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth(),
            d = now.getDay();

        var diff = {};
        diff['1d'] = 1;
        diff['1w'] = 7;
        diff['1m'] = 30;
        diff['3m'] = 90;
        var from_date = new Date(y, m, d - diff[value]);

        $('#from_date').val(formatDate(from_date));
        $('#to_date').val(formatDate(now));
    }

    $(function(){
        $("input[name=date_selected]").click(function(){
            getDateRange($(this).val());       
        });
        getDateRange($("input[name=date_selected]:checked").val());
    });
</script>

这里是 the working code at JSFiddle .