之前项目梅花雨的一个扩展，不过带时间的日期就不好办了，所以要找个新的日期输入控件来代替。
网上介绍说jscalendar蛮好用的。不过一个全局的Calendar.setup方法，对于页面上有多个日期输入框就比较麻烦了，所以要扩展下（calendar.js结尾处添加即可）：
//custom functions
function ShowCalendar(obj,dateFormat,displayTime)
{
if(obj != undefined)
{
dateFormat = dateFormat || "%Y/%m/%d";
var date = Date.parseDate(obj.value , dateFormat);
var cal = new Calendar(Calendar._FD,
date,
onSelect,
function(cal) { cal.hide(); });
cal.showsTime = displayTime || false;
cal.yearStep = 1;
cal.setRange(1900, 2999);
cal.setDateFormat(dateFormat);
cal.params = {
inputField:obj,
ifFormat:cal.dateFormat,
daFormat:cal.dateFormat,
electric:true,
singleClick:true
};
cal.electric = true;
cal.create();
cal.refresh();
cal.showAtElement(obj, "Br");
}
}
function onSelect(cal)
{
var p = cal.params;
var update = (cal.dateClicked || p.electric);
if (update && p.inputField) {
p.inputField.value = cal.date.print(p.ifFormat);
if (typeof p.inputField.onchange == "function")
p.inputField.onchange();
}
if (update && p.displayArea)
p.displayArea.innerHTML = cal.date.print(p.daFormat);
if (update && typeof p.onUpdate == "function")
p.onUpdate(cal);
if (update && p.flat) {
if (typeof p.flatCallback == "function")
p.flatCallback(cal);
}
if (update && p.singleClick && cal.dateClicked)
cal.callCloseHandler();
}
//end custom functions
扩展之后，不需再写Calendar.setup了。新方法如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css" >@import url(calendar-tas.css);</style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/cn_utf8.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="data" name="data" onclick="return ShowCalendar(this,'%Y-%m-%d',false)" />
<input type="text" id="Text1" name="data" onclick="return ShowCalendar(this,'%Y-%m-%d %H:%M','true')" />
</div>
</form>
</body>
</html>
感觉清晰多了。
不过花掉了我三个小时，
。在新方法中去掉cache支持了，不知道有多大影响。
网上介绍说jscalendar蛮好用的。不过一个全局的Calendar.setup方法，对于页面上有多个日期输入框就比较麻烦了，所以要扩展下（calendar.js结尾处添加即可）：
//custom functionsfunction ShowCalendar(obj,dateFormat,displayTime) {
if(obj != undefined) {
dateFormat = dateFormat || "%Y/%m/%d"; var date = Date.parseDate(obj.value , dateFormat); var cal = new Calendar(Calendar._FD, date, onSelect, function(cal) { cal.hide(); }); cal.showsTime = displayTime || false; cal.yearStep = 1; cal.setRange(1900, 2999); cal.setDateFormat(dateFormat); cal.params = { inputField:obj, ifFormat:cal.dateFormat, daFormat:cal.dateFormat, electric:true, singleClick:true }; cal.electric = true; cal.create(); cal.refresh(); cal.showAtElement(obj, "Br"); } }function onSelect(cal) { var p = cal.params; var update = (cal.dateClicked || p.electric); if (update && p.inputField) { p.inputField.value = cal.date.print(p.ifFormat); if (typeof p.inputField.onchange == "function") p.inputField.onchange(); } if (update && p.displayArea) p.displayArea.innerHTML = cal.date.print(p.daFormat); if (update && typeof p.onUpdate == "function") p.onUpdate(cal); if (update && p.flat) { if (typeof p.flatCallback == "function") p.flatCallback(cal); } if (update && p.singleClick && cal.dateClicked) cal.callCloseHandler();}//end custom functions扩展之后，不需再写Calendar.setup了。新方法如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css" >@import url(calendar-tas.css);</style> <script type="text/javascript" src="calendar.js"></script> <script type="text/javascript" src="lang/cn_utf8.js"></script> <script type="text/javascript" src="calendar-setup.js"></script></head><body> <form id="form1" runat="server"> <div> <input type="text" id="data" name="data" onclick="return ShowCalendar(this,'%Y-%m-%d',false)" /><input type="text" id="Text1" name="data" onclick="return ShowCalendar(this,'%Y-%m-%d %H:%M','true')" /> </div> </form></body></html>感觉清晰多了。
不过花掉了我三个小时，
。在新方法中去掉cache支持了，不知道有多大影响。
浙公网安备 33010602011771号