Блог

Я хочу динамически устанавливать начальную и конечную дату выбора даты начальной загрузки на основе значения, выбранного в форме опции.

Итак, если я выбрал Boby в опции, то для выбора даты будут установлены StartDate = 2016-10-04 и EndDate = 2016-10-14.

Массив:

  <?php
    $data = array ( 
        [0] => Array ( [id] => 2 [name] => Anton [date_start] => 2016-10-04 [date_end] => 2016-10-14 ) 
        [1] => Array ( [id] => 4 [name] => Boby [date_start] => 2016-10-09 [date_end] => 2016-10-29 ) 
        [2] => Array ( [id] => 5 [name] => Ciara [date_start] => 2016-10-01 [date_end] => 2016-10-31 ) 
        [3] => Array ( [id] => 6 [name] => Don [date_start] => 2016-10-05 [date_end] => 2016-12-31 ) 
        [4] => Array ( [id] => 7 [name] => Ester [date_start] => 2016-10-01 [date_end] => 2016-12-31 ) 
        )
    ?>
  

Выберите

 <select name="date" id="date">
<?php
foreach ($data as $r) {
echo "<option value='$r['id']'>$r[name]</option>";
}
?>
</select>
  

Дата ввода

 <label class="col-sm-3 control-label">Start</label>
<input id="date_start" name="date_start" type="text" class="form-control>
<label class="col-sm-3 control-label">End</label>
<input id="date_end" name="date_end" type="text" class="form-control">
  

У кого-нибудь есть идея решить эту проблему?

Обновить===============================================================

Я пробовал с помощью jQuery, но это не сработало. Вот мой JS-код

 $(document).ready(function () {
        $('#date').change(function () {
            var start;
            var end;
            var selected = $(this).find("option:selected").val();

<?php
$js_array = json_encode($data);
echo "var data = " . $js_array . ";n";
?>

            for (var i = 0, len = data.length; i < len; i  ) {
                if (data[i]['id'] === selected) {
                    start = data[i]['date_start'];
                    end = data[i]['date_end'];
                }
            }

            $('input').datepicker({
                startDate: start,
                endDate: end,
                dateFormat: "yyyy-mm-dd"
            });
        });
    });
  

Просто измените знак равенства на = = и добавьте функцию val, чтобы изменить дату с помощью селектора на подобное:

 $(document).ready(function () {
    $('#date').change(function () {
        var start;
        var end;
        var selected = $(this).find("option:selected").val();

        //your php code

        for (var i = 0, len = data.length; i < len; i  ) {

            if (data[i]['id'] == selected) {
                start = data[i]['date_start'];
                end = data[i]['date_end'];
            }
        }

        $("#date_start").val(start);
        $("#date_end").val(end);
        $('input').datepicker({
            dateFormat: "yy-mm-dd"
        });
    });
});
  

измените свой для каждого цикла на выход, как показано ниже

 <select name="date" id="date">
    <option value="{'startDate':'2016-10-04','endDate':'2016-10-14'}">Anton</option>
    <option value="{'startDate':'2016-10-09','endDate':'2016-10-29'}">Boby</option>
</select>
  

после этого вы можете легко получить даты при выборе с помощью javascript.