输入文本不适用于引导日期选择器答案

【问题标题】：Input text doesn't work with bootstrap datepicker输入文本不适用于引导日期选择器
【发布时间】：2014-10-14 23:11:02
【问题描述】：

我正在使用 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');
    }

});

现在，让我解释一下：

当我看到（或充值，无论如何）该页面时，输入显示为空白，并且当我单击输入时仅显示日期。我希望显示日期“2014 年 10 月 14 日”，而无需单击输入。

我还不能上传图片来更好地解释：P

谢谢！！！

【问题讨论】：

标签： javascript jquery angularjs datepicker bootstrap-datepicker

【解决方案1】：

我不打算直接回答你的问题，但是，最近我有机会使用 bootstrap 的 datepicker，它存在很多问题，尤其是在尝试将其与一些 Angular 逻辑集成时。

然后，我发现 - angular-bootstrap：“AngularUI 团队用纯 AngularJS 编写的引导组件”，它大大简化了 Datepicker 的工作！检查提供的链接中的Datepicker 部分。源代码直接在示例下方提供。

希望您会发现使用它更直观，并适合您的 Angular 应用程序的其余部分。

【讨论】：

嗯嗯听起来很有趣...让我检查一下
真的很高兴它对你也有帮助:)

【解决方案2】：

我的正确理解是您想将默认日期设置为今天的日期

为此，您必须像这样明确地将日期设置为今天的日期

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

【讨论】：

我正在设置默认日期，它运行良好，它出现在页面中，但它只是在我单击输入时出现。所以，这不是解决方案：/
添加这个---- $('#employee_contract_start').val(currentDate)
删除“show”上的事件处理程序，看看是否有帮助
我删除了这个事件，我也不工作了哈哈：/，我如何分享我的代码？
你可以在jsfiddle上分享

【解决方案3】：

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

【讨论】：

...但是，为什么我点击输入文本时会出现日期？

【解决方案4】：

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

与 ngModel 完全同步，因此无需销毁或手动更新 dateTimePicker。
高级范围选择器；将尽可能多的 dateTimePicker 关联在一起，并且无需销毁或手动更新每个 dateTimePicker。
禁用模式；您可以轻松禁用一周或一个月中的任何一天，例如所有周末。
在不断变化的日子过渡。（诅咒你可以在选项中禁用它）
获取完整的日期详细信息，例如 UNIX 格式的日期、日期格式和年、月、日、小时和分钟，以及...通过完整数据属性。
...

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

【讨论】：