`
zccst
  • 浏览: 3315941 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

基于jscal2单日历与双日历控件的实现

阅读更多
作者: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日历控件简单使用

    JSCal2是一款开源的JavaScript日历控件,它允许用户在网页上方便地选择日期,适用于各种Web应用中的日期输入场景。这款控件以其轻量级、易用性以及高度可定制化的特点受到了开发者们的欢迎。在本文中,我们将探讨...

    日历控件jscal2.js使用

    JSCal2是一款基于JavaScript的开源日历控件,它提供了丰富的自定义选项和良好的用户体验。这篇教程将深入探讨如何在项目中集成和使用JSCal2。 首先,JSCal2的核心文件包括HTML模板(如`jscal.html`)、CSS样式表(`...

    JSCal js日历控件

    **JSCal js日历控件**是一种基于JavaScript的DHTML(Dynamic HTML)日历组件,它为网页应用提供了互动式、美观的日历功能。这个控件以其酷炫的界面和强大的功能而受到开发者的欢迎。JSCal的出现使得在网页上添加日期...

    jquery兼容所有浏览器双日历控件

    2. **日期选择范围**:双日历控件允许用户选择一个起始日期和结束日期,提供了更直观的方式进行日期范围选择。 3. **可定制样式**:为了匹配网站的整体设计,日历控件应该允许自定义颜色、字体和布局。 4. **交互...

    jquery双日历插件_日期区间选择控件(用户不用来回拉,会展示两个月日期)

    【标题】"jQuery双日历插件_日期区间选择控件"是一款专为网页设计而开发的高效工具,它提供了一种便捷的方式,使用户在不用反复切换月份的情况下,能够轻松选择日期范围。这款插件尤其适用于需要用户输入日期区间,...

    ViewPager+自定义控件实现的日历控件CalenderView

    总的来说,“ViewPager+自定义控件实现的日历控件CalenderView”项目展示了如何将Android的内置组件与自定义逻辑相结合,创造出满足特定业务需求的用户界面。开发者通过这个案例可以学习到如何有效地利用`ViewPager`...

    日历控件大全 - 日历控件

    在本文中,我们将深入探讨日历控件的种类、用途、设计原则以及如何在不同编程语言和框架中实现和应用这些控件。 首先,让我们了解日历控件的基本功能。日历控件通常包含一个月视图,展示当前月份的所有日期,用户...

    android实现日历控件

    本压缩包提供的是关于如何在Android中实现自定义日历控件的源代码示例。下面将详细介绍如何在Android项目中创建并使用自定义的日历视图。 首先,我们需要理解Android中的日期和时间处理。Android系统提供了`java....

    Qt 自定义 Calendar 日历控件

    2. **自定义控件的创建**: 如果QCalendarWidget的灵活性不够,开发者可以使用QWidget作为基础,构建一个完全自定义的日历控件。这通常涉及绘制日历的各个部分(如日、周、月),并处理用户交互事件,如点击日期、...

    6个JS日历控件个JS日历控件

    2. **设计与样式**:日历控件的设计可以多样化,包括但不限于不同的颜色主题、布局方式(如单月、双月或多月视图)、日期格式(年-月-日、月/日/年等)以及自定义样式。CSS可以用来控制日历的外观,使其与网站的整体...

    日历控件.rar 日历控件.rar

    在本文中,我们将深入探讨日历控件的设计、实现、用途以及与之相关的技术细节。 首先,日历控件通常分为两种类型:独立型和嵌入型。独立型日历控件通常是一个单独的窗口或者弹出框,用户可以打开它来查看和选择日期...

    基于Ext2的日历控件和IP地址输入控件.zip

    在这个场景中,我们关注的是两个特定的前端组件:基于Ext2的日历控件和IP地址输入控件。 Ext2是一个JavaScript库,主要用于创建富客户端应用。它提供了一套完整的组件和工具,使得开发者可以构建功能丰富的、用户...

    winform自定义日历控件

    例如,设置`SelectedDate`属性可以改变控件上显示的高亮日期,而`Events`属性则可以用来存储和检索与特定日期相关的事件。 此外,为了实现类似百度日历的事件标记功能,我们需要一个数据结构来存储事件信息,包括...

    基于Ext2的日历控件和IP地址输入控件

    本主题聚焦于基于Ext2的日历控件和IP地址输入控件的实现,这是EXTJS库的一个实例,EXTJS是一个强大的JavaScript库,特别适用于创建富客户端应用。 EXTJS 2.2版本是EXTJS的早期版本,尽管现在已经有更新的版本,但...

    仿携程去哪双日历控件

    "仿携程去哪双日历控件"是一个专为实现类似携程和去哪儿网双日历选择功能的控件。这种控件的目的是提供一个简洁且易用的日期选择体验,让用户能够快速设置起始和结束日期。 首先,我们需要理解双日历控件的基本架构...

    VC MFC日历控件ocx activex

    2. **添加到工程**:将控件从工具箱拖放到对话框资源中,或者手动在对话框类的头文件中声明,并在源文件中实现相关成员变量。 3. **属性设置**:通过属性页或代码设置控件的外观和行为,如默认日期、可选日期范围等...

    无私奉献Jscal2-1.7

    《无私奉献Jscal2-1.7:一款优秀的JavaScript日历控件》 在Web开发领域,用户界面的交互性和易用性至关重要,而日期选择器作为一种常见的交互元素,经常被用于各种应用中,如事件预订、日程管理等。今天我们要介绍...

    很好用的日历控件,日历、控件

    在本主题中,我们将深入探讨日历控件的设计、功能、实现方式以及其在不同平台的应用。 1. 设计原则:日历控件的设计应该直观易用,确保用户能够快速理解并操作。通常包括月份切换、日期选择、星期显示等功能,同时...

    html js脚本日历控件

    HTML 和 JavaScript 脚本日历控件是网页开发中常用的一种交互元素,它允许用户在网页上方便地选择日期,通常与表单控件配合使用,提高用户体验。这种控件在网页应用、在线预订系统、事件管理或任何需要用户输入日期...

Global site tag (gtag.js) - Google Analytics