$('#datepicker').datetimepicker({
//在输入框显示的格式
format: 'yyyy-mm-dd',
autoclose: true,
//弹出选择器时默认选择的日期,不是文本框的值
initialDate:new Date(new Date()-24*60*60*1000),
//endDate后的日期都是灰色,不可选
endDate: new Date(new Date()-24*60*60*1000),
minView: 2,//表示最小单位是日,其他值有1,2,3,4
//minuteStep:1,//选择分钟时显示的时间间隔,此处设置为1分钟
language: 'zh-CN'
}).on('changeDate', function (e) {
//日期变动监听
//主动通知bootstrapValidator才可触发验证
$('#formSearch').bootstrapValidator('revalidateField', 'date');
});
<input readonly type="text" class="form-control" id="datepicker" name="date" format="yyyy-mm-dd "/>
daterangepicker
准备工作
<link href="${ctx}/styles/bootstrap/css/daterangepicker.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/js/bootstrap/moment.js"></script>
<script type="text/javascript" src="${ctx}/js/bootstrap/daterangepicker.js"></script>
js代码
//初始化
var oDatepicker = DatepickerInit();
oDatepicker.init();
//定义类
function DatepickerInit(){
var oDatepickerInit = new Object();
var dateYest=new Date(new Date()-24*60*60*1000);
oDatepickerInit.init=function(){
$('#datetimepicker').daterangepicker({
'autoUpdateInput':true,
'showWeekNumbers': true,
//开始时间
'startDate': dateYest,
//结束时间
'endDate': dateYest,
//"autoApply": true,
"ranges": {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'过去七天': [moment().subtract(6, 'days'), moment()],
'过去三十天': [moment().subtract(29, 'days'), moment()],
'本周': [moment().startOf('week'), moment().endOf('week')],
'本月': [moment().startOf('month'), moment().endOf('month')],
//'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'YYYY-MM-DD',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '起始时间',
separator : ' 至 ',
toLabel: '结束时间',
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
},
}, function(start, end, label) {
//监听日期选择器的选择事件,对于初始化startDate、endDate无效
//start,end是moment类型
oDatepicker.startDate = start.format('YYYY-MM-DD');
oDatepicker.endDate= end.format('YYYY-MM-DD');
});
}
//需要手动赋值
oDatepickerInit.startDate = dateYest.format('yyyy-MM-dd');
oDatepickerInit.endDate= dateYest.format('yyyy-MM-dd');
return oDatepickerInit;
}
html:
<input type="text" class="form-control" id="datetimepicker" format="yyyy-mm-dd ">