輸入文本不適用於引導日期選擇器

Question

我正在使用angular.js和bootstrap datepicker獲取日期。

這是我的HTML代碼：

<div class="form-group col-sm-6 col-md-6 col-lg-6">
   <label for="employee_contract_start" class="req">Inicio de Contrato</label>
   <input type="text" data-parsley-trigger="change" class="form-control data_input" id="employee_contract_start" ng-model="employee.contract_start" value="" required>
</div>

...和JS

$("#employee_contract_start").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true

}).on('show', function(){

    if($(this).val() == '')  {
       $(this).val('14/10/2014').datepicker('update');
    }

});

現在，讓我解釋一下：

當我看到頁面（或為頁面充值）時，輸入將顯示為空白，而日期則僅在單擊輸入時顯示。 我希望日期“ 14/10/2014”出現，而無需單擊輸入。

我尚無法上傳圖片以更好地解釋：P

謝謝！！！

Answer 1

我正確理解的是您要將默認日期設置為今天的日期

為此，您必須像這樣明確地將日期設置為今天的日期

$("#employee_contract_start").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true

}).on('show', function(){

    if($(this).val() == '')  {
       $(this).val('14/10/2014').datepicker('update');
    }

});

// Now once you have initilized datepicker, you can set the initial date like this---

var currentDate = new Date(); // Here get today's date
$("#employee_contract_start").datepicker("setDate", currentDate); // set default date to be todays date
$('#employee_contract_start').val(currentDate)

Answer 2

我不會直接回答您的問題，但是，最近我有機會使用bootstrap的datepicker ，並且存在很多問題，尤其是在嘗試將其與某些Angular邏輯集成時。

然后，我發現-angular -bootstrap ： “由AngularUI團隊使用純AngularJS編寫的Bootstrap組件” ，它大大簡化了使用Datepicker的工作！ 在提供的鏈接中檢查“ Datepicker部分。 源代碼直接在示例下方提供。

希望您會發現使用它更加直觀，並且可以與Angular應用程序的其余部分配合使用。

Answer 3

如果您希望在加載頁面時顯示當前日期，則需要在加載日期選擇器之后手動初始化日期選擇器。

Answer 4

好吧，我代表ADMdtp模塊。 它是純粹的AngularJs dateTimePicker，具有許多出色的選擇：

• 與ngModel完全同步，因此無需銷毀或手動更新dateTimePicker。
• 提前范圍選擇器； 盡可能多地將dateTimePicker關聯在一起，並且無需銷毀或手動更新每個dateTimePicker。
• 令人震驚的模式 因此，您可以輕松禁用一周或一個月中的任何一天，例如所有周末。
• 在變化的日子過渡。 （當然，您可以在選項中禁用它）
• 通過full-data屬性分別獲取完整的日期詳細信息，例如UNIX格式的日期，日期格式以及年，月，日，小時和分鍾，以及...。
• ...

<adm-dtp ng-model="date" full-data="date_full"></adm-dtp>