uib日期选择器弹出窗口不显示日历
uib-datepicker-popup not showing the calendar
我正在使用Express和AngularJS。我尝试添加一个带有ui引导模块的日期选择器。当我添加uib日期选择器时,它工作得很好。但当我尝试添加uib日期选择器弹出窗口时,结果就像一样
uib日期选择器弹出
当我点击日历按钮时,它会显示一个弹出窗口,但只有今天、清除和关闭按钮。它不显示日历。
这是我的html
<div ng-controller="DatepickerPopupDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div class="col-md-6">
<p class="input-group">
<input type="text" uib-datepicker-popup class="form-control" ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
和控制器
app.controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin();
$scope.open2 = function() {
$scope.popup2.opened = !$scope.popup2.opened;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.format = 'yyyy-MM-dd';
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup2 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
});
这是我取代码的文档:https://angular-ui.github.io/bootstrap/
提前谢谢。
您应该使用带有angularjs的玉石。如果你想添加日期选择器弹出窗口,你可以使用下面的代码用于html
<input type="text" uib-datepicker-popup="" name="dob" placeholder="Please enter date in YYYY-mm-dd format"
ng-model="dob" is-open="popup2.opened" datepicker-options="dateOptions"
ng-required="true" close-text="Close" class="form-control"/>
<span class="input-group-btn">
<button type="button" ng-click="open2()" class="btn btn-default">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
并将其添加到控制器中
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(1970, 1, 1),
startingDay: 1
};
$scope.open = function() {
$scope.popup.opened = true;
};
$scope.popup = {
opened: false
};
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
这个在你的css文件中
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
在我的项目中,我没有使用npm(或bower)。因此,当我们使用uib日期选择器弹出时,我不得不手动将以下文件(从这里下载)放置在路径中,以使日历弹出日期。
WebPages
L___uib
L___template
L____datepicker
L____datepicker.html
L____day.html
L____month.html
L____year.html
L____datepickerPopup
L____poup.html
相关文章:
- 如何在完整日历中的当天点击时显示活动详细信息
- 日历显示不正确
- php:两个日历没有显示
- Jqueryui日期选择器不显示日历
- AngularJS uib日期选择器没有'在uib选项卡中,不要在第一次打开/关闭事件之后显示日历
- Struts:突出显示日历中的日期范围(JQuery/Javascript)
- 使用周号跳转到/显示日历中的特定周
- 我希望在按下日期文本字段时显示日历,并且用户应该能够从该日历中选择日期
- 显示日历中的有限天数
- 使用JavaScript函数显示日历
- 使用javascript语言在html文件中显示日历上的小时和分钟
- 从数据库中按日期显示日历上的事件
- Html5输入元素"日期"-如何显示日历元素
- 我如何得到完整的日历显示日历在初始渲染
- 无法显示日历
- 在可移动的弹出窗口中显示日历
- 如何在html中点击文本框显示日历
- 如何在jQuery mobile中显示日历插件而不重新加载
- uib日期选择器弹出窗口不显示日历
- jQuery中的DatePicker不显示日历