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

日历控件jscal2.js使用

阅读更多
作者:zccst

官方手册:http://www.dynarch.com/jscal/#sec2
demo:http://www.dynarch.com/jscal/jscal/demo/multipleFields.html

直接看HTML,v1.9版本。另1.7版本详见附件。
<script src="js/jscal2.js"></script>
<script src="js/lang/cn.js"></script>
<link rel="stylesheet" type="text/css" href="css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="css/gold/gold.css" />
<!--
steel是默认皮肤
<link rel="stylesheet" type="text/css" href="css/steel/steel.css" />
-->



<p>
  用一个日历对象管理多个输入框(Calendar版本v1.9),例如:
  <br/><br/>当前设置条件:
  <br/>1,日期范围是:2014-04-18 至 2014-06-15
  <br/>2,时间使用:24制
</p>

<input size="20" id="f_date1" /><button id="f_btn1">...</button><br />
<input size="20" id="f_date2" /><button id="f_btn2">...</button><br />
<input size="20" id="f_date3" /><button id="f_btn3">...</button><br />
<input size="20" id="f_date4" /><button id="f_btn4">...</button>

<script type="text/javascript">
  var cal = Calendar.setup({
	  onSelect: function(cal) { cal.hide() },
	  showTime: true,
	  min: 20140418,
	  max: 20140615,
	  timePos:'left',
	  minuteStep :60,
	  showTime : 24
  });
  cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d %H:00");
  cal.manageFields("f_btn2", "f_date2", "%Y-%m-%d %H:00");
  cal.manageFields("f_btn3", "f_date3", "%Y-%m-%d %H:00");
  cal.manageFields("f_btn4", "f_date4", "%Y-%m-%d %H:00");

  cal.popup('f_date1','Br');
  /* 默认
  cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d %I:%M %p");
  cal.manageFields("f_btn2", "f_date2", "%b %e, %Y %I:%M %p");
  cal.manageFields("f_btn3", "f_date3", "%e %B %Y %I:%M %p");
  cal.manageFields("f_btn4", "f_date4", "%A, %e %B, %Y %I:%M %p");*/
 
</script>



关于popup时,日历现实中锚元素的位置:
可以参考官方解释:http://www.dynarch.com/jscal/#sec21
比如:cal.popup('f_date1','Br');//Br的意思是在锚元素下面,靠左的位置

对Br的释义详见:http://www.dynarchlib.com/index.html#api://DlPopup.xml:type=object_method:func=popup







对于非popup情况:
Calendar.setup({
    cont          : "calendar-container",
	min: 20140408,
    max: 20140625,
    selectionType : Calendar.SEL_MULTIPLE,
    selection     : Calendar.dateToInt(new Date()),
    showTime      : 24,
    onSelect      : function(cal) {
		console.log(cal.getHours());
        var count = this.selection.countDays();
        if (count == 1) {
            var date = this.selection.get()[0];
            date = Calendar.intToDate(date);
            date = Calendar.printDate(date, "%Y-%m-%d %H:00");
            $("#calendar-info").val(date);
        } else {
            $("#calendar-info").html(Calendar.formatString(
                "${count:no date|one date|two dates|# dates} selected",
                { count: count }
            ));
        }
    },
    onTimeChange  : function(cal) {
        var h = cal.getHours();
        if (h < 10) h = "0" + h;
		var str = $("#calendar-info").val();
		str = str.substr(0,10) + ' ' + h + ':00';
		$("#calendar-info").val(str);
         if($.trim(str)){
			str = str.substr(0,10) + ' ' + h + ':00';
			$("#calendar-info").val(str);
		}
    }
});





