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

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。

Answer 2

<form method="post" id="formtopost">
    <input type="radio" name="date_selected" value="1" checked="checked"/>1d
    <input type="radio" name="date_selected" value="7" />1w
    <input type="radio" name="date_selected" value="30" />1m
    <input type="radio" name="date_selected" value="90" />3m
    <input type="button" id="aht_btn" name="get_aht" value="Get AHT" />
    <input type="submit" />
</form>
<?php
    if($_POST && $_POST['date_selected']){
        $today = new datetime();
        $date_selected = new datetime('-'.$_POST['date_selected'].' days');

        echo '-----------------<br />';
        echo '| '.$today->format('Y-m-d').' |<br />';
        echo '-----------------<br />';
        echo '| '.$date_selected->format('Y-m-d').' |';
        echo '-----------------<br />';

    }
?>

Answer 3

实现此目的的常规方法是使用 JavaScript 在单选按钮值更改时更新输入元素中的值。为避免对输入框进行任何更改，请为其赋予属性disabled="disabled"。

<script type="text/javascript">
function updateDate(newval) {
    document.getElementById('IDdateFrom').value = newval;
</scirpt>
<input type="radio" name="date_selected" value="1d" onchange="updateDate('DATE1d')"  checked="checked"/>
<input type="radio" name="date_selected" value="1w" onchange="updateDate('DATE1w')"/>
<input type="radio" name="date_selected" value="1m" onchange="updateDate('DATE1m')"/>
<input type="radio" name="date_selected" value="3m" onchange="updateDate('DATE3m')"/>

<imput type="text" name="IDdateFrom" id="IDdateFrom" value="DATE1d" disabled="diabled">

Answer 4

我想这就是你要找的东西：http://jsfiddle.net/jpkp0o0w/2/

    $("#aht_btn").click(function () {
    var someDate = new Date();


var someFormattedDate = dd + '/'+ mm + '/'+ y;
    var valSelected = $("[name=date_selected]:checked").val();
    if(valSelected == "1d")
    {
       someDate.setDate(someDate.getDate() - 1); 
    }

    if(valSelected == "1w")
    {
        someDate.setMonth( someDate.getDate() - 7);

    }

    if(valSelected == "1m")
    {
        someDate.setMonth( someDate.getMonth() - 1 );

    }

    if(valSelected == "3m")
    {
        someDate.setMonth( someDate.getMonth() - 3 );

    }

    var dd = someDate.getDate();
    var mm = someDate.getMonth() + 1;
    var y = someDate.getFullYear();
    $("#datefrom").text(y + "-" + mm + "-" + dd);
});

更新

只需更改事件：http://jsfiddle.net/jpkp0o0w/7/

$("[name=date_selected]").click(function () {