Question

我们正在开发一个日历项目，其中在表单输入中存储/创建日期值。我试图弄清楚如何使用输入中的日期值并将其分开以创建更加图形化的显示日期。在下面的示例中，“到达”输入的日期值将显示在“leftdate”范围内，并在右侧更新。

<li class="trip">
<span class="leftdate">17<br /><span class="smldate">OCT 11</span></span>
<span class="rightdate">23<br /><span class="smldate">OCT 11</span></span>
<span class="detail"><span class="stuff">other calendar functions</span>
<span class="date"> arr: <input class="arrival" value="17 Oct 11" /> - dep: <input class="departure" value="23 Oct 11" /></span>
</span>
</li>

可以通过日期选择器以及其他JQuery脚本更改输入值。我需要的是如何在更改后从输入中提取值，然后更改leftdate和rightdate spans中的值。

Answer 1

使用javascript Date对象。

传递从用户收集日期输入的输入中的值，并像这样解析它：

var timestamp = Date.parse('nov 23 2011'); //returns ms since unix epoch
var dateObj = new Date(timestamp); //Creates a new date object from the timestamp

dateObj; //Returns "Wed Nov 23 2011 00:00:00 GMT-0500 (Eastern Standard Time)"

dateObj.getDate(); //Returns "23"
dateObj.getMonth(); //Returns "10" (january is 0)
dateObj.getFullYear(); //Returns "2011"

More about the javascript date object here

然后只需为datepicker设置更改事件监听器，并让它更新相应的元素。

Answer 2

希望这是你要求的。更改您的代码，如下所示

<li class="trip">
<span class="leftdate" id="leftDate">17<br /><span class="smldate" id="leftsmldate">OCT 11</span></span>
<span class="rightdate" id="rightDate">23<br /><span class="smldate" id="rightsmldate">OCT 11</span></span>
<span class="detail"><span class="stuff">other calendar functions</span>
<span class="date"> arr: <input class="arrival" id="arrival" value="17 Oct 11" onchange="updateSpan(1,this)"/> - dep: <input class="departure" id="departure" value="23 Oct 11" onchange="updateSpan(2,this)" /></span>
</span>
</li>
function updateSpan(flag,obj)
{
    var val = obj.value;
    if(flag == 1)
    {
       document.getElementById("leftDate").innerHTML = val.split(" ")[0] + "</br>";
       document.getElementById("leftsmlate").innerHTML = val.split(" ")[1] + val.split(" ")[2];
    }
    else
    {
       document.getElementById("rightDate").innerHTML = val.split(" ")[0] + "</br>";
       document.getElementById("rightsmlDate").innerHTML = val.split(" ")[1] + val.split(" ")[2];
    }

}

希望这能解决你的问题。

jquery从表单输入中分出日期值

2 个答案: