[英]How do I set an “onchange” event of a Razor “EditorFor” with a Date field?
I have a razor EditorFor
for a field of type Date : 我有一个剃刀
EditorFor
类型的日期字段:
@Html.EditorFor(model => model.AvailableEndDateTimeUtc)
I want to set a "change" event on the generated datepicker but I don't find a solution to get an event when the value in the input is changed manually OR with the calendar. 我想在生成的日期选择器上设置一个“更改”事件,但是当输入中的值手动更改或随日历更改时,我找不到找到事件的解决方案。
I tried with a JavaScript listener : 我尝试使用JavaScript侦听器:
$("#AvailableEndDateTimeUtc").on("change", function () {
alert("ok");
});
It work with a manually change in the input but not with the calendar. 它可以手动更改输入内容,但不能使用日历。
I tried to add the "onchange" event 我试图添加“ onchange”事件
@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "myFunction" })
or 要么
@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "myFunction()" })
But it doesn't work at all. 但这根本不起作用。
Here is the generated HTML code : 这是生成的HTML代码:
<div class="input-append date" id="AvailableEndDateTimeUtc-parent" data-date="">
<input class="span2 valid" data-val="true" data-val-date="The field 'Date de fin de disponibilité' must be a date." id="AvailableEndDateTimeUtc" name="AvailableEndDateTimeUtc" type="text" value="" aria-describedby="AvailableEndDateTimeUtc-error" aria-invalid="false">
<span class="add-on"><i class="fa fa-calendar"></i></span>
</div>
EDIT 1 编辑1
This code is generate when I use this syntax : 当我使用以下语法时,将生成此代码:
@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "OnChangeEvent()" })
$(function () {
var c = Globalize.culture().calendars.standard;
var fmt = c.patterns["d"];
$("#AvailableEndDateTimeUtc-parent").datetimepicker({
language: 'glob',
format: fmt,
pickDate: true,
pickTime: false,
pickSeconds: false,
pick12HourFormat: false,
maskInput: true,
collapse: true });
});
EDIT 2 编辑2
I tried to add that code : 我试图添加该代码:
$('#AvailableEndDateTimeUtc-parent').change(function () {
alert("Select change");
});
But it is triggered only when I do a manual change in the input too. 但是它也只有在我也手动更改输入时才触发。
I tried to get the datepicker and add the event on it (I saw in the docs that it has a 'onSelect' event) but it breaks the generated component. 我试图获取datepicker并在上面添加事件(我在文档中看到它具有'onSelect'事件),但是它破坏了生成的组件。
Last attempt for this edit : get the existing datepicker options and add my event 此编辑的最后尝试:获取现有的datepicker选项并添加我的事件
$("#AvailableEndDateTimeUtc-parent").data("datetimepicker").options.OnChangeDate = function() {
alert("Select change");
}
I put that code on the document.ready
but $("#AvailableEndDateTimeUtc-parent").data("datetimepicker")
return "undefined". 我将该代码放在
document.ready
上,但是$("#AvailableEndDateTimeUtc-parent").data("datetimepicker")
返回“ undefined”。 But if I do the same in the console, it returns the component. 但是,如果我在控制台中执行相同的操作,它将返回该组件。
Perhaps the onChangeDateTime
setting will allow you to call the OnChangeEvent(). 也许
onChangeDateTime
设置将允许您调用OnChangeEvent()。
@Html.EditorFor(model => model.AvailableEndDateTimeUtc)
<script type="text/javascript">
$('#AvailableEndDateTimeUtc').change(function(){
OnChangeEvent();
});
$(function () {
var c = Globalize.culture().calendars.standard;
var fmt = c.patterns["d"];
$("#AvailableEndDateTimeUtc-parent").datetimepicker({
onChangeDateTime: OnChangeEvent, /* Add onChangeDateTime event */
language: 'glob',
format: fmt,
pickDate: true,
pickTime: false,
pickSeconds: false,
pick12HourFormat: false,
maskInput: true,
collapse: true });
});
function OnChangeEvent(){
alert('Changed!');
}
</script>
Try this one. 试试这个。 it seems you are using wrong id for
onchange
function. 似乎您为
onchange
函数使用了错误的ID。
instead of using #AvailableEndDateTimeUtc-parent
you are using #AvailableEndDateTimeUtc
而不是使用
#AvailableEndDateTimeUtc-parent
,而是使用#AvailableEndDateTimeUtc
@Html.EditorFor(model => model.AvailableEndDateTimeUtc)
<script type="text/javascript">
$(function () {
var c = Globalize.culture().calendars.standard;
var fmt = c.patterns["d"];
$("#AvailableEndDateTimeUtc-parent").datetimepicker({
language: 'glob',
format: fmt,
pickDate: true,
pickTime: false,
pickSeconds: false,
pick12HourFormat: false,
maskInput: true,
collapse: true });
});
$('#AvailableEndDateTimeUtc-parent').change(function(){
// do your logic here
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.