jquery - $("#txtStartDate").datepicker({}) 不适合我

Question

  <div class="datePickerContainer">
                            <input class="form-control datepicker bg-color-white" placeholder="MM/DD/YYYY" maxlength="15" ng-model="PriceLineObj.StartDate" id="txtDate" type="text">
                        </div>

JQuery 代码是：

  $(function () {

    debugger;

    $("#txtDate").datepicker({
        showOn: "button",
        class: "tester",
        buttonImage: "images/calendar-green.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        minDate: 0,
        maxDate: 365,
        beforeShow: function () {
            $('#ui-datepicker-div').addClass("lbAvalabilityDatePicker")
        },
        onSelect: function (selectedDate) {
            $('.enddatepicker').datepicker('option', 'minDate', selectedDate);
        }
    });
})

现在，当我单击 images/calendar-green.gif 时，我看不到日历。我已经添加了所需的库。请建议

Answer 1

当您单击 Select Date 时，它​​会起作用：

$(function() {
  debugger;
  $("#txtDate").datepicker({
    showOn: "button",
    class: "tester",
    buttonImage: "images/calendar-green.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    minDate: 0,
    maxDate: 365,
    beforeShow: function() {
      $('#ui-datepicker-div').addClass("lbAvalabilityDatePicker")
    },
    onSelect: function(selectedDate) {
      $('.enddatepicker').datepicker('option', 'minDate', selectedDate);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div class="datePickerContainer">
  <input class="form-control datepicker bg-color-white" placeholder="MM/DD/YYYY" maxlength="15" ng-model="PriceLineObj.StartDate" id="txtDate" type="text">
</div>