日期操作

来源：互联网发布：运动带来的好处知乎编辑：程序博客网时间：2024/05/04 11:34

本章内容：

1：介绍日期的获取
2：日期插件的使用
本插件基于iBbootstrap组合使用
iBbootstrap地址：http://v3.bootcss.com/getting-started/#download
日期插件地址：http://www.bootcss.com/p/bootstrap-datetimepicker/
想了解更多日期插件的使用请前往日期地址查看帮助文档。

1：获取日期

var date = new Date();$("#dateDiv1").text("获取年：" + date.getFullYear());$("#dateDiv2").text("获取月：" + (date.getMonth() + 1));$("#dateDiv3").text("获取日：" + date.getDate());$("#dateDiv4").text("获取时：" + date.getHours());$("#dateDiv5").text("获取分：" + date.getMinutes());$("#dateDiv6").text("获取秒：" + date.getSeconds());$("#dateDiv7").text("获取星期：" + date.getDay());$("#dateDiv8").text("获取日期(年/月/日)：" + date.toLocaleDateString());$("#dateDiv9").text("获取日期(下午 时：分：秒)：" + date.toLocaleTimeString());$("#dateDiv10").text("获取日期(年/月/日 下午 时：分：秒)：" + date.toLocaleString());$("#dateDiv11").text("日期格式化：" +  date.getFullYear() + "-" + (date.getMonth() + 1)+ "-" + date.getDate() + " " +  date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());$("#dateDiv12").text("获取时间戳：" +  Date.parse(date)/1000);

2：日期插件

第一步：下载插件所需的JS/CSS

第二步：需要加载的头文件

<%String path = request.getContextPath();%><link href="<%=path%>/bootstrap/css/bootstrap.min.css"rel="stylesheet" type="text/css" /><linkhref="<%=path%>/bootstrap-Date/bootstrap-datetimepicker.css"rel="stylesheet" type="text/css" /><script type="text/javascript"src="<%=path%>/jquery/jquery-3.1.0.min.js"></script><script type="text/javascript"src="<%=path%>/bootstrap/js/bootstrap.min.js"></script><script type="text/javascript"src="<%=path%>/bootstrap-Date/bootstrap-datetimepicker.js"></script><script type="text/javascript"src="<%=path%>/bootstrap-Date/bootstrap-datetimepicker.fr.js"></script><script type="text/javascript"src="<%=path%>/bootstrap-Date/bootstrap-datetimepicker.zh-CN.js"></script>

第三步：HTML代码

<!-- readonly代表为禁用 --><input id="dateID" class="form-control" readonly>

第四步：初始化日期插件

$("#dateID").datetimepicker({format : 'yyyy-MM-dd', // 展现格式startDate : "2010-01-01",// 开始时间endDate : "2020-01-01", // 结束时间autoclose : true, // 选择日期后关闭// 日期时间选择器打开之后首先显示的视图// 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年startView : 2,// 日期时间选择器所能够提供的最精确的时间选择视图// 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年minView : 2,language : 'zh-CN', //显示语言为中文});

在以上初始化过程中,最大只能精确到天,首先打开的视图为选择天.

第五步：如果页面加载资源没错,以下是展现样式

注意：你会发现月份为中文了,需要修改bootstrap-datetimepicker.zh-CN.js文件

/** * Simplified Chinese translation for bootstrap-datetimepicker * Yuan Cheung <advanimal@gmail.com> */;(function($){$.fn.datetimepicker.dates['zh-CN'] = {days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],//months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],//monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],months: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],//选择后monthsShort: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],//显示月份today: "今天",suffix: [],meridiem: ["上午", "下午"]};}(jQuery));

0 0