AngularJS UI启动日期选择器工作不正常
AngularJS UI Bootstrap DatePicker Not Functioning Correctly
我有一个指令定义如下:
模板
<div class="date-picker">
<div class="row">
<div class="col-md-6">
<label for="{{datePickerId}}">{{labelText}}</label>
<p class="input-group">
<input type="text"
id="{{datePickerId}}"
class="form-control"
datepicker-popup="{{format}}"
ng-model="dt"
is-open="opened"
datepicker-options="dateOptions"
disabled="disabled"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
指令
//TypeScript
module MyApp.Directives {
/** Scope for Messaging directive. */
export interface IMaDatePickerScope extends ng.IScope {
dt: Date;
today(): void;
clear(): void;
disabled(date, mode): boolean;
open($event): void;
opened: boolean;
dateOptions;
formats: string[];
format: string;
}
export class MaDatePicker implements ng.IDirective {
restrict = "E";
templateUrl = TEMPLATES + 'ma-date-picker.html';
replace = true;
transclude = true;
scope = {
labelText: '@',
datePickerId: '='
}
link = (scope: IMaDatePickerScope) => {
scope.today = () => {
scope.dt = new Date();
}
scope.today();
scope.clear = () => {
scope.dt = null;
}
scope.disabled = (date: Date, mode) => {
return (mode == 'day' && (date.getDay() === 0 || date.getDay() === 6)); //disable Saturday and Sunday
}
scope.open = ($event) => {
$event.preventDefault();
$event.stopPropagation();
scope.opened = true;
}
scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
}
scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
scope.format = scope.formats[0];
}
controller = ($scope: IMaDatePickerScope) => {
}
}
}
它取自这里的DatePicker部分,应该与该页面上显示的弹出版本类似。然而,每当我单击日历按钮启动指令时,日历都会以一种损坏的方式出现。此外,当我点击弹出日历中的"下个月"箭头时,日历会一直向左扩展。我的代码有问题吗?我没有添加任何样式,因为根据网站,似乎没有任何样式,但在拆开我现有的样式之前,我想检查一下代码是否有任何明显的错误。
如果没有看到你可能包含的CSS文件,我无法确切地说出罪魁祸首是什么,尽管如果你除了使用Angular UI Bootstrap之外,还使用Twitter Bootstrap和其他一些CSS库,你很可能会从一个或多个其他CSS文件中产生样式冲突。我发现隔离这些问题的最简单方法是使用Chrome浏览器开发工具检查CSS覆盖及其来源,查看冲突的确切位置,然后更新我的自定义CSS来修复它们。我不建议为了可维护性而修改像Twitter Bootstrap这样的OTB CSS库。始终使用您自己的自定义CSS文件。我确实对日期选择器有类似的问题,花了一点时间才找到它们在哪里。如果你的情况确实如此,那么使用多个CSS库是一种危险。祝你狩猎愉快!
相关文章:
- Javascript.getHours()工作不正常
- removeClass函数没有'工作不正常
- jQuery Ajax GET请求工作不正常
- Cordova ng路线工作不正常
- 更新属性工作不正常Meteor/MongoDB
- 为什么文本对齐:对;工作不正常
- Javascript作用域和Ajax调用;工作不正常
- JavaScript DOM insertBefore'工作不正常
- Angular Js布线工作不正常
- onmouseout函数工作不正常
- 承诺工作不正常
- JQuery.live()工作不正常
- Alloy UI文本区域工作不正常
- ng src工作不正常,但src工作正常
- Canvas.toDataUrl(“image/png”)工作不正常
- JQuery `length`属性工作不正常.为什么?
- Javascript setInterval工作不正常
- 我的Javascript代码没有'工作不正常
- 表单验证工作不正常,在不检查条目的情况下继续
- $localStorage array select with ng选项工作不正常