jQuery從表單輸入中分解出日期值

Question

我們正在做一個日歷項目，其中日期值是在表單輸入中存儲/創建的。 我試圖找出如何使用輸入中的日期值並將其拆分以創建更多圖形顯示日期。 在下面的示例中，來自“到達”輸入的日期值將顯示在“ leftdate”跨度中，以rightdate離開。

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

輸入值可由Date Picker以及其他JQuery腳本更改。 我需要的是如何在更改后從輸入中提取值，然后在leftdate和rightdate跨度中更改值。

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"

有關此處的javascript日期對象的更多信息

然后，只需為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];
    }

}

希望這能解決您的問題。