作者:zccst
由单日历改为双日历,整整花了1.5天的实现。这还不是自己实现,只是稍有改动而已。
先上一张截图:
一、环境准备
1,将xx.js文件放到dep下
dep/jscal/1.9/calendarLang.js
dep/jscal/1.9/jscal.js
dep/jscal/moment.min.js
dep/jscal/timeSelect.js
2,将xx.css文件放到asset/css下
asset/css/cmain.css
asset/css/jscal2.css
3,在seajsconfig.js里引入他们
'jscal': 'dep/jscal2/1.9/jscal.js',
'calendarLang': 'dep/jscal2/1.9/calendarLang.js',
'moment': 'dep/jscal2/moment.min.js',
'timeSelect': 'dep/jscal2/timeSelect.js',
4,在index.html里引入css文件
<link rel="stylesheet" type="text/css" href="asset/css/jscal2.css">
<link rel="stylesheet" type="text/css" href="asset/css/cmain.css">
5,将图片放到asset/images/下
注:没有再建目录
二、使用
1,引入组件
require('calendarLang');
var Backbone = require('backbone'),
jscal = require('jscal'),
注:此时要将jscal和calendarLang文件的第一行修改一下
define(function(require, exports, module){/*'jscal', */
define(function(require, exports, module){/*'calendarLang', */
2,在backbone的initialize方法里
var cal = Calendar.setup({
onSelect: function(cal) { cal.hide() },
showTime: true
});
cal.manageFields("t_test_btn", "t_test_input", "%Y-%m-%d %I:%M %p");
3,使用封装后的组件
(1)将该文件放到指定位置,并在seajsConfig.js中引用
"selectTrigger": "src/component/selectTrigger.js",
(2)继续增加cmain.css,并在index.html中引入
(3)在使用的文件中引入该文件
require('calendarLang');
jscal = require('jscal'),
SelectTrigger = require('selectTrigger'),
TimeSelect = require('timeSelect'),//其实
(4)代码
在html页面增加
<div id="time-select-container" style=" float: right; margin-right:2px; width: 230px;"></div>
在js文件增加
//引入单日历控件
/*
var cal = Calendar.setup({
onSelect: function(cal) { cal.hide() },
showTime: true
});
cal.manageFields("t_test_btn", "t_test_input", "%Y-%m-%d %H:%M:%S");*/
//引入双日历控件
var me = this;
var timeSelect = new TimeSelect({
onSelect: function(o){
timeSelect.errmsg('');
//做业务上的校验,比如有些表不允许查询今天的数据,则需要给予提示
//投放网络的domain级别的列表查询,不支持当日数据查询,且时间跨度不超过31天
//其他表时间跨度不超过366天
//不能选择未来的时间
if(!o.excludeTodayFuture()){
timeSelect.errmsg('请选择今天之前(不含今天)的时间范围');
return false;
}
if(o.dayDistance() > 365){
timeSelect.errmsg('时间跨度不能超过1年,请重新选择');
return false;
}
//console.log(o);
/*
if(o.dayDistance() > 31 ){
timeSelect.errmsg('时间跨度不能超过1个月,请重新选择');
return false;
}
if(o.isToday()){
alert('对不起,系统不支持查询当日数据');
return false;
}*/
//将数据设回可见区域
me.trigger.setText(o.getDisplayText());
me.currentTimeSelect = o;
//me.search();
return true;
}
});
var ts = timeSelect.getDefaultTimeSelect();
me.currentTimeSelect = ts;
this.trigger = new SelectTrigger('#time-select-container',timeSelect,{defaultText:ts.text});
this.trigger.reset();
(5)改造
增加错误提示函数
修复获取当前时间的bug
修改开始、结束时间展示(由span改为input)
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
- 大小: 49.4 KB
分享到:
相关推荐
JSCal2是一款开源的JavaScript日历控件,它允许用户在网页上方便地选择日期,适用于各种Web应用中的日期输入场景。这款控件以其轻量级、易用性以及高度可定制化的特点受到了开发者们的欢迎。在本文中,我们将探讨...
JSCal2是一款基于JavaScript的开源日历控件,它提供了丰富的自定义选项和良好的用户体验。这篇教程将深入探讨如何在项目中集成和使用JSCal2。 首先,JSCal2的核心文件包括HTML模板(如`jscal.html`)、CSS样式表(`...
**JSCal js日历控件**是一种基于JavaScript的DHTML(Dynamic HTML)日历组件,它为网页应用提供了互动式、美观的日历功能。这个控件以其酷炫的界面和强大的功能而受到开发者的欢迎。JSCal的出现使得在网页上添加日期...
2. **日期选择范围**:双日历控件允许用户选择一个起始日期和结束日期,提供了更直观的方式进行日期范围选择。 3. **可定制样式**:为了匹配网站的整体设计,日历控件应该允许自定义颜色、字体和布局。 4. **交互...
【标题】"jQuery双日历插件_日期区间选择控件"是一款专为网页设计而开发的高效工具,它提供了一种便捷的方式,使用户在不用反复切换月份的情况下,能够轻松选择日期范围。这款插件尤其适用于需要用户输入日期区间,...
总的来说,“ViewPager+自定义控件实现的日历控件CalenderView”项目展示了如何将Android的内置组件与自定义逻辑相结合,创造出满足特定业务需求的用户界面。开发者通过这个案例可以学习到如何有效地利用`ViewPager`...
在本文中,我们将深入探讨日历控件的种类、用途、设计原则以及如何在不同编程语言和框架中实现和应用这些控件。 首先,让我们了解日历控件的基本功能。日历控件通常包含一个月视图,展示当前月份的所有日期,用户...
本压缩包提供的是关于如何在Android中实现自定义日历控件的源代码示例。下面将详细介绍如何在Android项目中创建并使用自定义的日历视图。 首先,我们需要理解Android中的日期和时间处理。Android系统提供了`java....
2. **自定义控件的创建**: 如果QCalendarWidget的灵活性不够,开发者可以使用QWidget作为基础,构建一个完全自定义的日历控件。这通常涉及绘制日历的各个部分(如日、周、月),并处理用户交互事件,如点击日期、...
2. **设计与样式**:日历控件的设计可以多样化,包括但不限于不同的颜色主题、布局方式(如单月、双月或多月视图)、日期格式(年-月-日、月/日/年等)以及自定义样式。CSS可以用来控制日历的外观,使其与网站的整体...
在本文中,我们将深入探讨日历控件的设计、实现、用途以及与之相关的技术细节。 首先,日历控件通常分为两种类型:独立型和嵌入型。独立型日历控件通常是一个单独的窗口或者弹出框,用户可以打开它来查看和选择日期...
在这个场景中,我们关注的是两个特定的前端组件:基于Ext2的日历控件和IP地址输入控件。 Ext2是一个JavaScript库,主要用于创建富客户端应用。它提供了一套完整的组件和工具,使得开发者可以构建功能丰富的、用户...
基于extjs框架实现的双日历功能
例如,设置`SelectedDate`属性可以改变控件上显示的高亮日期,而`Events`属性则可以用来存储和检索与特定日期相关的事件。 此外,为了实现类似百度日历的事件标记功能,我们需要一个数据结构来存储事件信息,包括...
本主题聚焦于基于Ext2的日历控件和IP地址输入控件的实现,这是EXTJS库的一个实例,EXTJS是一个强大的JavaScript库,特别适用于创建富客户端应用。 EXTJS 2.2版本是EXTJS的早期版本,尽管现在已经有更新的版本,但...
在“日历控件140821”这个文件中,很可能包含了这些方面的示例代码、样式文件和配置文档,用于帮助开发者理解和实现上述功能。通过深入学习和实践,开发者可以掌握创建高效、用户友好的日历界面的技能,提升应用的...
"仿携程去哪双日历控件"是一个专为实现类似携程和去哪儿网双日历选择功能的控件。这种控件的目的是提供一个简洁且易用的日期选择体验,让用户能够快速设置起始和结束日期。 首先,我们需要理解双日历控件的基本架构...
2. **添加到工程**:将控件从工具箱拖放到对话框资源中,或者手动在对话框类的头文件中声明,并在源文件中实现相关成员变量。 3. **属性设置**:通过属性页或代码设置控件的外观和行为,如默认日期、可选日期范围等...
《无私奉献Jscal2-1.7:一款优秀的JavaScript日历控件》 在Web开发领域,用户界面的交互性和易用性至关重要,而日期选择器作为一种常见的交互元素,经常被用于各种应用中,如事件预订、日程管理等。今天我们要介绍...