gpt4 book ai didi

javascript - 根据所选值动态设置 Bootstrap 日期选择器的 startDate 和 endDate

转载 作者:行者123 更新时间:2023-12-03 05:54:07 25 4
gpt4 key购买 nike

我想根据选项表单中选择的值动态设置 Bootstrap 日期选择器的 startDate 和 endDate 。

因此,如果我在选项中选择了 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"
});
});
});

关于javascript - 根据所选值动态设置 Bootstrap 日期选择器的 startDate 和 endDate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40013855/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com