從嵌入式/嵌入式引導datepicker獲取價值

Question

從嵌入式/嵌入式引導datetimepicker獲取選定的值有問題。

這裏是我的代碼：

<div class="col-lg-8 datepicker_area" style="background: red;"> 
       <div style="overflow:hidden;"> 
        <div class="form-group"> 
         <div class="row"> 
          <div class="col-md-8"> 
           <div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div> 
           <input type="hidden" name="date" id="my_hidden_input" value=""> 
          </div> 
         </div> 
        </div> 
        <script type="text/javascript"> 

         $("#datetimepicker").on("changeDate", function(event) { 
          $("input[type='hidden'][name='date']").val(
            $('#datetimepicker').datepicker('getFormattedDate') 
          ) 
         }); 

         $(function() { 
          $('#datetimepicker').datetimepicker({ 
           inline: true, 
           sideBySide: true 
          }); 

          $('#datetimepicker').datetimepicker(); 
          $('#datetimepicker').on("changeDate", function() { 
           $('#my_hidden_input').val(
             $('#datetimepicker').datetimepicker('getFormattedDate') 
           ); 
          }); 


         }); 
        </script> 
       </div> 

      </div> 

沒有什麼與我隱藏輸入發生。 他沒有保存它的價值。

我已經從引導文件的代碼。

有人知道它是如何工作的？ 謝謝。

Answer 1

根據Bootstrap 3 Datepicker，您需要dp.change事件。

參考：http://eonasdan.github.io/bootstrap-datetimepicker/Events/

更換您的CHANGEDATE事件$('#datetimepicker').on("changeDate", function() {}); 到 $('#datetimepicker').on('dp.change', function(event) {});

可以比獲得使用event.date甚至更​​好的日期，日期格式event.date.format('MM/DD/YYYY h:mm a')

例子： $('#datetimepicker').on('dp.change', function(event) { alert(event.date); });

請參考以下解決方案：

$(function() { 
 
    $('#datetimepicker').datetimepicker({ 
 
    inline: true, 
 
    sideBySide: true 
 
    }); 
 
    $('#datetimepicker').on('dp.change', function(event) { 
 
    //console.log(moment(event.date).format('MM/DD/YYYY h:mm a')); 
 
    //console.log(event.date.format('MM/DD/YYYY h:mm a')); 
 
    $('#selected-date').text(event.date); 
 
    var formatted_date = event.date.format('MM/DD/YYYY h:mm a'); 
 
    $('#my_hidden_input').val(formatted_date); 
 
    $('#hidden-val').text($('#my_hidden_input').val()); 
 
    }); 
 
});

#selected-date, 
 
#hidden-val { 
 
    font-weight: bold; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
 
<div> 
 
    Selected Date: <span id="selected-date"></span> 
 
    <br/> 
 
    <br/>Value of hidden field: <span id="hidden-val"></span> 
 
    <br/> 
 
</div> 
 
<div class="col-lg-8 datepicker_area" style="background: red;"> 
 
    <div style="overflow:hidden;"> 
 
    <div class="form-group"> 
 
     <div class="row"> 
 
     <div class="col-md-8"> 
 
      <div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div> 
 
      <input type="hidden" name="date" id="my_hidden_input" value=""> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>