2 回答

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先:這個(gè)語法不正確:
@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, htmlAttributes = new { @class = "form-control" }, @readonly = true })
它將呈現(xiàn)這個(gè)無用的屬性:htmlAttributes它應(yīng)該是:
@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, @class= "form-control", @readonly = true })
我想這是一個(gè)錯(cuò)字。
其次: 您應(yīng)該做的是在 for 循環(huán)中生成所有 HTML,然后使用單個(gè)腳本標(biāo)記立即初始化 daterangepicker 控件。您可以通過類獲取所有輸入,而不是使用它們的 id。
@{
int numOfGuests = 2;
}
@for (int i = 1; i <= numOfGuests; i++)
{
<div class="row">
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(model => model.DateRange, new { id = "dateRangePicker" + i, @class = "form-control custom-date-picker" , @readonly = true })
</div>
</div>
</div>
}
<script type="text/javascript">
$('input.custom-date-picker').daterangepicker({
"showWeekNumbers": true
}, function (start, end, label) {
console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
</script>
解釋:
創(chuàng)建日期選擇器后,我向每個(gè)日期選擇器添加一個(gè)自定義 css 類:
custom-date-picker
在 for 循環(huán)渲染 HTML 后,我創(chuàng)建一個(gè)腳本標(biāo)記并使用選擇器獲取所有輸入
.custom-date-picker
,并從中創(chuàng)建 daterangepicker 控件
PS 為了解釋起見,我使用了您的代碼的簡化版本。

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
我不會使用 ID 來分配日期選擇器,而是使用 css 類(即使是未定義的類,僅用于此目的)。所以你的代碼可能是這樣的:
@class = "control-label col-md-2 ToBeDatePickered"
所以你可以嘗試使用這個(gè)簡單的選擇器:
$(".ToBeDatePickered").daterangepicker();
// ... and so on...
JS 代碼應(yīng)該在 for 語句之外,也許在 document.ready 函數(shù)中,如下所示:
<script type="text/javascript">
$(document).ready(funtion() {
$(".ToBeDatePickered").daterangepicker();
// ... and so on...
});
</script>
希望這可以幫助
- 2 回答
- 0 關(guān)注
- 150 瀏覽
添加回答
舉報(bào)