JQuery разбить значения даты из формы ввода

Question

Мы работаем над проектом календаря, где значения даты сохраняются / создаются в форме ввода. Я пытаюсь выяснить, как использовать значение даты из ввода и разбить его на части, чтобы создать более графическое отображение даты. В приведенном ниже примере значение даты из ввода «прибытие» должно отображаться в интервале «левая дата», а дата вылета - в правую дату.

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

Answer 1

Надеюсь, это то, что вы просите. Измените свой код, как показано ниже

<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];
    }

}

Надеюсь, это решит вашу проблему.

Answer 2

Используйте объект Date javascript.

Передайте значение из входных данных, которые собирают вводимые пользователем даты, и проанализируйте его следующим образом:

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

Затем просто настройте прослушиватель событий на изменение для средства выбора даты и попросите его обновить соответствующие элементы.