Сценарий не работает для Datepicker

Я пытаюсь сделать дату начала/окончания моего datepicker и имел сценарий со мной, который я нашел в Bootstrap-Datepicker. Я внимательно следил за документацией, но сценарий запускал только .datepicker, что превращает <input> в датпикера, но поведение не то, что я хочу. Некоторая помощь от сообщества, пожалуйста?Сценарий не работает для Datepicker

Сценарий:

<script> 
     $(document).ready(function() { 
      var nowTemp = new Date(); 
      var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

      var checkin = $('#dateFrom').datepicker({ 
       onRender: function (date) { 
        return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
       } 
      }).on('changeDate', function (ev) { 
       if (ev.date.valueOf() > checkout.date.valueOf()) { 
        var newDate = new Date(ev.date) 
        newDate.setDate(newDate.getDate() + 1); 
        checkout.setValue(newDate); 
       } 
       checkin.hide(); 
       $('#dateTo')[0].focus(); 
      }).data('datepicker'); 
      var checkout = $('#dateTo').datepicker({ 
       onRender: function (date) { 
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; 
       } 
      }).on('changeDate', function (ev) { 
       checkout.hide(); 
      }).data('datepicker'); 
     }); 
    </script>

Это мой код:

<div class="form-group"> 
        <div class="row"> 
         <label for="dateFrom" class="col-md-2 control-label">Date From:</label> 
         <div class="col-md-4"> 
          <div class="input-group date"> 
           <input type="text" id="dateFrom" name="dateFrom" class="form-control col-sm-2" required placeholder="mm/dd/yyyy"/> 
           <div class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="row"> 
         <label for="dateTo" class="col-md-2 control-label">Date To:</label> 
         <div class="col-md-4"> 
          <div class="input-group date"> 
           <input type="text" id="dateTo" name="dateTo" class="form-control col-sm-2" required placeholder="mm/dd/yyyy" /> 
           <div class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div>

источник

2015-11-13 eddie

Не могли бы вы немного пояснить? Что именно вы подразумеваете под «остановкой отдыха»? – saadq

@saadq Datepicker может отображаться на веб-странице, но так, как я хочу, чтобы поведение дампикера не срабатывало, не работает так, как хотелось бы. – eddie

Вы должны быть немного более наглядными. Каково ожидаемое поведение и каково фактическое поведение? – saadq

В вашем комментарии вы сказали, с помощью JQuery UI Datepicker (https://jqueryui.com/datepicker/) вариант, так вот некоторые примеры кода для этого.

Обратите внимание, что текущая дата должна быть записана для начального значения. Запишите также значение по умолчанию для даты окончания, если хотите. Даты должны быть записаны в формате, указанном для datepicker.

<input class="input-small" style="cursor: pointer;" type="text" id="startDate" name="startDate" readonly value="13.11.2015" /> 
<input class="input-small" style="cursor: pointer;" type="text" id="endDate" name="endDate" readonly /> 

var $startDate = $('input[name="startDate"]'); 
$startDate.datepicker({ 
    minDate: $startDate.val(), 
    changeYear: true, 
    changeMonth: true, 
    numberOfMonths: 1, 
    constrainInput: true, 
    dateFormat: 'dd.mm.yy', 
    showOn: "both", 
    showWeek: true, 
    onSelect: function (selectedDate) { 
    }, 
    onClose: function (selectedDate) { 
     $endDate.datepicker("option", "minDate", selectedDate); 
    } 
}).keyup(function (e) { 
    if (e.keyCode == 8 || e.keyCode == 46) { 
     $.datepicker._clearDate(this); 
    } 
}); 

var $endDate = $('input[name="endDate"]'); 
$endDate.datepicker({ 
    changeYear: true, 
    changeMonth: true, 
    numberOfMonths: 1, 
    constrainInput: true, 
    dateFormat: 'dd.mm.yy', 
    showOn: "both", 
    showWeek: true, 
    minDate: $startDate.val(), 
    onClose: function (selectedDate) { 
    } 
}).keyup(function (e) { 
    if (e.keyCode == 8 || e.keyCode == 46) { 
     $.datepicker._clearDate(this); 
    } 
});

Если вы хотите, я могу изменить этот образец немного включить кнопку, которая делает его выглядеть немного больше Bootstrappy (версии 2.x совместимый)

источник

2015-11-13 08:51:50

DatePicker вы используете староват (последнее обновление 2013 ...).

Попробуйте использовать эту вилку: https://github.com/eternicode/bootstrap-datepicker и проверить the doc

Это одна работы для диапазона дат и многих других ... (и как это вилка, это более совместимо с вашим фактическим кодом)

источник

2015-11-13 09:37:03 Blag

Сценарий не работает для Datepicker

ответ

Смежные вопросы