本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了,

为了使程序逻辑看起来简单,切换日期,选择日期等事件处理部分未实现,读者可以自己尝试实现。

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)的更多相关文章

  1. Appium Android Bootstrap源码分析之控件AndroidElement

    通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...

  2. Robotium源码解读-native控件/webview元素的获取和操作

    目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...

  3. Duilib源码分析(二)控件构造器—CDialogBuilder

    上一节了解了大体流程,但是界面控件元素是如何被加载.解析.构建.管理.控件消息如何处理的呢?接下来我们将结合控件构造器进行分析: CDialogBuilder:控件构造器,主要用以解析xml配置文件并 ...

  4. JGUI源码:实现蒙版层显示(18)

    有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div,设置absolute.宽高100%.设置z-index置于顶层,设置半透明效果,fadein,fadeou ...

  5. JGUI源码:从头开始,建一个自己的UI框架(1)

    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...

  6. 关于JSON日期格式显示及My97日期控件

    1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...

  7. 手机日期控件mobiscroll

    query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件可以让用户很方 ...

  8. 仿酷狗音乐播放器开发日志二十三 修复Option控件显示状态不全的bug(附源码)

    转载请说明原出处,谢谢~~ 整个仿酷狗工程的开发将近尾声,现在还差选项设置窗体的部分,显然在设置窗体里用的最多的就是OptionUI控件,我在写好大致的布局后去测试效果,发现Option控件的显示效果 ...

  9. js 日期控件 可以显示为和历

    日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...

随机推荐

  1. ORA-12520 TroubleShooting

      同事反馈他连接一个新搭建的测试数据库时,报"ORA-12520: TNS: 监听程序无法为请求的服务器类型找到可用的处理程序"错误,在解决他这个问题时,顺便分析.总结一下ORA ...

  2. shell脚本-正则、grep、sed、awk

    ----------------------------------------正则---------------------------------------- 基础正则 ^word ##搜索以w ...

  3. 「Python」为什么Python里面,整除的结果会是小数?

    2018-06-08 参考资料:Python学习笔记(4)负数除法和取模运算 先来看三个式子(!这是在Python3.0下的运算结果): 输出结果: ‘//’明明是整除,为什么结果不是整数,而会出现小 ...

  4. java网络爬虫基础学习(三)

    尝试直接请求URL获取资源 豆瓣电影 https://movie.douban.com/explore#!type=movie&tag=%E7%83%AD%E9%97%A8&sort= ...

  5. Redis进阶之使用Lua脚本开发

    1.在Redis中使用Lua 在Redis中执行Lua脚本有两种方法:eval和evalsha. (1)eval eval 脚本内容 key个数 key列表 参数列表 下面例子使用了key列表和参数列 ...

  6. PyCharm选中文件夹新建时Directory与Python package的区别

    pycharm创建普通的directory和package时都是在硬盘上建立一个文件夹.但是建package时会在这个文件夹中自动地生成一个空的__init__.py文件.python的一个包是一个带 ...

  7. [转] package-lock.json

    其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致. 引用知乎@周载南的回答 根据官方文档,这个package-lo ...

  8. Java基础--接口和抽象类的区别

    任何不谈使用方法的空理论都是耍流氓 使用场景 · 如果你拥有一些方法并且想让它们中的一些有默认实现,那么使用抽象类吧(Java1.8中接口也可以这么做了) · 如果你想实现多重继承,那么你必须使用接口 ...

  9. 一次单体测试的采坑--MatcherAssert.assertThat---org.hamcrest 和org.mockito

    单体测试测试环境ci上报这个错, 本地没问题. org.hamcrest.Matcher.describeMismatch(Ljava/lang/Object;Lorg/hamcrest/Descri ...

  10. python 三元运算符、推导式、递归、匿名函数、内置函数

    三目运算符 # 三目(元)运算符:就是 if...else...语法糖 # 前提:简化if...else...结构,且两个分支有且只有一条语句 # 注:三元运算符的结果不一定要与条件直接性关系 cmd ...