Why is my second “timepicker” not being populated?

2019-09-14 21:29发布

问题:

This question is related to, but different from, this one: How can I add Seconds to my "timepicker"?

I'm using virtually identical jQuery code for two pairs of text input controls (a BeginDate/BeginTime pair, and a EndDate/EndTime pair).

The first pair works fine with this code:

var beginDatepickerOpts = {
  changeMonth: true,
  changeYear: true,
  showWeek: true,
  onClose: function() {
                    if (($("#BeginTime").val()).length == 0) {
                        $("#BeginTime").timeEntry("setTime", new Date(0, 0, 0, 0, 0, 0));
                    }
                    $("#BeginTime").focus();
                }
        }

$("#BeginDate").datepicker(beginDatepickerOpts);

...on selecting a date, "00:00" is entered into the "time" input (I want it to be "00:00:00", but that's an equine of a decidedly different hue, discussed in the question referenced above).

However, this code for the second pair of inputs:

   var endDatepickerOpts = {
     changeMonth: true,
     changeYear: true,
     showWeek: true,
     onClose: function() {
                if (($("#EndTime").val()).length == 0) {
                    $("#EndTime").timeEntry("setTime", new Date(0, 0, 0, 23, 59, 59));
                }
                $("#EndTime").focus();
            }
    }

    $("#EndDate").datepicker(endDatepickerOpts);

... -- although it seems to be for all practical purposes indentical -- fails to enter anything into the superficially eschatological "EndTime" input text.

Why would that be the case? The Date val is correct, correct (0, 0, 0, 23, 59, 59)? The razor html for the two pairs is identical except for the names of the elements (EndTime instead of BeginTime).

回答1:

Make sure that you initialize both occurrences of the $.timeEntry() fields like so:

// Start Date / Time
var beginDatepickerOpts = {
    ...
}
$('#BeginTime').timeEntry(); // Initialize the BeginTime TimeEntry Field
$("#BeginDate").datepicker(beginDatepickerOpts);

// End Date / Time
var endDatepickerOpts = {
    ...
}
$('#EndTime').timeEntry(); // Initialize the EndTime TimeEntry Field
$("#EndDate").datepicker(endDatepickerOpts);

EXAMPLE

JSFiddle Example Here.