1.js路由文件下添加页面css文件路径
var ApplylistState = {
name: "CMS.apply.IssueApplyInfo",
url: '/IssueApplyInfo',
views: {
'main@CMS.apply': angularAMD.route({
templateUrl: 'IssueApplyInfo/IssueApplyInfo.html',
controller: 'CMS.IssueApplyInfo.IssueApplyInfoCtrl',
controllerUrl: 'IssueApplyInfo/IssueApplyInfoCtrl',
//设置css文件路径
css: './../../calendar/daterangepicker.css'
})
}
};
2.页面controller文件下增加js文件引用
'./../../calendar/angular',
'./../../calendar/angular-locale_zh-cn',
'./../../calendar/ui-bootstrap-tpls-0.9.0',
3.页面加入div设计
<div style="width:300px;height:100px;border:1px solid red;margin:100px auto;">
<div class="input-group">
<input placeholder="开始时间" type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="listFilter" is-open ="opened" datepicker-options="dateOptions" close-text="关闭" />
<span class="input-group-btn">
<button type="button" class="btn btn-defalut" ng-click="open($event)">开始</button>
</span>
</div><br/>
<div><button class="btn btn-success btn-block" ng-click="print()">打印选择的时间</button></div>
</div>
参考:https://blog.csdn.net/take_dream_as_horse/article/details/53695514
参考发现报错getfullyear-is-not-a-function问题解决:
https://stackoverflow.com/questions/4929382/javascript-getfullyear-is-not-a-function
解决方法,修改
///设置日历默认选中哪天
scope.listFilter= "2016-12-16";
为
///设置日历默认选中当前时间
scope.listFilter= new Date();
修改后页面controller文件下增加:
///设置日历默认选中哪天
scope.listFilter= new Date("2016-12-16");
日历初始化选项
scope.dateOptions = {
formatYear: 'yy',
startingDay: 1,
//可以设置大于今天的日期不可选
maxDate:new Date()
};
///选择按钮
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened = true;
};
设置input日历格式
scope.formats = ['yyyy-MM-dd', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
scope.format = scope.formats[0];
///设置今天按钮
scope.today = function() {
scope.dt = new Date();
};
scope.today();
///设置清除按钮
scope.clear = function() {
scope.dt = null;
};
//打印时间
scope.print=function(){
//初始化选择的时间
var d=new Date(scope.listFilter);
//如果天数小于10号,则在前面加0
var day=d.getDate()
if(day < 10){
day='0'+day;
}
var time=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + day;
console.log(time);
}