<style type="text/css">
.calender_tb{
border-collapse:collapse;
background-color:lightblue;
font-family:'宋体';
font-size:90%;
width:160px;
height:160px;
}
.calender_tb tr td{
padding:2px;
cursor:pointer;
border:1px solid black;
text-align:center;
white-space: nowrap;
}
.calender_tb caption{
background-color:#CCCC99;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
font-size:120%;
}
.calender_tb tr.calender_nav{
border:1px solid black;
white-space: nowrap;
}
.calender_tb tr.calender_nav td{
border:none;
}
.calender_tb th{
background-color:lightgreen;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
.calender_tb .disabled_td{
background-color:#999;
}
.calender_tb .invalid_td{
background-color:#666;
}
.today{
background-color:blue;
color:#fff;
}
.calender_tb tbody tr td.td_mouse_over{
color:blue;
background-color:yellow;
}
</style>
var shawn = {};
/**
* @param cfg 配置项
* @author shawn
* @version 1.0
* */
shawn.Calendar = function(cfg){
this.renderTo = null;
this.now = new Date();
this.id = this.genId++;
this.multi = false;
this.lang = 'zh';
if(Object.prototype.toString.call(cfg) == '[object Date]'){
this.dt = cfg;
}else if(Object.prototype.toString.call(cfg) == '[object Object]'){
this.dt = cfg.dt || new Date();
this.multi = cfg.multi || false;
this.lang = cfg.lang || 'zh';
this.minValue = cfg.minValue || null;
this.maxValue = cfg.maxValue || null;
this.id = cfg.id || this.id;
this.renderTo = typeof cfg.renderTo == 'string' ?document.getElementById(cfg.renderTo):cfg.renderTo ;
this.callbackFn = cfg.callbackFn;
}
this.init();
}
shawn.Calendar.prototype = {
genId: 0,
defaultCss:'',
language:{
zh:{
ths:['日','一','二','三','四','五','六'],
year:'年',
month:'月',
now:'今天'},
en:{
ths:['Sun','Mon','Tue','Wen','Ths','Fri','Sat'],
year:'/',
month:'/',
now:'Today'}
},
baseJudge:function(){
if(navigator.appName.indexOf('Microsoft')>-1){
this.isIE = true;
}else{
this.isIE = false;
}
},
init: function(){
this.baseJudge();
this.createTable();
},
createCaption:function(){
var str = '<caption>'
+ this.fullYear + this.language[this.lang].year
+ this.month + this.language[this.lang].month
+ '</caption>'
return str;
},
createThs:function(){
var ths = "<tr>";
var ths_zh = this.language[this.lang].ths;
for(var i=0;i<7;i++){
ths+="<th>" + ths_zh[i] + "</th>";
}
ths += "</tr>";
return ths;
},
createTbody:function(){
var maxDay = this.getMaxDay(this.fullYear,this.month);
var startDay = new Date(this.fullYear,this.month-1,1).getDay();
var min = new Date(1970,0,1);
var max = new Date(2999,11,31);
var tmp = null;
if(this.minValue){
tmp = this.minValue.split('-');
min = new Date(tmp[0],tmp[1]-1,tmp[2]);
if(Object.prototype.valueOf.call(min) == 'Invalid Date'
|| Object.prototype.valueOf.call(min) == 'NaN' ){
min = new Date(1970,0,1);
}
}
if(this.maxValue){
tmp = this.maxValue.split('-');
max = new Date(tmp[0],tmp[1]-1,tmp[2]);
if(Object.prototype.valueOf.call(max) == 'Invalid Date'
|| Object.prototype.valueOf.call(max) == 'NaN' ){
max = new Date(2999,11,31);
}
}
var tds = "",trs="";
if(this.multi){
var preMaxDay = this.getMaxDay(this.fullYear,this.month-1);
for(var j=0;j<startDay;j++){
tds = tds + '<td class="disabled_td">'
+(preMaxDay-startDay+j+1) + '</td>';
}
}else{
for(var j=0;j<startDay;j++){
tds += '<td class="disabled_td"> </td>';
}
}
var j=1;
for(var i=1 ;(i + startDay)<= 42; i++){
if((i+startDay-1)%7 == 0){
trs = trs + '<tr>' + tds + '</tr>';
tds = "";
}
if(i == this.date){
tmp = new Date(this.dt.getFullYear(),this.dt.getMonth(),i);
if(tmp < min || tmp > max){
tds = tds + '<td class="today invalid_td">'+ i + '</td>';
}else{
tds = tds + '<td class="today">'+ i + '</td>';
}
}else if(i<=maxDay){
tmp = new Date(this.dt.getFullYear(),this.dt.getMonth(),i);
if(tmp < min || tmp > max){
tds = tds + '<td class="invalid_td">'+ i + '</td>';
}else{
tds = tds + '<td>'+ i + '</td>';
}
}else{
if(this.multi){
tds = tds + '<td class="disabled_td">' +(j++) +'</td>';
}else{
tds = tds + '<td class="disabled_td"> </td>';
}
}
}
trs = trs + "<tr>" + tds + "</tr>";
return trs;
},
getMaxDay:function(year,month){
var maxDay = 0;
var leap = (year%400 == 0 || (year%4 == 0 && year%100 !=0));
if(leap && month == 2){
maxDay = 29;
}else if(month == 2){
maxDay = 28;
}else if("1,3,5,7,8,10,12,".indexOf(month + ",") == -1){
maxDay = 30;
}else{
maxDay = 31;
}
return maxDay;
},
createNav:function(){
return '<tr class="calender_nav">'
+ '<td><<</td>'
+ '<td><</td>'
+ '<td colspan="3">'+this.language[this.lang].now+'</td>'
+ '<td>></td>'
+ '<td>>></td></tr>'
},
createTable:function(){
this.day = this.dt.getDay();
this.fullYear = this.dt.getFullYear();
this.month = this.dt.getMonth() + 1;
this.date = this.dt.getDate();
var table = ['<table id="table_'+ this.genId + '" class="calender_tb">',"</table>"];
var thead = ["<thead>","</thead>"];
var tbody = ['<tbody>',"</tbody>"];
this.output = table[0]
+ this.createCaption()
+ thead[0]
+ this.createThs()
+ tbody[0]
+ this.createTbody()
+ this.createNav()
+ tbody[1] + table[1];
},
show: function(){
if(this.renderTo == null){
this.renderTo = document.createElement("DIV");
this.renderTo.id = "calendar" + this.id;
document.body.appendChild(this.renderTo);
document.getElementById(this.renderTo.id).innerHTML = this.output;
}
else{
document.getElementById(this.renderTo.id).innerHTML = this.output;
}
this.output = ''
this.addListeners();
},
render: function(target){
this.renderTo = target;
},
nextMonth: function(){
this.dt = new Date(this.fullYear,this.month,this.date);
this._update();
},
previousMonth: function(){
this.dt = new Date(this.fullYear,this.month-2,this.date);
this._update();
},
_update:function(){
this.removeListeners();
document.getElementById(this.renderTo.id).innerHTML = '';
this.createTable();
this.show();
},
nextYear: function(){
this.dt = new Date(this.fullYear+1,this.month-1,this.date);
this._update();
},
previousYear: function(){
this.dt = new Date(this.fullYear-1,this.month-1,this.date);
this._update();
},
restore:function(){
this.dt = new Date();
this._update();
},
loadCss:function(css){
if(css){
}else{
}
},
addListeners:function(){
var that = this;
if(!this.eventObj){
this.eventObj = {};
}
function clickFn(e){
e = e || window.event;
var target = e.srcElement || e.target;
if(target.tagName && target.tagName.toLowerCase() == 'td'){
if(target.className.indexOf("disabled_td") == -1
&& target.className.indexOf("invalid_td") == -1 ){
switch(target.innerHTML){
case "<":that.previousMonth();break;
case "<<" :that.previousYear();break;
case ">":that.nextMonth();break;
case ">>":that.nextYear();break;
case that.language[that.lang].now:that.restore();break;
default:{
that.selectedDay = parseInt(target.innerHTML);
if(!isNaN(that.selectedDay)){
var rs = new Date();
rs.setFullYear(that.fullYear);
rs.setMonth(that.month-1);
rs.setDate(that.selectedDay);
that.callbackFn.call(window,rs)
}
}
}
}
}
}
function mouseoverFn(e){
e = e || window.event;
var target = e.srcElement || e.target;
if(target.tagName.toLowerCase() == 'td'){
if(target.className.indexOf("disabled_td") == -1
&& target.className.indexOf("invalid_td") == -1 ){
target.className = target.className + ' td_mouse_over ';
}
}
}
function mouseoutFn(e){
e = e || window.event;
var target = e.srcElement || e.target;
if(target.tagName.toLowerCase() == 'td'){
if(target.className.indexOf("disabled_td") == -1
&& target.className.indexOf("invalid_td") == -1 ){
target.className = target.className.replace(/\s*td_mouse_over\s*/,'');
}
}
}
this.eventObj.click = clickFn;
this.eventObj.mouseover = mouseoverFn;
this.eventObj.mouseout = mouseoutFn;
if(this.isIE){
this.renderTo.attachEvent('onclick',clickFn);
this.renderTo.attachEvent('onmouseover',mouseoverFn);
this.renderTo.attachEvent('onmouseout',mouseoutFn);
}else{
this.renderTo.addEventListener('click',clickFn,false);
this.renderTo.addEventListener('mouseover',mouseoverFn,false);
this.renderTo.addEventListener('mouseout',mouseoutFn,false);
}
},
removeListeners:function(){
if(this.eventObj){
for(name in this.eventObj){
if(this.isIE){
this.renderTo.detachEvent('on' + name,this.eventObj[name]);
}else {
this.renderTo.removeEventListener(name,this.eventObj[name],false);
}
}
}
}
}
//例子
function go(){
var cal = new shawn.Calendar({
renderTo:'str2',
dt:new Date(),
minValue:'2010-12-15',
maxValue: '2011-2-1',
multi:true,
callbackFn:function(val){
alert('Value is ' + val.toLocaleString());
}
}).show();
}
- 大小: 3.1 KB
分享到:
相关推荐
3. 时间范围限制:允许设定日期选择的最小值和最大值,防止用户选择超出范围的日期。 4. 时间选择事件监听:提供了详细的日期选择事件回调,方便开发者处理用户的选择操作。 5. 支持多语言:内置多国语言支持,适应...
9. **测试和调试**:开发过程中,对控件进行充分的测试至关重要,包括功能测试(确保所有时间选择都有效)、边界条件测试(如最小值、最大值等)以及兼容性测试(在不同的浏览器和操作系统上运行)。 10. **性能...
2. **日期范围限制**:可以设置日期选择的最小值和最大值,防止用户选择超出设定范围的日期。 3. **多语言支持**:支持多种语言切换,满足全球化网站的需求。 4. **自定义样式**:提供丰富的CSS样式定制选项,可以...
2. 日期范围限制:可以设置最大值和最小值,限制用户选择的日期范围。 3. 自定义样式:layDate允许开发者自定义日历的展示样式,通过CSS样式覆盖默认样式。 4. 事件监听:提供onchange、clear、done等事件回调,方便...
4. **日期范围限制**:开发者可以设置日期选择的最小值和最大值,防止用户选择超出范围的日期。 5. **日期计算与比较**:内置了日期计算功能,可以方便地进行日期之间的加减操作,同时支持日期的比较,便于在应用中...
- **日期范围限制**:设置可选择日期的最小值和最大值。 - **事件绑定**:在特定日期上绑定自定义事件,如会议或提醒。 - **日期输入验证**:当用户手动输入日期时,进行格式检查和有效性验证。 - **无障碍性**:...
- **日期范围限制**:设置可选日期的最小值和最大值。 - **移动设备适配**:优化触摸事件处理,确保在手机和平板上的可用性。 - **主题和定制**:提供预设主题或允许用户自定义颜色方案。 6. **库和框架集成**:...
2. 配置datePicker的属性,如样式、最小值、最大值等。 3. 设置`UIDatePicker`的代理(遵循`UIPickerViewDelegate`和`UIPickerViewDataSource`协议)以便处理用户交互。 4. 实现代理方法,如`datePicker(_:...
4. `minDate`和`maxDate`:设置可选日期的最小值和最大值。 5. `onpicking`:选择日期后的回调函数,可以在此处理选中的日期。 6. `skin`:更改皮肤样式,如`'wdate'`是默认样式,也可以自定义CSS类名。 ### 四、...
4. **日期范围限制**:开发者可以设定日期选择的最小值和最大值,防止用户选择超出范围的日期。 5. **日期计算功能**:提供增加、减少日期的功能,用户可以直接通过控件增加或减少天数、月数、年数。 6. **事件...
4. **日期范围限制**:可以设定日期选择的最小值和最大值,防止用户选择超出范围的日期。 5. **日期计算**:提供了加减日期的功能,用户可以直接在日历上进行日期的增加或减少操作。 6. **事件处理**:提供了丰富...
6. min/min: 设置日期选择的最小值和最大值。 7. trigger: 设置触发日期选择器的事件,默认为'focus',对于非输入框,默认事件为'click'。 8. show: 控制是否在初始化时立即显示,默认值为false。 9. position: 设置...
例如,你可以设定日期的最小值和最大值,限制用户可选的日期范围;设置日期格式,如"yyyy-MM-dd"或"yyyy/MM/dd"等;还可以开启或关闭时间选择功能,满足不同的时间精度需求。此外,该控件还支持多语言,可以方便地...
- 支持设置最小值、最大值。 - **事件** - `onSpin`: 数值变化时触发。 - **方法** - `$.fn.numberspinner('getValue')`: 获取当前值。 **4.12 TimeSpinner时间微调器** - **依赖** - 无。 - **用法** - 创建...
- 实现一个简单的计算器,支持加、减、乘、除、开方和幂运算。 #### 实现步骤 1. **界面初始化**:初始化LCD显示屏,清屏并点亮屏幕。 2. **数据输入**:提示用户输入两个数值。 3. **执行加法运算**:编写函数`add...
3. **日期范围限制**:开发者可以通过配置,设定日期选择的最小值和最大值,防止用户选择超出范围的日期,确保数据的有效性。 4. **自定义样式**:My97DatePicker允许用户通过CSS自定义日历的外观,包括颜色、字体...
- **选择范围限制**:允许设定可选日期的最小值和最大值,防止用户选择超出范围的日期。 - **格式化日期**:控件通常提供日期的多种展示格式,如“年-月-日”、“月/日/年”等,可以根据需求进行调整。 - **多...
比如,求和、平均值、最大值和最小值等统计运算。还可以使用图表功能将数据可视化,帮助理解复杂的数据关系。 至于演示文稿制作,MyOffice可能包含一个类似于PowerPoint的应用,让用户能够创建吸引人的幻灯片。用户...
开发者可以调整进度条的最小值、最大值和当前值,以反映实际的进度。在应用程序中,进度条可以提升用户体验,因为它为用户提供了操作反馈。 4. **日历控件(MonthCalendar Control)**:允许用户选择日期,通常用于...