文本框上的更改事件的自舉日期選擇器不起作用？

Question

我有一個日期選擇器，它可以正常工作，它的更改事件也可以正常工作。 現在，我實現了一個圖標，並使文本框為只讀。 現在，無論在只讀文本框情況下還是在非只讀課本情況下都不會觸發change事件。

工作案例的HTML：

<label class="control-label">Date</label>
                    <input type="text" class="form-control date-picker" id="StateDatePicker" placeholder="MM/DD/YYYY">

工作案例的Javascript：

$StateDatePicker = $("#StateDatePicker");
        $(".date-picker").datetimepicker({


  format: "MM/DD/YYYY"
        })
This is how i called change event.

        $StateDatePicker.on("dp.change", function () {
            //Performing functionality 
        });

這工作正常。在工作情況下沒有圖標，現在我添加了圖片中顯示的圖標：

現在，我更改了以下內容：HTML：

<div class='date-picker input-group date'>
<input type='text' class="form-control" id="StateDatePicker" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

日期選擇器工作正常，僅未調用更改事件。JS中沒有更改。 為什么它的變更事件不被調用不起作用？

Answer 1

終於我得到了答案，我嘗試了一下，現在可以正常工作了

<div class='date-picker input-group date'  id="StateDatePicker"> //Set id to div
<input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

Answer 2

嘗試類似：

$("#StateDatePicker").datetimepicker({
    format: "MM/DD/YYYY"
}).on("changeDate", function () {
    //Performing functionality 
});

或將您的HTML更改為此：（為div標簽提供ID，而不是輸入字段）

<div class="input-group input-append date" id="StateDatePicker">
   <input type="text" class="form-control" placeholder="MM/DD/YYYY">
   <span class="input-group-addon add-on">
      <span class="glyphicon glyphicon-calendar"></span>
   </span>
</div>

Answer 3

嘗試像這樣放置

這可能對您有幫助（不確定）

  <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>

Answer 4

它的工作演示。 HTML部分

 <div class="form-group input-group">
            <label class="input-group-btn" for="date-fld1">
                <span class="btn btn-default">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </label>
            <input type="text" class="form-control date-input" id="date-fld1" readonly/>
 </div>

而在腳本中-----------

$(".date-input").datepicker().on("changeDate",function(){

alert('hi');

});

使用的CDN文件-http: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js和http://cdnjs.cloudflare.com/ajax/libs/ bootstrap-datepicker / 1.3.0 / css / datepicker.min.css

Answer 5

在您的HTML中：

在您的javascript上：

$（'。form_date'）。datetimepicker（{language：'id'，weekStart：1，todayBtn：1，autoclose：1，todayhighlight：1，startView：2，minView：2，forceParse：0}）;

Answer 6

您可以使用日期選擇器的onSelect事件。

$(".date").datepicker({
  onSelect: function(dateText) {
    display("Selected date: " + dateText + "; input's current value: " + this.value);
  }
});

當然，如果願意，您可以在輸入代碼中觸發change事件：

$(".date").datepicker({
  onSelect: function() {
    $(this).change();
  }
});