js中日历控件的相关实现

js中日历控件的相关实现

1. 页面中显示出日历控件

首先引入日历控件相关的css和js 这里我应该有重复引入了，不过能正常实现就行

<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet">
<!-- 引入jQuery -->
<script src="../resources/js/jquery/jquery-3.4.1.min.js"></script>
<script
	src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

引入后，在html页面加入日历控件的div

<div class="form-group">
			<table class="table">
				<tr>
					<td>
						<div class='input-group date'>
							<input type='text' class="form-control" id='stratTime'/> <span class="input-group-addon">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</td>
					<td>
						<div class='input-group date'>
							<input type='text' class="form-control" id='overTime'/> <span class="input-group-addon">
								<span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</td>
				</tr>
			</table>
		</div>

如果只需要显示到天，则需要在js中做相关设置

$('#stratTime').datetimepicker({
		format : 'YYYY-MM-DD', //日期格式化，只显示日期
		locale : 'zh-CN', //中文化

	});
	$('#overTime').datetimepicker({
		format : 'YYYY-MM-DD', //日期格式化，只显示日期
		locale : 'zh-CN', //中文化

	});

效果如图

ok，到这里已经正常的将控件显示出来，那么下一步是获取
在js中：

membercard.startTime = $('#stratTime').val();
		membercard.overTime = $('#overTime').val();

这样即可获取选择的日期啦。
将日期存入数据库中，可以看到存入的数据是包括到秒的，那么将数据取出来后怎么只显示到天呢？
可以在获取到数据后，在js中设置如下：

//处理从后台获取的日期数据
	function timestampToTime(timestamp) {
		var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		Y = date.getFullYear() + '-';
		M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		D = date.getDate() + ' ';
		h = date.getHours() + ':';
		m = date.getMinutes() + ':';
		s = date.getSeconds();
		return Y + M + D;
	}
	timestampToTime(startTime)

这样，显示出来的就只到天啦，效果如下：