旅游频道的开发中需要定义各种日期组件,有的是基本的日期选择,

这个基本日期只包含如下功能

  1. 左右翻(月)
  2. 点击天回填到输入域
  3. 点击“今天”,回填今天的日期到输入域
  4. 点击“关闭”,日期控件关闭

有的同时显示两个月的日期

有的包含一些业务信息,比如机票搜索结果页的低价日历。

这个比上面的要复杂一些

  1. 每天的日期格子里含有价格信息
  2. 点击左右箭头会向后退请求更新每天的低价机票信息
  3. 且点击每天的格子是会重新查询

这里记录下一个基本日历组件的要点

一、HTML结构

这里以table来布局,由以下三个部分组成

分别对应,thead(显示区,左右箭头切换月份),tbody(显示天,点击天回填到输入域),tfoot(补充工具区)

开发日期组件之前就有个疑问,为什么星期是以周日开始,而不是周一呢?细心的同学会发现很多日期组件都是以“周日”开始,比如windows和mac系统自带的日历

  

这个其实是由于日期对象的getDay方法返回的值是这样的,这样实现起来方便一些,当然也可以实现为从周一开始排列的。

周日 0

周一 1

周二 2

周三 3

...

顺便提下 getMonth方法,它返回月份,值是从0开始的,比如

一月 0

二月 1

三月 2

...

二、核心函数

1. isLeapYear 判断闰年

function isLeapYear(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)
}

闰年是比普通年份多出一段时间的年份,在各种历法中都有出现,目的是为了弥补人为规定的纪年与地球公转产生的差异。有两个条件

a. 非整百年:年数除以4余数为1是闰年,即公元前1、5、9……年。

b. 整百年:年数除以400余数为1是闰年,年数除以3200余数为1,不是闰年,年数除以172800余1又为闰年,即公元前401、801……年。

2. calculateDays 根据年月计算天

var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
function calculateDays(year, month) {
var days = months[month]
// 2月比较特殊,非闰年28天,闰年29天,如2008年2月为29天
if ( 1 == month && isLeapYear(year) ) {
days = 29
}
return days
}

1-12月的天数分别是31,28,31,30,31,30,31,31,30,31,30,31。2月比较特殊,闰年是29天。

3. format 格式化回填到输入框的字符串,可以带星期,也可以不带

4. setPosi 用来定位日期弹层的位置,一般是固定在输入框的下面

5. onBodyClick 点击body时的响应函数,这时会把日期弹层关闭(从DOM里删除)

6. template 日期组件的html模板函数,生成基本的框架,但日期数据是后续回填

7. render 渲染日期组件。点击输入框时会调用该方法,根据当前日期生成模板,根据年月生成该月的日期天数然后回填,添加组件上各种事件,计算组件的位置后插入到body里。

8. fillDate 根据年月计算该月的天数,然后插入。比如点击左右箭头(上月,下月)都会调用该方法。

9. events 方法会采用事件代理机制为日历上所有事件添加事件响应函数。即日期组件的行为由它完成。

10. prevMonth/nextMonth 是点击左右箭头的时候调用的,即更换月份的事件。

11. remove 将日期组件删除,点击body,点“关闭”,选择一个“天” 后都会调用该方法。该方法会从DOM中把日期组件删除,会把当前的天回填到输入框。注意,除了从DOM节点中删除,日期组件上的所有的事件绑定也将解除。

总结:基本上可以按照此思路来实现各种日期控件,比如有的需要添加农历信息、节假日、有的需要添加机票的价格信息。

DEMO:http://snandy.github.io/lib/calendar/

JavaScript日期组件的实现的更多相关文章

  1. JavaScript日期对象使用总结

    javascript Date日期对象的创建 创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date(& ...

  2. 日期组件wdatepicker

    导入WdataPicker文件包到项目的js文件夹下: 在用户管理中的添加.编辑jsp页面对生日表单项引入日期组件: <script type="text/javascript&quo ...

  3. amazeui-js插件-ui增强-日期组件如何使用(把实例做一下)

    amazeui-js插件-ui增强-日期组件如何使用(把实例做一下) 一.总结 一句话总结:需要jquery.js和amazeui.js一切才能使用 1.amazeui中的各种js效果要怎么才能使用? ...

  4. 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...

  5. yii2超好用的日期组件和时间组件

    作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  6. Moment.js 超棒Javascript日期处理类库

    Moment.js 不容错过的超棒Javascript日期处理类库 主要特性: 3.2kb超轻量级 独立类库,意味这你不需要倒入一堆js 日期处理支持UNIX 时间戳,String,指定格式的Date ...

  7. EXTJS项目实战经验总结一:日期组件的change事件:

    1  依据选择的日期,加载相应的列表数据,如图:   开发说明    1 开发思路: 在日期值变化的事件中获得选择后的日期值,传给后台,然后从后台加载相应的数据 2 问题:在查看extjs2.2 的a ...

  8. vue自定义日期组件

    vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...

  9. 为Ext添加下拉框和日期组件

    Ext.onReady(function(){ var config = { fields:['module'], data:[['新建'],['删除'],['增加']}; var store = n ...

随机推荐

  1. Sql Server来龙去脉系列 必须知道的权限控制核心篇

    最近写了<Sql Server来龙去脉系列  必须知道的权限控制基础篇>,感觉反响比较大.这可能也说明了很多程序猿对数据库权限控制方面比较感兴趣,或者某些技术点了解的没有很透彻. 有些人看 ...

  2. 组合数学 - 波利亚定理 --- poj : 2154 Color

    Color Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7873   Accepted: 2565 Description ...

  3. C++ - 多线程的实现

    支持多线程可谓是C++语言最大的变化之一. 此前,C++只能利用操作系统的功能(Unix族系统使用pthreads库),或是例如OpenMP和MPI这些代码库,来实现多核计算的目标. C++本身并没有 ...

  4. [爬虫学习笔记]Url过滤模块UrlFilter

            Url Filter则是对提取出来的URL再进行一次筛选.不同的应用筛选的标准是不一样的,比如对于baidu/google的搜索,一般不进行筛选,但是对于垂直搜索或者定向抓取的应用,那 ...

  5. 三通短信每月发送量导入Sqlserver随笔

    创建表sql CREATE TABLE SmsSentLog2014101625( Phone NVARCHAR(MAX), MessageContent NVARCHAR(MAX), Message ...

  6. FreeBSD 10 发布

    发行注记:http://www.freebsd.org/releases/10.0R/relnotes.html 下文翻译中... 主要有安全问题修复.新的驱动与硬件支持.新的命名/选项.主要bug修 ...

  7. php页面输出时,js设置input框的选中值

    /* 设置表单的值 */ function setValue(name, value) { var first = name.substr(0, 1), input, i = 0, val; if ( ...

  8. [git] ignore文件规则失效

    背景 在某次项目,发现已经将.iml规则写进.ignore文件,但是对.iml的修改依然会出现在changelist中. 解决方案 先引用git官网上的描述 gitignore - Specifies ...

  9. ABAP:SAP报表性能的优化

    大部分ABAPer都是从SAP报表及打印开始学起的,大家也都认为写个SAP报表程序是最简单不过的事了. 但是实际情况真的如此吗?写报表时除了保证数据的准确性,您可曾考虑过报表的性能问题吗? 由于报表程 ...

  10. arcgis python 更新顺序号

    i = 0def myFun(): global i i=i +1 return i myFun() ========================== accumulate(  ) total = ...