jquery - 获取隐藏输入变化的值

Question

我想知道为什么我无法获取隐藏输入的值(日期选择器引导内联)将我的日期选择器像 doc 那样内联，所以我必须添加隐藏输入并在之后的变化中获取他的值。

HTML代码:

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
<input type="hidden" id="my_hidden_input" class="form-control">

JS代码:

jQuery('#datepicker').datepicker();
jQuery('#datepicker').on('changeDate', function() {
jQuery('#my_hidden_input').val(
        jQuery('#datepicker').datepicker('getFormattedDate')
    );
});

jQuery(document).ready(function () {
    jQuery("#datepicker").datepicker({
        startDate: new Date(),
        language: "fr",
        autoOpen:true,
        autoclose: true,
        todayHighlight: true
        //datesDisabled: ['22/02/2017', '28/02/2017']
    }).datepicker('update', new Date());;
});



jQuery("#datepicker .form-control" ).val().trigger('change', function() {
    alert(jQuery(this).val());  //here
});

jQuery('#datepicker').datepicker();
      jQuery('#datepicker').on('changeDate', function() {
          jQuery('#my_hidden_input').val(
              jQuery('#datepicker').datepicker('getFormattedDate')
          );
      });
    
jQuery(document).ready(function () {
      jQuery("#datepicker").datepicker({
          startDate: new Date(),
          language: "fr",
          autoOpen:true,
          autoclose: true,
          todayHighlight: true
      }).datepicker('update', new Date());;
  });
  
  
jQuery( "#datepicker .form-control" ).change(function() {
       alert(jQuery(this).val());
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
            <input type="hidden" id="my_hidden_input" class="form-control">

Answer 1

你可以试试这个

jQuery(document).ready(function () {
    var datepicker = jQuery("#datepicker").datepicker({
        startDate: new Date(),
        language: "fr",
        autoOpen:true,
        autoclose: true,
        todayHighlight: true
        //datesDisabled: ['22/02/2017', '28/02/2017']
    }).datepicker('update', new Date());
    datepicker.on('changeDate', function() {
      jQuery('#my_hidden_input').val(
          jQuery(this).datepicker('getFormattedDate')
      );
  });
});