[英]Setting textbox to jquery datepicker
對於用戶之前在應用程序中提交的所有驅動程序,我的模型(在視圖頁面上)有一個循環。 對於每個驅動程序都需要附加信息,因此創建了一個 for 循環。 在這個循環中創建了 3 個控件,其中一個是/應該是日期選擇器(未顯示日期選擇器)。
我的問題是,因為控件是動態創建的,所以 id 不會保持一致,因此在 js 中設置日期選擇器不起作用。
這就是我所做的:
@{int driverSumCount = 1;}
@for (int i = 0; i < Model.Count; i++)
{
<div class="form-group">
<label class="col-lg-12 control-label summary-list">
@driverSumCount<text>.</text>
@Model[i].DriverDesc
</label>
</div>
<hr />
if (i == 0)
{ /@ Other controls are added here @/
<div class="form-group">
<div class="col-lg-12 padding-none">
@Html.LabelFor(m => @Model[i].LicenceExpDate, new { @class = "col-lg-12 control-label label-input" })
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
<div class="input-group input-text" style="text-align:center; vertical-align:central; margin:0px !important; padding:0px !important; border:1px solid #9f9f9f !important; border-left:0px !important;">
@Html.TextBoxFor(m => @Model[i].LicenceExpDate, new { @class = "form-control datepicker", data_dob = "dd/mm/yyyy", placeholder = "DD/MM/YYYY" })
<span class="CalendarOuter">
<span class="input-group-addon btn" style="background-color:#e8ecf0; border:1px solid #e8ecf0 !important; height:97% !important; padding:1px !important; margin:1px !important;">
<span class="fa datepicker" style="color:#405E7C; background-color:#e8ecf0; padding-top:13px;">
<img src="~/Images/png/CalendarN.png" height="27" width="27" />
</span>
</span>
</span>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
@Html.ValidationMessageFor(m => @Model[i].LicenceExpDate)
</div>
</div>
</div>
}
else
{
//more code
}
}
通常我會調用這樣做:
$("#LicenceExpDate").datepicker({
beforeShow: function(input, inst) {
setTimeout(function() {
inst.dpDiv.css({
top: $("#LicenceExpDate").offset().top + 55
});
}, 0);
},
//other settings
});
$(".datepicker").on("click", function (e) {
$("#LicenceExpDate").datepicker("show");
});
我將如何完成一個日期時間選擇器彈出? 目前,當我單擊文本框以及字形/圖像時什么也沒有發生...
控件看起來像這樣(我輸入了日期):
<div class="form-group">
<div class="col-lg-12 padding-none">
@Html.LabelFor(m => @Model[i].LicenceExpDate, new { @class = "col-lg-12 control-label label-input" })
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
<div class="input-group input-textGlyphicon" style="background-color:#e8ecf0 !important; padding-right:4px !important;">
@Html.TextBoxFor(m => @Model[i].LicenceExpDate, new { @class = "form-control input-textGlyphicon datepicker", data_dob = "dd/mm/yyyy", placeholder = "DD/MM/YYYY" })
<div class="input-group-addon" style="width:60px;background-color:#e8ecf0 !important;">
<span class="fa datepicker-trigger" style="background-color:#e8ecf0">
<img src="~/Images/png/CalendarN.png" height="27" width="27" />
</span>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
@Html.ValidationMessageFor(m => @Model[i].LicenceExpDate)
</div>
</div>
</div>
我的 js 現在看起來像這樣:
var serverDate = $("#ServerDate").val();
var dateStart = moment($("#ServerDate").val(), "DD/MM/YYYY").format('YYYY/MM/DD');
$('.datepicker').each(function () {
$(this).datepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: $(".datepicker-triggerN").offset().top + 55
});
}, 0);
},
minDate: new Date(dateStart),
dateFormat: "dd/mm/yy",
dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"]});
});
$(".datepicker-trigger").on("click", function (e) {
var $datepicker = $(this).closest('.form-group').find('.datepicker');
$datepicker.datepicker("show");
})
您是否嘗試過通過 CSS 類選擇器實例化多個實例? 此外,您的span.datepicker
標記應該只用作觸發器也設置為由 CSS 類選擇器選取,因此您需要將其更改為類似span.datepicker-trigger
。
腳本
$('.datepicker').each(function(){
$(this).datepicker({ /* add callbacks here */ });
});
$(".datepicker-trigger").on("click", function (e) {
var $datepicker = $(this).closest('.form-group').find('.datepicker');
$datepicker.datepicker("show");
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.