日历控件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);
		}
    }
});

如果您觉得本文的内容对您的学习有所帮助，您可以微信：