搜服网日历控件

本控件是由北京搜服科技有限公司之搜服网团队为搜服网项目而研发。

设计样式部分取材于17素材网已有控件。浏览器兼容性良好，可完全自定义控件颜色以和自己的网站色调匹配。

注：此控件是基于1.9的jquery版本，如果你的项目jquery版本升级到1.9有很大困难，可联系我。我会看情况出一个低版本的。

样式(Style)


红色(默认颜色) $("#lwj").LWJDate({
Style:'red'
});
绿色 $("#lwj").LWJDate({
Style:'green'
});
蓝色 $("#lwj").LWJDate({
Style:'blue'
});
黄色 $("#lwj").LWJDate({
Style:'yello'
});
黑色 $("#lwj").LWJDate({
Style:'black'
});
1:给自己的样式取名。（假如你取名为：purple ）

2:找到本控件样式文件 LWJDatePicker.css

3:复制下面的样式粘贴到记事本：

.lwjdate-red .lwjdate-head,.lwjdate-red .lwjdate-dayselect,.lwjdate-red .lwjdate-button-box,.lwjdate-red .select-month,.lwjdate-red .select-year { background-color:#ff3a89; }
.lwjdate-red .lwjdate-month-item,.lwjdate-red .lwjdate-year-item { color:#ff3a89; }
.lwjdate-red .lwjdate-month-item:hover,.lwjdate-red .lwjdate-year-item:hover { background:#ff3a89; color:#ffffff; }

4:将为red的样式名red这个部分换成你的样式名purple。

5:将为红色的颜色值#ff3a89换成你想要的颜色。下面以紫色 #fc0fe8 为你。

6:最后你的样式应为：

.lwjdate-purple .lwjdate-head,.lwjdate-purple .lwjdate-dayselect,.lwjdate-purple .lwjdate-button-box,.lwjdate-purple .select-month,.lwjdate-red .select-year { background-color:#fc0fe8; }
.lwjdate-purple .lwjdate-month-item,.lwjdate-purple .lwjdate-year-item { color:#fc0fe8; }
.lwjdate-purple .lwjdate-month-item:hover,.lwjdate-red .lwjdate-year-item:hover { background:#fc0fe8; color:#ffffff; }

7：如何你打算一直使用你自定义的样式，你可以将你得到的样式加入本控件样式文件 LWJDatePicker.css 中。如果只在一处使用可将样式加在当前页面。
如本例

触发事件(Event)


左键单击(click) $("#lwj").LWJDate({
Event:'click'
});
文本框聚焦(focus) $("#lwj").LWJDate({
Event:'focus'
});
鼠标移入(mouseover) $("#lwj").LWJDate({
Event:'mouseover'
});

日期格式(DateFormat)


2013-10-1(默认) $("#lwj").LWJDate({
DateFormat:'yyyy-MM-dd'
});
2013/10/1 $("#lwj").LWJDate({
DateFormat:'yyyy/MM/dd'
});
2013年10月1日 $("#lwj").LWJDate({
DateFormat:'yyyy年MM月dd日'
});
10-1（只有月日） $("#lwj").LWJDate({
DateFormat:'MM-dd'
});
1（只有天） $("#lwj").LWJDate({
DateFormat:'dd'
});

距元素左下角的相对位置(Left Top)


(默认) $("#lwj").LWJDate({
Left:0,
Top: 8, });
调到合适自己 $("#lwj").LWJDate({
Left:30,
Top: 40, });

是否必然要点击确认键（IsNeedClickOk）


否(默认) $("#lwj").LWJDate({
IsNeedClickOk:false
});
是 $("#lwj").LWJDate({
IsNeedClickOk:true
});

限制能选择日期的最大与最小值（MaxDay MinDay）


不限(默认) $("#lwj").LWJDate({
});
限定最大为今天 $("#lwj").LWJDate({
MaxDay:'today'
});
限定最大为2013-12-21 $("#lwj").LWJDate({
MaxDay:'2013-12-1'
});
限定最小为今天 $("#lwj").LWJDate({
MinDay:'today'
});
限定最小为2013-12-5 $("#lwj").LWJDate({
MinDay:'2013-12-5'
});
限定最小与最大 $("#lwj").LWJDate({
MinDay:'2013-12-5',
MaxDay:'2013-12-28',
});

显示动画（Animate）


无动画(默认) $("#lwj").LWJDate({
Animate:0
});
滑出滑入 $("#lwj").LWJDate({
Animate:1
});
渐入渐出 $("#lwj").LWJDate({
Animate:2
});

回调函数（CallBack）


回调函数，弹出选择的日期 $("#callback1").LWJDate({
CallBack:function(date){
alert(date);
},
IsNeedClickOk:true
});

使用本控件的三种方式


通过元素的扩展方法 $("#howuser").LWJDate({});
通过函数 onclick="javascript:
LWJDate(this)"
通过识别class class="ldate"
使用函数和class时 如何使用参数
lref="{Style:'green',
IsNeedClickOk'true'}"

给元素添加一个lref的元素,把参数以字符串的形式写在后面