主要使用的是layui组件库中的laydate组件。附:
layui.laydate https://www.layui.com/laydate/
HTML部分
<div class="card-calendar">
<!-- 日历选择器 -->
<input type="text" class="inputBox " readonly="" value="" id="datetimepicker" data-date-format="yyyy-mm-dd">
<p class="minus">—</p>
<input type="text" class="inputBox " readonly="" value="" id="datetimepicker2" data-date-format="yyyy-mm-dd">
<!-- 日历选择器 -->
</div>
依赖资源
<script src="js/jquery-1.9.1.min.js"></script>
<script src="laydate/laydate.js"></script>
JS部分
<!-- 日历插件 -->
<script>
// var value = new Date(),
var nowValue = formatTime();
console.log("value" + nowValue);
var startDate = laydate.render({
elem: '#datetimepicker',
format: 'yyyy年MM月dd日',
value: nowValue,
isInitValue: true,
theme: '#108ee9',
trigger: 'click',
done: function (value, date) {
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
if (value != "") {
date.month = date.month - 1;
endDate.config.min = date;
} else {
endDate.config.min = startDate.config.min;
}
},
});
var endDate = laydate.render({
elem: '#datetimepicker2',
format: 'yyyy年MM月dd日',
isInitValue: true,
trigger: 'click',
value: nowValue,
theme: '#108ee9',
done: function (value, date) {
if (value != "") {
date.month = date.month - 1;
startDate.config.max = date;
} else {
startDate.config.max = endDate.config.max;
}
}
});
</script>
elem: input元素
format: 格式
trigger: 仅仅可以点击,不可手动输入
value:默认值
theme: 主题色
相对来说,完成的内容是区间的选择,所以在选择完成之后执行done方法,然后通过max和min的变量的赋值来控制区间的显示。
日期格式化使用
<!-- 日期格式化 -->
<script>
function formatTime() {
var newdate = new Date();
var nowyear = newdate.getFullYear();
var nowmonth = newdate.getMonth() + 1;
if (nowmonth >= 1 && nowmonth <= 9) {
nowmonth = "0" + nowmonth;
}
var nowDate = newdate.getDate();
var formattime = nowyear + "年" + nowmonth + "月" + nowDate + "日";
return formattime;
}
</script>
在设置默认值的时候需要进行格式转换才能有效赋值,否则input中设置的默认值会为空。