Установка текстового поля для jquery datepicker - PullRequest
0 голосов
/ 15 января 2019

В моей модели (на странице просмотра) есть цикл для всех драйверов, которые были отправлены пользователем ранее в приложении. Для каждого драйвера требуется дополнительная информация, поэтому был создан цикл for. В этом цикле создаются 3 элемента управления, один из которых / должен быть указателем даты (указатель даты не отображается).

Моя проблема в том, что, поскольку элемент управления создается на лету, идентификатор не остается постоянным, поэтому настройка средства выбора даты в 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");
});

Как бы я выбрал функцию выбора даты и времени? В настоящее время ничего не происходит, когда я нажимаю на текстовое поле, а также на глификон / изображение ...

Элемент управления выглядит следующим образом (я набрал дату):

enter image description 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-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");
})

1 Ответ

0 голосов
/ 15 января 2019

Вы пробовали создавать экземпляры нескольких экземпляров с помощью селектора классов 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");
})
...