具有自动更新 MVC Web 表单的 jquery 时间选择器

Question

$(document).ready(function () {
    $('.myPicker').timepicker({
        'step': '15',
        'minTime': '8:00am',
        'maxTime': '17:30pm',
        'timeFormat': 'H:i:s',
    }); 

    $('.myTimepicker').on('changeTime', function() {
        $('#mySpan').text($(this).val());
    });     
});

这是我的 MVC 视图页面

@for (int i = 0; i < Model.Count; i++)
{
    <td>
         @Html.EditorFor(m => m[i].From, new { htmlAttributes = new { @class = "form-control myPicker" } })
    </td>
}

任何人都可以告诉我如何在页面首次加载时自动填写网络表单（开始时间）。 我正在使用@model IList

这是我的代码，但这个 jQuery 对我不起作用。

Answer 1

您应该为每个时间选择器添加一个单独的<span id="mySpan-@i"></span>以跟踪每个选择器的更改。 然后向输入元素添加数据属性： @Html.EditorFor(m => m[i].From, new { htmlAttributes = new { @class = "form-control myPicker", data_id = i } }) 。 然后在您的 JavaScript 代码中，您将拥有：

$(function () {
    var timePickers = $('.myPicker');

    timePickers.each(function () {
        var currentTimePicker = $(this)

        currentTimePicker.timepicker({
            'step': '15',
            'minTime': '8:00am',
            'maxTime': '17:30pm',
            'timeFormat': 'H:i:s',
        });

        currentTimePicker.on('changeTime', function () {
            var id = currentTimePicker.data('id');
            $('#mySpan-' + id).text($(this).val());
        });

        $('#mySpan-' + currentTimePicker.data('id')).text(currentTimePicker.val());
    });        
});