Setting textbox to jquery datepicker

Question

I've got a loop on my model (on the view page) for all drivers that was submitted by the user earlier in the application. For each driver additional information is required, thus a for loop was created. In this loop 3 controls are created, which one of them are/should be a datepicker (datepicker is not showing).

My problem is that because the control is created on the fly the id does not stay consistant thus setting the datepicker in js is not working.

This is what I've done:

    @{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
       }
   }

Normally I would call do this :

   $("#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");
});

How would I accomplish a date time picker to pop up? Currently nothing is happening when I click on the textbox as well as the glyphicon/image...

The control looks like this (I typed in the date):

---

Solution

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

And my js now looks like this:

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

Answer 1

Have you tried instantiating multiple instances via CSS class selector? Also, your span.datepicker tags that should just act as triggers are also set up to be picked up by the CSS class selector, so you need to change that to something like span.datepicker-trigger .

script

$('.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");
})