Angular的daterangepicker日历插件常用配置

1、首先需要引用的文件



2、紧接着再定义HTML和初始化js就可以展示日历了



3、再为“开始”按钮绑定事件日历就可以展示了

///设置日历默认选中哪天
$scope.listFilter="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];

效果出来了（注：今天的按钮是选中状态）



4、再为“今天”和“清除”按钮定义事件

///设置今天按钮
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();

///设置清除按钮
$scope.clear = function() {
$scope.dt = null;
};
5、如果仅仅这样，选中后打印的时间是这种格式的



不用担心，再转换一下日期格式就可以了！

//打印时间
$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);
}
再打印：