Input text doesn't work with bootstrap datepicker

Question

I am using angular.js and bootstrap datepicker to obtain dates.

This is my code in 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>

... and 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');
    }

});

Now, let's me explain:

When I see (or recharge, whatever) the page, the input appears in blank and the date just appears when I click the input. I would like that the date "14/10/2014" appears without I have to click the input.

I can't upload images yet to explain better :P

Thanks!!!

Answer 1

What I understand correctly is that you want to set default date as todays date

To do that, you will have to set the date to todays date explicitly like this

$("#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

I am not going to answer your question directly, however, recently I had a chance to work with bootstrap's datepicker , and there were lots of issues with it, especially when trying to integrate it with some Angular logic.

Then, I discovered - angular-bootstrap : "Bootstrap components written in pure AngularJS by the AngularUI Team" , and it simplified working with Datepicker a lot! Check the Datepicker section in the provided link. The source code is provided directly below examples.

Hope you will find using it more intuitive and fitting with the rest of your Angular app.

Answer 3

如果您希望在加载页面时显示当前日期，则需要在加载日期选择器之后手动初始化日期选择器。

Answer 4

Well, i represent ADMdtp module. It's pure AngularJs dateTimePicker with lots of greate options:

• completely synced with ngModel, so no need to destroy or manulay update dateTimePicker.
• advance range picker; make as many dateTimePicker as you want related together, and again no need to destroy or manualy update each dateTimePicker.
• disabing pattern; so easily you can disable any day(s) in week or month, like all weekends.
• transition on changing days. (of curse you can disable it in options)
• get full date details like date in UNIX format, Date format and year, month, day, hour and minute separately and ... by full-data attribute.
• ...

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