2

Всем, привет! Уважаемое сообщество, прошу вашей помощи. Возникла трудность с получением значения из input с помощью метода val().

Есть DIV который содержит `inputы:

alt text

Вот его разметка:

<div class="input-daterange input-group afc" id="datepicker-common-table">
   <input type="text" class="input-sm form-control" name="start" placeholder="Начальная дата">
   <span class="input-group-addon"> - </span>
   <input type="text" class="input-sm form-control" name="end" placeholder="Конечная дата">
</div>

Вот сценарий которым пытаюсь получить значения после их установки:

$(document).on('change', "input[name='start']", function()
{       
   $(document).on('change', "input[name='end']", function()
   {
      var startVal = $("#datepicker-common-table > input:text").val();
      var endVal = $("#datepicker-common-table > input:text").val();
      console.log( startVal + " - " + endVal );
   });
});

В итоге в консоль получаю следующий вывод:

alt text

2
  • Вот этот код пытается получить значения одного и того же элемента var startVal = $("#datepicker-common-table > input:text").val(); var endVal = $("#datepicker-common-table > input:text").val(); ... с псевдоклассом :text, которого никогда не существовало. Вы, наверное, хотели использовать селектор атрибута: input[type="text"]. А вот эта конструкция: $(document).on('change', "input[name='start']", function() { $(document).on('change', "input[name='end']", function() { Может навесить вам бесконечное число обработчиков. Разберитесь, что такое on().
    – etki
    Commented 22 апр. 2014 в 7:39
  • я использую плагин bootstrap-datepicker sandbox afc.ru/newui_backoffice/# там есть событие changeDate bootstrap-datepicker.readthedocs.org/en/release/… оно не работает тоже Commented 22 апр. 2014 в 7:51

2 ответа 2

1

Во-первых, значения startVal и endVal у вас изменятся только при изменении второй даты, а при изменении первой будут назначаться ненужные обработчики событий.

Во-вторых, вы неправавильно находите input'ы start и end. Нужно использовать input[type="text"] вместо input:text, но даже так в них обоих будет содержаться массив с двумя input'ами start и end.

Это можно переписать так:

$('input[name="start"').on('change', onChange);     
$('input[name="end"]').on('change', onChange);

function onChange () {
  var startVal = $('input[name="start"]').val();
  var endVal = $('input[name="end"]').val();
  console.log( startVal + " - " + endVal );
}
0

Как вариант:

$("input[name='start']").datepicker({
dateFormat: 'dd.mm.yy',
showOtherMonths: true,
firstDay: 1,
onSelect: function(dateText, inst) {
if($('input[name='start']').val() == dateText){$('input[name='start']').val('')}
else{$('input[name='start']').val(dateText)};
});

То же самое и для $('input[name='end']').

Предлагаю данное как вариант и не более, если есть более правильные и валидные решения- с радостью рассмотрю их.

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.