简单描述一下本篇内容,Bootstrap 的时间控件,有四个小案例,分别为年月日时分
,年月日
,每月的第一天
,每月的最后一天
,首先来看效果图,有需要的再接着往下看,没有的话就不浪费大家时间。ps:我真是个善解人意的小可耐,不许反驳,我不听我不听
-
年月日时分⬇
-
年月日⬇
-
每月的第一天⬇
-
每月的最后一天⬇
代码来喽!!!
首先引入bootstrap
和datetimepicker
的 css
和js
,是无比重要的一步呦,js和css下载链接https://download.csdn.net/download/qq_43143143/13211482
<link rel="stylesheet" href="${ctx}/resource-Main/main/css/bootstrap.css">
<link rel="stylesheet" href="${ctx}/resource-Main/main/css/bootstrap-datetimepicker.min.css">
<script src="${ctx}/resource-Main/main/js/jquery-1.11.1.min.js"></script>
<script src="${ctx}/resource-Main/main/js/bootstrap.min.js"></script>
日期的js
<script src="${ctx}/resource-Main/main/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
日期js,展示样式为中文
<script src="${ctx}/resource-Main/main/js/bootstrap-datetimepicker.zh-CN.js"></script>
年月日时分,
下面是对日期-时间控件的引用:
<div class="group">
<label class="col-sm-1 control-label" for="time">年月日时分:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepicker0"
id="time"
name="time" style="width: 100%;"/>
</div>
</div>
<script>
//年月日时分
$('.datepicker0')
.datetimepicker({
language: 'zh-CN',//中文
autoclose: true,//选择后自动关闭当前时间控件
minView: 0,
forceParse: 0,
todayHighlight: true,
startView: 2,
weekStart: 0,
todayBtn: 1,
format: "yyyy-mm-dd hh:ii"
});
</script>
年月日
<div class="group">
<label for="day"
class="col-sm-1 control-label">年月日:</label>
<div class="col-sm-2">
<input type="text" class="form-control datepicker1"
id="day"
name="day" style="width: 83%;"/>
</div>
</div>
<script>
//年月日
$('.datepicker1')
.datetimepicker({
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
forceParse: false,
language: 'zh-CN',
format: "yyyy-mm-dd"
});
</script>
每个月的第一天
<div class="group">
<label class="col-sm-2 control-label">年月(每月的第一天):</label>
<div class="col-sm-2">
<input type="text" class="form-control datepicker"
id="startDate"
name="startDate" style="width: 83%;"/>
</div>
</div>
<script>
//年月
$('.datepicker').datetimepicker({
language: 'zh-CN',
weekStart: 1,
autoclose: true,
startView: 3,
minView: 3,
forceParse: false,
format: "yyyy-mm-dd"
});
</script>
每个月的最后一天
<div class="group">
<label class="col-sm-2 control-label">年月(每月的最后一天):</label>
<div class="col-sm-2">
<input type="text" class="form-control datepicker"
id="endDate"
name="endDate" style="width: 80%;" onchange="showLastDate();"/>
</div>
</div>
<script>
//年月
$('.datepicker').datetimepicker({
language: 'zh-CN',
weekStart: 1,
autoclose: true,
startView: 3,
minView: 3,
forceParse: false,
format: "yyyy-mm-dd"
});
function showLastDate() {
var endDate = $('#endDate').val();
var strs = endDate.split("-");
var lastDay = getLastDay(strs[0], strs[1]);
console.log(lastDay);
$('#endDate').val(strs[0] + "-" + strs[1] + "-" + lastDay);
}
function getLastDay(year, month) {
var new_year = year; //取当前的年份
var new_month = month++;//取下一个月的第一天,方便计算(最后一天不固定)
if (month > 12) {
new_month -= 12; //月份减
new_year++; //年份增
}
var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
}
</script>
datetimepicker里面的属性,大家想要知道什么意思的话,可以查看这个博主的文章,写的很详细
https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC%E5%BC%8F
到这里就结束啦,觉得不错的点个赞,希望更多的人可以看到!笔芯