datepicker日历插件使用方法

最新推荐文章于 2024-04-24 10:07:30 发布
最新推荐文章于 2024-04-24 10:07:30 发布
阅读量400 收藏
点赞数
分类专栏： javascript/jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/group401/article/details/51424113
版权

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 >

group401
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
日期插件DataRangePicker的使用方法及相关设置
勾勒1991的博客
08-25 2428
DataRangePicker时一款非常好用的日期选择插件，可以根据需要自由地改变设置。下边是我的一个demo，简单易懂。插件代码可在网上下载或者下载我的demo代码 截止至2017-10-01 // 日历 $('#date-range2
JS日历插件 - My97 DatePicker用法详解
dengla6847的博客
06-04 801
一、简介 1. 注意事项 （1）My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名； （2）各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名 config.js 语言和皮肤配置文件,无需引入(4....
datepicker的使用方法
热门推荐
牧野流冰的博客
12-26 4万+
而非被划为
bootstrap-datepicker控件的使用及修改位置错误问题
weixin_43727933的博客
05-26 2937
bootstrap-datepicker控件的使用及修改位置错误问题 一、html自带的时间日期控件 html自带位时间日期控件，却没有format属性，它的显示格式是：“yyyy/mm/dd”有时候我们需要时间日期格式为“yyyy-mm-dd"，虽然HTML5中INPUT类型支持date并没有规定日历弹出框的实现和样式。所以，各浏览器根据自己的设计实现日历。对于日期格式也只有一种，这对于数据库输入有要求"yyyy-mm-dd"就无能为力了。在Input类型获得时间日期控件也非常简单只需输入date就可以显
JQuery日期插件datepicker的使用方法
11-24
JQuery是一款非常优秀的脚本框架，其丰富的控件使用起来也非常简单，配置非常灵活。下面做一个使用日期插件datapicker的例子。 1、下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后到官网http://jqueryui.com/download下载jquery-ui压缩包（可以选择喜欢的theme），里面就包含对datepicker的支持，当然您也可以下载datepicker，包括ui.core.js和ui.datepicker.js。 2、在HTML中引用下载下来的js文件： <!-- 引入 jQuery --> <
datepicker 使用 日期 格式
zyz0225的博客
05-21 5098
引入css和js文件 <link rel="stylesheet" href="<%=root %>/css/plugins/datapicker/datepicker3.css" /> <link rel="stylesheet" href="<%=root %>/css/bootstrap-datetimepicker.min.c...
时间选择控件datepicker.js增加月和年过滤
qq_31042143的博客
06-03 1067
datepicker作为月份选择或者年份选择时，onrender接口就没有作用了 可以修改datepicker.js文件，在渲染Year和Month时，增加接口，让用户HTML代码可以确定年份和月份规则 增加onRenderYear(year)和onRenderMonth(year, month)接口 修改渲染年份代码 修改渲染月份代码...
jquery datepicker日历控件支持多种颜色弹出日历
11-10
jQuery UI中的`datepicker`日历控件是一款广泛应用于网页交互设计中的日期选择工具。它以其易用性、灵活性和丰富的自定义选项而受到开发者们的喜爱。在这个特定的主题中，我们探讨的是如何使`datepicker`控件支持...
My97DatePicker日历控件
06-30
总的来说，My97DatePicker日历控件凭借其实用的功能、丰富的定制选项、良好的性能表现以及广泛的支持，成为了众多开发者在构建日期选择功能时的首选工具。无论是在网页开发还是在桌面应用中，My97DatePicker都能提供...
My97Datepicker日历控件
12-23
总结来说，My97Datepicker日历控件是前端开发中的一个强大工具，尤其对于Java开发者，它可以与后端无缝集成，提供优雅的日期选择体验。通过深入了解其配置选项和事件机制，开发者可以灵活地定制控件，以适应各种项目...
datepicker 日历插件（日期多选，月份多选，年份多选，季度多选）
12-27
在JavaScript中，有多种实现日期选择器的库，其中"datepicker 日历插件"是一个支持日期、月份、年份及季度多选功能的高效解决方案。这个插件能够极大地提升用户体验，尤其在需要用户输入日期范围或者进行时间区间...
My97DatePicker日历插件
01-20
通过调整CSS样式或使用预设的皮肤，开发者可以轻松地将日历插件融入到网页的整体风格中，提升网站的专业形象。皮肤文件通常包含CSS样式表和图像资源，用户可以根据提供的文件名列表中的"皮肤"目录来查看和修改这些...
推荐一款高效易用的日期选择器组件——`rui-datepicker`
gitblog_00087的博客
04-24 292
推荐一款高效易用的日期选择器组件——rui-datepicker 项目地址:https://gitcode.com/chenruifu/rui-datepicker 项目简介 在Web开发中，日期选择器是一个常见的交互元素，用于方便用户输入或选取日期。Rui Datepicker 是一个轻量级、高度可定制的JavaScript库，旨在提供简洁、优雅的日期选择体验。此项目由陈如飞开发并维护，它采用现...
JQuery UI - datepicker
D!eR 个人博客
12-22 3315
·概述日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。官方示例地址：http://jqueryui.com/demos/datepicker/同时，你还可以通过键盘控制它：page up/down - 上一月、下一月ctrl+page up/down - 上一年、下一年 ctrl+hom
日期插件datepicker的使用
大数据同盟会的博客
06-18 937
1、下载日期插件datepicker的moment.js、jquery-datePicker.min.js、index.css 2、编写日期插件样式 <div class="date_select_box_resouce" style="line-height: 80px;"> <div class="date_select_title_resouce">日期：</div> <div class="date_select_value_r
一款很好用的前端公、农历转换插件
weixin_30596735的博客
09-09 797
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimu...
vben-admin 时间选择器相关配置以及设置不可选择的时间
xiaofiy的博客
07-19 3964
vben admin 时间选择器配置
vben 的DatePicker日期组件弹出选择框被遮盖问题
中老年程序员
10-17 317
他的弹出框选择日期界面，会被遮盖了，在日期组件的componentProps属性里加上getPopupContainer: () => document.body就能解决问题。如上所示，我在vben 页面里面，PageWrapper 元素中引入了FormSchema，里面包含日期框，
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
最新发布
08-14
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
My97DatePicker 4.2使用教程：日历控件与多浏览器支持
"My97DatePicker是一个流行的JavaScript日期选择器插件，提供了丰富的日历控件功能，适用于各种浏览器，包括IE6.0+、Firefox2.0+、Opera9.5+和Safari3.0+。它具有高度自定义的特性，允许开发者根据需求调整样式和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值