當使用datetime-picker選擇日期/時間時觸發事件

我目前在我的代碼中使用this datetimepicker（無圖標（僅限輸入域）），並且一旦選擇日期時間，我需要觸發一個函數。我試圖用幾個jQuery的功能，但我會得到不同的錯誤，這裏是我所使用的那些：當使用datetime-picker選擇日期/時間時觸發事件

$('#datetimepicker4').datetimepicker({ 
    onClose: function (dateText, inst) { 
     alert("date chosen");            
    } 
});

我得到這個錯誤

TypeError: option onClose is not recognized!

，並用一個類似onSelect，當我使用datepicker instead

$('#datetimepicker4').datepicker({ 
    onClose: function (dateText, inst) { 
     alert("date chosen");            
    } 
});

我得到這個錯誤：

TypeError: $(...).datepicker is not a function

ps：我正在使用jQuery 1.11.3並使用firefox運行代碼。

編輯：問題與dp.change

來源

2017-06-12 heba

您是否檢查該頁面上的「事件」選項卡？ https://eonasdan.github.io/bootstrap-datetimepicker/Events/ - 特別是dpchange https://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange – Darren

我剛剛檢查過，這真的很有幫助，謝謝:) – heba

@heba發表一個描述工作解決方案的答案（接受它），而不是編輯自己的問題來添加解決方案。 – VincenzoC

Eonasdan的DateTimePicker解決沒有onClose選項，你可以添加一個處理程序dp.change事件：

Fired when the date is changed.

Parameters:

e = { 
    date, //date the picker changed to. Type: moment object (clone) 
    oldDate //previous date. Type: moment object (clone) or false in the event of a null 
}

這裏活樣本：

$('#datetimepicker4').datetimepicker() 
 
    .on('dp.change', function(e){ 
 
    if(e.date){ 
 
     console.log('Date chosen: ' + e.date.format()); 
 
    } 
 
    });

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class='col-sm-6'> 
 
     <input type='text' class="form-control" id='datetimepicker4' /> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-12 21:51:38 VincenzoC

當使用datetime-picker選擇日期/時間時觸發事件

回答

相關問題