如何设置" onchange" Razor" EditorFor"使用日期字段?

时间:2018-03-22 14:19:37

标签: c# jquery asp.net asp.net-mvc razor

我有一个剃刀EditorFor用于Date类型的字段:

@Html.EditorFor(model => model.AvailableEndDateTimeUtc)

我想设置一个"更改"生成的datepicker上的事件,但是当手动更改输入中的值或使用日历时,我找不到获取事件的解决方案。

我尝试使用JavaScript侦听器:

$("#AvailableEndDateTimeUtc").on("change", function () {
    alert("ok");
});

它可以手动更改输入,但不能使用日历。

我尝试添加" onchange"事件

@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "myFunction" })

@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "myFunction()" })

但它根本不起作用。

以下是生成的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>

编辑1

使用此语法时会生成此代码:

@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 });
});

编辑2

我尝试添加该代码:

$('#AvailableEndDateTimeUtc-parent').change(function () {
    alert("Select change");
});

但只有当我在输入中进行手动更改时才会触发它。

我试图获取日期选择器并在其上添加事件(我在文档中看到它有一个&#39; onSelect&#39;事件)但是它会破坏生成的组件。

此次修改的最后一次尝试:获取现有的datepicker选项并添加我的事件

$("#AvailableEndDateTimeUtc-parent").data("datetimepicker").options.OnChangeDate = function() {
    alert("Select change");
}

我将该代码放在document.ready$("#AvailableEndDateTimeUtc-parent").data("datetimepicker")返回&#34;未定义&#34;。但是如果我在控制台中执行相同的操作,它将返回组件。

2 个答案:

答案 0 :(得分:0)

也许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>

答案 1 :(得分:0)

试试这个。您似乎在为state_id函数使用了错误的ID。

而不是使用prefix_sum[state_id]

onchange
#AvailableEndDateTimeUtc-parent