日历控件jscal2.js使用

zccst

于 2014-05-29 18:23:18 发布

阅读量517

点赞数

分类专栏： Web前端-deps(不改动) 文章标签： jscal jscal2

本文链接：https://blog.youkuaiyun.com/zccst/article/details/84603020

版权

Web前端-deps(不改动) 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 JSCal 库管理多个输入框的日期选择，包括设置日期范围、显示时间、以及弹出日历等功能。具体实现包括设置日期范围为 2014 年 4 月 18 日至 6 月 15 日，使用 24 小时制显示时间，并管理多个输入框与日期选择器的关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：zccst

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

直接看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时，日历现实中锚元素的位置：
可以参考官方解释：[url]http://www.dynarch.com/jscal/#sec21[/url]
比如：cal.popup('f_date1','Br');//Br的意思是在锚元素下面，靠左的位置

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

对于非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);
		}
    }
});