JGUI源码：实现日期控件显示(17)
本文实现一个日期控件显示，日期控件看起来很复杂，其实原理很简单，大部分情况下我们直接使用别人做得好的日期控件就行，但有时候特殊需求，比如显示提醒之类的，恐怕第三方控件就不好实现了，
为了使程序逻辑看起来简单，切换日期，选择日期等事件处理部分未实现，读者可以自己尝试实现。
1、日期控件分为三个区域：顶部的显示当前日期和选择按钮区域；中间的本月日期显示列表，固定7*6=42个单元格；
底部确定、取消、当前日期选择功能。
2、思路主要是：计算出应该显示的单元格内容，然后替换tbody区域即可。
代码如下
<style>
.jgui-datetimepicker
{
padding: 10px;
}
.jgui-datetimepicker .btn
{
padding: 5px;
}
.jgui-datetimepicker td
{
text-align:center;
}
.jgui-datetimepicker a
{
padding: 5px;
}
.jgui-datetimepicker .curyearmonth
{
margin:0px auto;
}
</style>
<body>
<div>这是日期界面显示代码，事件函数将后续完善</div>
<script type="text/javascript">
//获取指定日期当月的显示数组
function getMonthArray(date)
{
var arrDay = new Array(0)
var htmlval="";
var firstDayWeek=getWeekDay(getMonthBeginDate(date));
var predays=firstDayWeek;
for(var i=predays-1;i>0;i--)
{
var curdate= getDateMinus(date,-i);
arrDay.push(curdate.getDate())
}
arrDay.push(date.getDate());
for(var i=1;i<=8-predays;i++)
{
var curdate= getDateMinus(date,i);
arrDay.push(curdate.getDate())
}
for(var i=8-predays+1;i<=42-predays;i++)
{
var curdate= getDateMinus(date,i);
arrDay.push(curdate.getDate());
}
return arrDay;
}
//增加减少指定天数
function getDateMinus(date,days)
{
var oneDay=1000*60*60*24;
return new Date(date.getTime()+days*oneDay);
}
//获取指定时间的年代
function getYear(date){
return date.getFullYear();
}
//获取指定时间的月份
function getMonth(date){
return date.getMonth();
}
//获取指定时间的月初日期
function getMonthBeginDate(date){
date.setDate(1);
return date;
}
//获取指定时间的月末日期
function getMonthEndDate(date){
var month=date.getMonth();
var nextMonth=++month;
var nextMonthFirstDay=new Date(endDate.getFullYear(),nextMonth,1).getTime();
var oneDay=1000*60*60*24;
return new Date(nextMonthFirstDay-oneDay);
}
//获取指定时间的星期数
function getWeekDay(date)
{
var a = new Array(0,1,2,3,4,5,6);
var week = new Date().getDay();
return a[week];
}
//获取指定时间的月初星期
function getMonthBeginWeekDay(date){
date.setDate(1);
return startdate;
}
//获取指定时间的月末星期
function getMonthEndWeekDay(date){
return date.getFullYear();
}
$(function() {
var htmlval="";
var index=0;
var monthArray= getMonthArray(new Date());
for(var line=0;line<6;line++)
{
var lineval="";
for(var col=0;col<7;col++)
{
lineval=lineval+"<td>"+monthArray[index]+"</td>"
index++;
}
htmlval=htmlval+"<tr>"+lineval+"</tr>";
}
$('.jgui-datetimepicker .value').html(new Date().Format("yyyy/MM/dd"));
$('.jgui-datetimepicker .day').html(htmlval);
});
/**
* 日期转字符串
* @param fmt
* @returns
*/
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o){
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
</script>
<div class="jgui-datetimepicker" style="position:relative;width:320px;height:220px;border: cadetblue 1px solid">
<a class="btn preyear">上一年</a>
<a class="btn preday">上一天</a>
<a class="btn value">2019/3/15</a>
<a class="btn nextday">下一天</a>
<a class="btn nextyear">下一年</a>
<hr style="margin:10px 0px"/>
<table style="width:100%">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody class="day"> </tbody>
</table>
<hr style="margin:10px 0px"/>
<div style="position:absolute;bottom: 10px;right: 10px;">
<a>确定</a>
<a>取消</a>
<a>现在</a>
</div>
</div>
</body>
读者自己加上事件，当前日期变色，选中变色即可在生产环境中使用。演示地址
www.jgui.com
JGUI源码：实现日期控件显示(17)的更多相关文章
- Appium Android Bootstrap源码分析之控件AndroidElement
通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...
- Robotium源码解读-native控件/webview元素的获取和操作
目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...
- Duilib源码分析(二)控件构造器—CDialogBuilder
上一节了解了大体流程,但是界面控件元素是如何被加载.解析.构建.管理.控件消息如何处理的呢?接下来我们将结合控件构造器进行分析: CDialogBuilder:控件构造器,主要用以解析xml配置文件并 ...
- JGUI源码：实现蒙版层显示(18)
有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div,设置absolute.宽高100%.设置z-index置于顶层,设置半透明效果,fadein,fadeou ...
- JGUI源码：从头开始，建一个自己的UI框架（1）
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- 关于JSON日期格式显示及My97日期控件
1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...
- 手机日期控件mobiscroll
query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件可以让用户很方 ...
- 仿酷狗音乐播放器开发日志二十三 修复Option控件显示状态不全的bug（附源码）
转载请说明原出处,谢谢~~ 整个仿酷狗工程的开发将近尾声,现在还差选项设置窗体的部分,显然在设置窗体里用的最多的就是OptionUI控件,我在写好大致的布局后去测试效果,发现Option控件的显示效果 ...
- js 日期控件 可以显示为和历
日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...
随机推荐
- ORA-12520 TroubleShooting
同事反馈他连接一个新搭建的测试数据库时,报"ORA-12520: TNS: 监听程序无法为请求的服务器类型找到可用的处理程序"错误,在解决他这个问题时,顺便分析.总结一下ORA ...
- shell脚本-正则、grep、sed、awk
----------------------------------------正则---------------------------------------- 基础正则 ^word ##搜索以w ...
- 「Python」为什么Python里面，整除的结果会是小数？
2018-06-08 参考资料:Python学习笔记(4)负数除法和取模运算 先来看三个式子(!这是在Python3.0下的运算结果): 输出结果: ‘//’明明是整除,为什么结果不是整数,而会出现小 ...
- java网络爬虫基础学习（三）
尝试直接请求URL获取资源 豆瓣电影 https://movie.douban.com/explore#!type=movie&tag=%E7%83%AD%E9%97%A8&sort= ...
- Redis进阶之使用Lua脚本开发
1.在Redis中使用Lua 在Redis中执行Lua脚本有两种方法:eval和evalsha. (1)eval eval 脚本内容 key个数 key列表 参数列表 下面例子使用了key列表和参数列 ...
- PyCharm选中文件夹新建时Directory与Python package的区别
pycharm创建普通的directory和package时都是在硬盘上建立一个文件夹.但是建package时会在这个文件夹中自动地生成一个空的__init__.py文件.python的一个包是一个带 ...
- [转] package-lock.json
其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致. 引用知乎@周载南的回答 根据官方文档,这个package-lo ...
- Java基础--接口和抽象类的区别
任何不谈使用方法的空理论都是耍流氓 使用场景 · 如果你拥有一些方法并且想让它们中的一些有默认实现,那么使用抽象类吧(Java1.8中接口也可以这么做了) · 如果你想实现多重继承,那么你必须使用接口 ...
- 一次单体测试的采坑--MatcherAssert.assertThat---org.hamcrest 和org.mockito
单体测试测试环境ci上报这个错, 本地没问题. org.hamcrest.Matcher.describeMismatch(Ljava/lang/Object;Lorg/hamcrest/Descri ...
- python 三元运算符、推导式、递归、匿名函数、内置函数
三目运算符 # 三目(元)运算符:就是 if...else...语法糖 # 前提:简化if...else...结构,且两个分支有且只有一条语句 # 注:三元运算符的结果不一定要与条件直接性关系 cmd ...