datepicker日历插件使用方法
来源:互联网 发布:linux版本查看命令 编辑:程序博客网 时间:2024/05/26 09:56
1、下载jQuery核心文件就不用说了吧,下载地址http://jqueryui.com/download
2、在HTML中引用下载下来的js文件
3.在HTML中引入默认样式表文件,引入css文件
4
4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。
1
<
input
type
=
"text"
id
=
"selectDate
"
readonly
=
"readonly"
/>
5.编写js代码,实现最终效果。
1
2
3
$(document).ready(
function
() {
$(
'#selectDate'
).datepicker(); //
});
这里只是做了一个最基本的日期控件,我们还需要以中文显示,限制日期选择范围等需求,稍微修改js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<mce:script type=
"text/javascript"
><!--
//等待dom元素加载完毕.
$(
function
(){
$(
"#selectDate"
).datepicker({
//添加日期选择功能
numberOfMonths:1,
//显示几个月
showButtonPanel:
true
,
//是否显示按钮面板
dateFormat:
'yy-mm-dd'
,
//日期格式
clearText:
"清除"
,
//清除日期的按钮名称
closeText:
"关闭"
,
//关闭选择框的按钮名称
yearSuffix:
'年'
,
//年的后缀
showMonthAfterYear:
true
,
//是否把月放在年的后面
defaultDate:
'2011-03-10'
,
//默认日期
minDate:
'2011-03-05'
,
//最小日期
maxDate:
'2011-03-20'
,
//最大日期
monthNames: [
'一月'
,
'二月'
,
'三月'
,
'四月'
,
'五月'
,
'六月'
,
'七月'
,
'八月'
,
'九月'
,
'十月'
,
'十一月'
,
'十二月'
],
dayNames: [
'星期日'
,
'星期一'
,
'星期二'
,
'星期三'
,
'星期四'
,
'星期五'
,
'星期六'
],
dayNamesShort: [
'周日'
,
'周一'
,
'周二'
,
'周三'
,
'周四'
,
'周五'
,
'周六'
],
dayNamesMin: [
'日'
,
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
],
onSelect:
function
(selectedDate) {
//选择日期后执行的操作
alert(selectedDate);
}
});
});
// --></mce:script>
效果如下:
这里基本上就满足我们使用的需要了。datepicker控件默认是英文的,可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,可以增加一个js文件将中文配置都放在里面,每次使用直接引用即可,这里放在jquery.ui.datepicker-zh-CN.js中,内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(
function
($){
$.datepicker.regional[
'zh-CN'
] = {
closeText:
'关闭'
,
prevText:
'<上月'
,
nextText:
'下月>'
,
currentText:
'今天'
,
monthNames: [
'一月'
,
'二月'
,
'三月'
,
'四月'
,
'五月'
,
'六月'
,
'七月'
,
'八月'
,
'九月'
,
'十月'
,
'十一月'
,
'十二月'
],
monthNamesShort: [
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
,
'七'
,
'八'
,
'九'
,
'十'
,
'十一'
,
'十二'
],
dayNames: [
'星期日'
,
'星期一'
,
'星期二'
,
'星期三'
,
'星期四'
,
'星期五'
,
'星期六'
],
dayNamesShort: [
'周日'
,
'周一'
,
'周二'
,
'周三'
,
'周四'
,
'周五'
,
'周六'
],
dayNamesMin: [
'日'
,
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
],
weekHeader:
'周'
,
dateFormat:
'yy-mm-dd'
,
firstDay: 1,
isRTL:
false
,
showMonthAfterYear:
true
,
yearSuffix:
'年'
};
$.datepicker.setDefaults($.datepicker.regional[
'zh-CN'
]);
});
6.在页面中引入中文插件
1
2
<!-- 添加中文支持-->
<
mce:script
src
=
"js/jquery.ui.datepicker-zh-CN.js"
mce_src
=
"js/jquery.ui.datepicker-zh-CN.js"
type
=
"text/javascript"
></
mce:script
>
完整的页面代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
HTML
>
<
HEAD
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
TITLE
>日期控件datepicker</
TITLE
>
<!-- 引入 jQuery -->
<
mce:script
src
=
"js/jquery.1.4.2.js"
mce_src
=
"js/jquery.1.4.2.js"
type
=
"text/javascript"
></
mce:script
>
<!--添加datepicker支持-->
<
mce:script
src
=
"js/jquery.ui.core.js"
mce_src
=
"js/jquery.ui.core.js"
type
=
"text/javascript"
></
mce:script
>
<
mce:script
src
=
"js/jquery.ui.datepicker.js"
mce_src
=
"js/jquery.ui.datepicker.js"
type
=
"text/javascript"
></
mce:script
>
<!-- 或者引入jquery ui包,其中也包含对datepicker的支持
<mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>
-->
<!--引入样式css-->
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"css/jquery-ui-1.7.3.custom.css"
mce_href
=
"css/jquery-ui-1.7.3.custom.css"
/>
<!-- 添加中文支持-->
<
mce:script
src
=
"js/jquery.ui.datepicker-zh-CN.js"
mce_src
=
"js/jquery.ui.datepicker-zh-CN.js"
type
=
"text/javascript"
></
mce:script
>
<
mce:script
type
=
"text/javascript"
>
<!--
//等待dom元素加载完毕.
$(function(){
$("#selectDate").datepicker({//添加日期选择功能
numberOfMonths:1,//显示几个月
showButtonPanel:true,//是否显示按钮面板
dateFormat: 'yy-mm-dd',//日期格式
clearText:"清除",//清除日期的按钮名称
closeText:"关闭",//关闭选择框的按钮名称
yearSuffix: '年', //年的后缀
showMonthAfterYear:true,//是否把月放在年的后面
defaultDate:'2011-03-10',//默认日期
minDate:'2011-03-05',//最小日期
maxDate:'2011-03-20',//最大日期
//monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
//dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
//dayNamesMin: ['日','一','二','三','四','五','六'],
onSelect: function(selectedDate) {//选择日期后执行的操作
alert(selectedDate);
}
});
});
// -->
</
mce:script
>
</
HEAD
>
<
BODY
>
<
input
type
=
"text"
id
=
"selectDate"
readonly
=
"readonly"
/>
</
BODY
>
</
HTML
>
0 0
- datepicker日历插件使用方法
- jQuery.datePicker日历插件
- jquery日历datepicker的使用方法
- JQuery 日历datepicker插件 代码
- 如何使用日历插件datepicker
- 如何使用日历插件datepicker
- My97 DatePicker 主流日历空间基本使用方法
- JQuery插件datepicker的使用方法
- JqueryUI datepicker(日历)插件--实例选择日期
- jquery 日历、日期插件 datepicker应用源代码
- 日历插件jquery datepicker的使用
- 日历插件简单汉化—datepicker类型
- Foundation-datepicker.js日历插件文档
- Jquery UI的datepicker插件使用方法
- jQueryUI中Datepicker(日历)插件的介绍和使用
- jQueryUI中Datepicker(日历)插件的介绍和使用
- jQueryUI中Datepicker(日历)插件的介绍和使用
- jQueryUI中Datepicker(日历)插件的介绍和使用
- Linux Ubuntu PHP 运行 mkdir() Permission Denied 的原因
- 【Linux开发】linux设备驱动归纳总结(四):3.抢占和上下文切换
- jdbc的增删查改(mysql)
- 【Linux开发】linux设备驱动归纳总结(四):4.单处理器下的竞态和并发
- Linux环境下安装Nginx+Pcre+zlib+OpenSSL
- datepicker日历插件使用方法
- 项目2 - 职员有薪水了
- MJExtension 空值判断
- 【Linux开发】linux设备驱动归纳总结(四):5.多处理器下的竞态和并发
- CentOS7安装GNOME图形界面
- 在linux (CentOs7)上安装Postgres-xc
- 基于STM32F429-Discovery RTEMS 4.11的移植
- 第十一周——实现类中的运算符重载
- UVALive - 4264 Message (模拟)