Angular UI datepicker 覆盖占位符文本答案

【问题标题】：Angular UI datepicker overrides placeholder textAngular UI datepicker 覆盖占位符文本
【发布时间】：2016-02-09 16:38:28
【问题描述】：

我想在我的日期选择器的输入字段上有自定义占位符文本。目前我的占位符文本被“MM/DD/YYYY”覆盖

这是我的html：

&lt;input type="text" id=" coverpagedatefrom" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date" data-ng-model="publishCtrl.clipbookSvc.clipbookModel.coverPageDateFrom" data-uib-datepicker-popup="MM/dd/yyyy" data-ng-focus="publishCtrl.open($event, 'date1')" data-is-open="publishCtrl.datepickers.date1" data-datepicker-options="publishCtrl.dateOptions" placeholder="Enter Date"&gt;

这是输出到 dom 的内容：

&lt;input type="text" id=" coverpagedatefrom" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date" data-ng-model="publishCtrl.clipbookSvc.clipbookModel.coverPageDateFrom" data-uib-datepicker-popup="MM/dd/yyyy" data-ng-focus="publishCtrl.open($event, 'date1')" data-is-open="publishCtrl.datepickers.date1" data-datepicker-options="publishCtrl.dateOptions" placeholder="MM/DD/YYYY"&gt;

如何防止 Angular UI 日期选择器更改占位符文本？

【问题讨论】：

标签： angularjs datepicker angular-ui-bootstrap

【解决方案1】：

我也有同样的问题……

我试过了：

<input type="{{rbDtValue ? 'date' : 'text'}}" 
                id="{{id}}" 
                class="{{clazz}}" 
                onfocus="this.type='date';" 
                onblur="javascript: if( !this.value ) this.type='text';"
                placeholder="{{placeholder | i18n}}"

                uib-datepicker-popup="dd/MM/yyyy"
                ng-model="rbDtValue"/>

当 rbDtValue 不为 null 时，输入的类型发生了变化，但是当我在弹出窗口中选择一个值时，输入上没有设置该值，它只显示掩码。

如果我不更改输入类型，则值设置正常。

更新

解决方案01：使用元素事件

我找到了一个解决方案，基于这个例子：http://jsfiddle.net/U2Ft5/4/

首先创建以下 css 类：

.rb-date-picker {
    width: 150px!important;
    display: inline-block;
}

.rb-date-picker.placeholder::before{
    width:100%;
    color: #888888;
    content:attr(placeholder);
}

然后，我创建了这个元素：

<input type="date" 
                id="{{id}}" 
                class="input-large text-field-gra rb-date-picker " 
                ng-class="{ 'placeholder': !rbDtValue}"
                onfocus="javascript: $( this ).removeClass('placeholder');" 
                onblur="javascript: if( !this.value ) $( this ).addClass('placeholder');"
                placeholder="{{placeholder | i18n}}"
                uib-datepicker-popup="dd/MM/yyyy"

                ng-model="rbDtValue"/>

行为是：

1).rb-date-picker.placeholder::before{...}：模拟占位符。使用“宽度：100%”很重要

2) ng-class="{ 'placeholder': !rbDtValue}"：当值为空时应用占位符类

3) onfocus：移除占位符类

4）onblur：把占位符类case的值为null

解决方案02：使用css

除了为第一个解决方案创建的类之外，我还创建了以下类：

.rb-date-picker.placeholder:focus::before{
    width:0%;
    content:"";
}

并去掉javascript事件，元素是这样的：

<input type="date" 
                id="{{id}}" 
                class="input-large text-field-gra rb-date-picker " 
                ng-class="{ 'placeholder': !rbDtValue}"
                placeholder="{{placeholder | i18n}}"
                uib-datepicker-popup="dd/MM/yyyy"

                ng-model="rbDtValue"/>

它比第一个更简单，但在谷歌浏览器上都为我工作。

【讨论】：

谢谢，非常有用的回答；）

【解决方案2】：

在 angular-bootstap#0.14.3 上，它似乎只需设置 placeholder="{{::vm.placeholder}}" 即可工作

【讨论】：

【解决方案3】：

最简单的解决方法是只使用一个 ng-change 函数来初始化 ng-model。就是这样。

<input class="date-icon form-control" type="text" name="eed" id="" placeholder="MM/DD/YYYY" ng-click="vm.openTo($event)" class="date-icon date-input" datepicker-popup="MM/dd/yyyy" ng-model="vm.program.end_date" is-open="vm.isToOpened" max="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" required ng-change="bindDateTo()" max="vm.maxStartDate"/>

【讨论】：