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_ ...
随机推荐
- 初步了解PE分析
尝试编写代码获取PE文件的信息. 首先使用 CreateFile打开一个PE文件并返回一个用于访问该对象的handle. HANDLE CreateFile( LPCTSTR lpFileName, ...
- RuntimeException和Exception区别
1.java将所有的错误封装为一个对象,其根本父类为Throwable, Throwable有两个子类:Error和Exception. 2.Error是Throwable 的子类,用于指示合理的应用 ...
- 导入python库失败时的方法
出现以下错误如何解决: e.g. cmd: pip install Django -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host ...
- python进阶之生成器
迭代器 什么叫迭代 可以被for循环的就说明他们是可迭代的,比如:字符串,列表,字典,元祖,们都可以for循环获取里面的数据 下面我们看一个代码: number = 12345 for i in nu ...
- Clion快捷键
快捷键配置 File->Setting->Keymap->Keymaps 选择Visual Studio风格 代码提示的匹配模式 File->Setting->Edito ...
- C#之重写与隐藏
一 重写与隐藏区别 (1)方法重写:就是在基类中的方法用virtual关键字来标识,然后在继承类中对该类进行重写(override),这样基类中的方法已经被重写了,已经失去了功能了.当让基类的对象的引 ...
- Docker 核心技术之网络管理
为什么需要Docker网络管理 容器的网络默认与宿主机.与其他容器都是相互隔离. 容器中可以运行一些网络应用(如nginx.web应用.数据库等),如果要让外部也可以访问这些容器内运行的网络应用,那么 ...
- P1119 灾后重建（floyd进阶）
思路:这道题看n的范围很小(n<=200),显然就用floyd可以解决的问题,但又并不是简单的floyd算法,还是需要一些小小的变化.一开始我的思路是先跑一次弗洛伊德最短路,这样子显然复杂度很高 ...
- sqlserver2008R2 评估期已过
早上打开win程序-卡死不动了,查看三层数据库连接-连接不上数据库 打开数据库-提示 评估期已过 解决方法: 进入sqlserver的安装中心-点击 维护-版本升级 输入密钥:企业版:R88PF-GM ...
- 用标准3层神经网络实现MNIST识别
一.MINIST数据集下载 1.https://pjreddie.com/projects/mnist-in-csv/ 此网站提供了mnist_train.csv和mnist_test.cs ...