<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YmDatePlugin v1.1演示</title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" id="skin" href="css/jquery-ui-1.9.2.custom.min17.css" />
<style type="text/css">
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.describe,a,span{
font-size:12px;
text-align:right;
}
.redfont{
color:#F00;}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ym-datePlugin-0.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//默认功能
$("#demoText1").ymdateplugin();
//显示其他月
$("#demoText2").ymdateplugin({
showOtherMonths: true,//显示其他月
selectOtherMonths: true//是否可选
});
/*::注意：：
* showTimePanel和showButtonPanel只能配置一项true
*/
//显示今天/关闭
$("#demoText3").ymdateplugin({
showButtonPanel: true
});
//显示时间的选择
$("#demoText4").ymdateplugin({
showTimePanel: true
});
//DIV展示日历 选择某一天触发事件
$("#demoText5").ymdateplugin({
setSelectDay:function(dd,mm,yy){
// alert("您选择了："+yy+"年"+(mm+1)+"月"+dd+"日");
}
});
//下拉年月
$("#demoText6").ymdateplugin({
changeMonth: true,
changeYear: true
});
//显示多个月
$("#demoText7").ymdateplugin({
numberOfMonths: 3,
showButtonPanel: true
});
//限制可选
$("#demoText8").ymdateplugin({
minDate: -20,
maxDate: "+1M +10D"
});
//时间范围
$("#demoText9").ymdateplugin({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function(selectedDate) {
$("#demoText10").ymdateplugin("option", "minDate", selectedDate );
}
});
$("#demoText10").ymdateplugin({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$("#demoText9").ymdateplugin("option", "maxDate", selectedDate );
}
});
//星期序列
$("#demoText11").ymdateplugin({
showWeek: true,
firstDay: 1
});
//换肤
$("#skins").trigger("click");
$("#skins").click(function(){
$("#skins").trigger("change");
});
$("#skins").change(function(){
if($(this).val()>0){
$("#skin").attr("href","css/jquery-ui-1.9.2.custom.min"+$(this).val()+".css");
}else{
$("#skin").attr("href","");
}
});
});
</script>
</head>
<body>
<div style="width:600px;margin:0 auto;">
<h1>功能演示</h1>
<h2>v1.1 ::增加：皮肤20套</h2>
<span>更换皮肤:</span>
<select id="skins">
<option value="0">无皮肤</option>
<option value="1">高亮</option>
<option value="2">黑暗</option>
<option value="3">平滑</option>
<option value="4">开始</option>
<option value="5">微软</option>
<option value="6">阳光</option>
<option value="7">阴天</option>
<option value="8">青蛙</option>
<option value="9">轻盈</option>
<option value="10">蜂箱</option>
<option value="11">胡椒</option>
<option value="12">茄子</option>
<option value="13">库比蒂诺</option>
<option value="14">南街</option>
<option value="15">闪击</option>
<option value="16">人类</option>
<option value="17">hot sneaks</option>
<option value="18">excite-bike</option>
<option value="19">vader</option>
<option value="20">dot-luv</option>
</select>
<table border="1">
<tr>
<td class="describe">DIV展示日历:</td>
<td><div id="demoText5"></div></td>
</tr>
<tr>
<td class="describe">默认功能:</td>
<td><input type="text" id="demoText1" readonly="readonly" /></td>
</tr>
<tr>
<td class="describe">显示其他月:</td>
<td><input type="text" id="demoText2" readonly="readonly" /></td>
</tr>
<tr>
<td class="describe">显示今天/关闭:</td>
<td><input type="text" id="demoText3" readonly="readonly" /></td>
</tr>
<tr class="redfont">
<td class="describe">显示时间选择:</td>
<td><input type="text" id="demoText4" readonly="readonly" /></td>
</tr>
<tr>
<td class="describe">下拉年月:</td>
<td><input type="text" id="demoText6" readonly="readonly" /></td>
</tr>
<tr>
<td class="describe">显示多个月:</td>
<td><input type="text" id="demoText7" readonly="readonly" /></td>
</tr>
<tr>
<td class="describe">限制可选:</td>
<td><input type="text" id="demoText8" readonly="readonly" /></td>
</tr>
<tr>
<td class="describe">时间范围:</td>
<td>
<input type="text" id="demoText9" readonly="readonly" />To<br />
<input type="text" id="demoText10" readonly="readonly" />
</td>
</tr>
<tr>
<td class="describe">星期序列:</td>
<td><input type="text" id="demoText11" readonly="readonly" /></td>
</tr>
</table>
</div>
</body>
</html>
有24种颜色的日历，可以根据需要下载 （255个子文件） 
jquery-ui.css 33KB jquery-ui-1.9.2.custom.min8.css 15KB jquery-ui-1.9.2.custom.min14.css 15KB jquery-ui-1.9.2.custom.min11.css 15KB jquery-ui-1.9.2.custom.min13.css 15KB jquery-ui-1.9.2.custom.min1.css 15KB jquery-ui-1.9.2.custom.min12.css 15KB jquery-ui-1.9.2.custom.min6.css 15KB jquery-ui-1.9.2.custom.min5.css 15KB jquery-ui-1.9.2.custom.min16.css 15KB jquery-ui-1.9.2.custom.min17.css 15KB jquery-ui-1.9.2.custom.min18.css 15KB jquery-ui-1.9.2.custom.min10.css 15KB jquery-ui-1.9.2.custom.min4.css 15KB jquery-ui-1.9.2.custom.min15.css 15KB jquery-ui-1.9.2.custom.min2.css 15KB jquery-ui-1.9.2.custom.min7.css 15KB jquery-ui-1.9.2.custom.min9.css 15KB jquery-ui-1.9.2.custom.min20.css 15KB jquery-ui-1.9.2.custom.min3.css 15KB jquery-ui-1.9.2.custom.min19.css 15KB .gitignore 184B
index.html 5KB 可选界面颜色日历.iml 344B jquery-1.8.3.min.js 91KB jquery-ym-datePlugin-0.1.js 89KB
ui-bg_fine-grain_68_b83400_60x60.png 8KB ui-bg_fine-grain_65_654b24_60x60.png 7KB ui-icons_f7a50d_256x240.png 5KB ui-icons_f08000_256x240.png 5KB ui-icons_3d80b3_256x240.png 5KB ui-icons_f29a00_256x240.png 5KB ui-icons_e1e463_256x240.png 5KB ui-icons_fcd113_256x240.png 5KB ui-icons_808080_256x240.png 5KB ui-icons_5fa5e3_256x240.png 5KB ui-icons_a83300_256x240.png 5KB ui-icons_a8a3ae_256x240.png 5KB ui-icons_3572ac_256x240.png 5KB ui-icons_72a7cf_256x240.png 5KB ui-icons_f35f07_256x240.png 5KB ui-icons_b83400_256x240.png 5KB ui-icons_2694e8_256x240.png 5KB ui-icons_fbdb93_256x240.png 5KB ui-icons_ebccce_256x240.png 5KB ui-icons_c02669_256x240.png 5KB ui-icons_98d2fb_256x240.png 5KB ui-icons_e0fdff_256x240.png 5KB ui-icons_72b42d_256x240.png 5KB ui-bg_gloss-wave_50_6eac2c_500x100.png 5KB ui-bg_fine-grain_15_f7f3de_60x60.png 5KB ui-bg_gloss-wave_45_e14f1c_500x100.png 4KB ui-bg_fine-grain_15_eceadf_60x60.png 4KB ui-bg_fine-grain_10_eceadf_60x60.png 4KB ui-bg_gloss-wave_35_f6a828_500x100.png 4KB ui-icons_9ccdfc_256x240.png 4KB ui-icons_ed9f26_256x240.png 4KB ui-icons_fcdd4a_256x240.png 4KB ui-icons_8c291d_256x240.png 4KB ui-icons_eb990f_256x240.png 4KB ui-icons_734d99_256x240.png 4KB ui-icons_222222_256x240.png 4KB ui-icons_0078ae_256x240.png 4KB ui-icons_cccccc_256x240.png 4KB ui-icons_454545_256x240.png 4KB ui-icons_004276_256x240.png 4KB ui-icons_0a82eb_256x240.png 4KB ui-icons_ff7519_256x240.png 4KB ui-icons_ffeb33_256x240.png 4KB ui-icons_8DC262_256x240.png 4KB ui-icons_056b93_256x240.png 4KB ui-icons_c98000_256x240.png 4KB ui-icons_4eb305_256x240.png 4KB ui-icons_8d78a5_256x240.png 4KB ui-icons_00498f_256x240.png 4KB ui-icons_228ef1_256x240.png 4KB ui-icons_cd0a0a_256x240.png 4KB ui-icons_d19405_256x240.png 4KB ui-icons_fbc856_256x240.png 4KB ui-icons_c47a23_256x240.png 4KB ui-icons_ffd27a_256x240.png 4KB ui-icons_cb672b_256x240.png 4KB ui-icons_cc0000_256x240.png 4KB ui-icons_88a206_256x240.png 4KB ui-icons_217bc0_256x240.png 4KB ui-icons_888888_256x240.png 4KB ui-icons_6da8d5_256x240.png 4KB ui-icons_ff0084_256x240.png 4KB ui-icons_ffe180_256x240.png 4KB ui-icons_f9bd01_256x240.png 4KB ui-icons_70b2e1_256x240.png 4KB ui-icons_bd7b00_256x240.png 4KB ui-icons_0073ea_256x240.png 4KB ui-icons_aaaaaa_256x240.png 4KB ui-icons_999999_256x240.png 4KB ui-icons_d8e7f3_256x240.png 4KB ui-icons_469bdd_256x240.png 4KB ui-icons_666666_256x240.png 4KB ui-icons_eeeeee_256x240.png 4KB ui-icons_f5e175_256x240.png 4KB共 255 条
- 1
- 2
- 3
评论0