如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    无私奉献Jscal2-1.7

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

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

    本文将重点讨论如何基于jscal2这个JavaScript库实现单日历和双日历控件。jscal2是一个功能丰富的日历组件,它可以方便地在网页上添加交互式的日历功能。 首先,我们需要理解jscal2的核心概念。jscal2是一个纯...

    JSCal2日历控件简单使用

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

    JSCal js日历控件

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

    日历控件.rar

    《JavaScript日历控件JSCal2深度解析与应用》 在现代网页设计中,交互性和用户体验至关重要。其中,日历控件作为一种常见的交互元素,能够帮助用户方便地选择日期,广泛应用于各种在线表单、预订系统和时间管理工具...

    非常漂亮的JS日历控件

    本文将深入探讨“非常漂亮的JS日历控件”,特别关注JSCal2-1.8这个版本。 ### JSCal2简介 JSCal2是早期流行的JavaScript日历库之一,由Clayfish Designs开发。它的全名是JavaScript Calendar 2.0,版本1.8是其中的...

    日历控件(兼容IE FF)

    "JSCal2-1.5"是一款经典的日历控件,它具有良好的跨浏览器兼容性,包括对Internet Explorer(IE)和Firefox的支持。这款控件允许开发者在网页上轻松集成一个功能丰富的日历组件,用户只需点击即可选取日期,而非手动...

    配置TextBox的Css属性配置日期选择控件

    "JSCal2"是一个JavaScript日历控件,版本为1.7,它允许开发者在网页上轻松添加交互式的日期选择功能。这个控件不仅提供了基本的日历展示,还支持多语言、自定义样式以及各种事件处理。首先,我们需要在HTML文件中...

    三款日历输入文本框的控件

    Calendar3是一款JavaScript编写的轻量级日历控件,它允许用户通过点击一个图标来打开一个日历视图,从而选择日期。这款控件通常与HTML表单中的输入字段配合使用,提供了一种简洁且高效的日期选择方式。Calendar3的...

    日历控件(精美+提示+提醒的功能)

    例如,JSCal2-1.9这个文件可能包含了一个JavaScript实现的日历控件,它可能提供了自定义皮肤、主题支持,使得开发者可以根据需要调整控件的外观,使其与网站或应用程序的其他部分保持一致。 其次,关于“提示功能”...

    一款强大的时间控件,绝对值得使用学习

    【使用学习】要使用和学习JSCal2,开发者需要了解JavaScript基础知识,理解如何在HTML中引入外部脚本文件,以及如何在JavaScript代码中实例化和配置控件。同时,通过查看JSCal2的文档,可以学习到如何自定义样式、...

    JS日期时间选择控件

    JSCal2是一个历史悠久的JavaScript日历控件,版本1.7可能包含JavaScript文件、CSS样式表、图像资源以及示例或文档,帮助开发者理解和集成这个控件。通过查看这些文件,开发者可以了解控件的工作原理,自定义样式,...

    jquery日历控件

    JSCal2是一款简单实用而且非常酷的日历控件,功能丰富界面华丽,在官网http://www.dynarch.com/projects/calendar/有非常详细的介绍。这里是一个简单的应用实例。 包含eclipse下测试项目和js脚本代码。

    文本框日历

    2. **JavaScript和jQuery插件**:为了实现点击text文本框弹出日历的效果,开发者可能还会利用JavaScript,尤其是流行的jQuery库,结合像"jscalendar"这样的插件。这些插件能够实现更丰富的用户交互,比如Ajax无刷新...

    js日期控件!很炫的支持多种语言

    JSCal2-1.8是这款控件的一个版本,很可能是一个名为JSCalendar2的JavaScript库。这个库提供了丰富的日期选择功能,包括但不限于: 1. **用户友好界面**:JSCalendar2设计了一个易于理解和使用的界面,用户可以通过...

    jscalendar

    1. **下载与引用**: 获取JSCalendar的压缩包,如JSCal2-1.7,解压后将所需的JavaScript和CSS文件添加到你的网页中。 2. **HTML集成**: 在需要日期输入的地方添加一个文本框,并附加一个触发日历弹出的按钮或链接。 ...

    JavaScript calendar,好用的日期选择插件

    "JSCal2-1.8"这个文件名可能是指这个日历插件的特定版本,JSCal2可能是这个插件的名字,而1.8可能是其版本号。通常,每个版本都会修复已知问题,增加新功能,或者提升性能,因此使用最新版本通常能获得更好的稳定性...

Global site tag (gtag.js) - Google Analytics