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

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

Answer 4

好吧，我代表ADMdtp模块。它是纯粹的AngularJs dateTimePicker，有很多greate选项：

与ngModel完全同步，因此无需销毁或手动更新dateTimePicker。
高程范围选择器;根据需要制作尽可能多的dateTimePicker，再次无需销毁或手动更新每个dateTimePicker。
禁用模式;很容易就可以在周或月中禁用任何一天，就像所有周末一样。
在变化的日子过渡。（诅咒你可以在选项中禁用它）
获取完整日期详细信息，例如UNIX格式的日期，日期格式和年，月，日，小时和分钟，以及...全数据属性。
...

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

输入文本不适用于bootstrap datepicker

4 个答案: