使用jqueryUI来制作一个日期选择器

最新推荐文章于 2020-07-28 15:52:10 发布

菜鸟刚入门

最新推荐文章于 2020-07-28 15:52:10 发布

阅读量1.4k

点赞数 1

分类专栏： PHP基础技术文章标签：插件 jquery ui 经验 yy datepicker

本文链接：https://blog.csdn.net/linongcheng/article/details/38921137

版权

PHP基础技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

公司的项目要用到时间选择器的一个插件，百度了很久，没有找到合适的，自己就看了下jqueryUI，自己整合了一个比较好的日期选择器，以便后面遇到同样的问题能够解决。

下面就贴出部分使用的代码，比较简单，但是很实用！！！

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery UI 日期选择器（Datepicker） - 默认功能</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/jquery-1.9.1.js"></script>
		<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
		<!-引入jqueryUI的相关文件-->
		<style>
			#draggable {
				width: 150px;
				height: 150px;
				padding: 0.5px;
				border: 1px solid #F00
			}
		</style>
		<script>
			$(function() {
				$("#datepicker").datepicker({
					showOtherMonths: true,
					selectOtherMonths: true,
					showButtonPanel: true,
					/*显示今天的日期的显示，以及关闭时间选择器*/
					changeMonth: true,
					/*显示选择其他月份*/
					changeYear: true,
					/*显示选择其他年份*/
					dateFormat: "yy - mm - dd" /*设置日期的显示格式*/ ,
					showWeek: true,/*显示一年中的第几周*/
					firstDay: 1
				})
			});
		</script>
	</head>
	<body>
		<p>日期：
			<input type="text" id="datepicker">
		</p>
	</body>

</html>

关于JqueryUI的datepicker选择器的其他部分属性可以通过下面的链接查看：

jQuery UI API - 日期选择器部件

菜鸟刚入门

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jqueryUI来制作一个日期选择器

公司的项目要用到时间选择器的一个插件，百度了很久，没有找到合适的，自己就看了下jqueryUI，自己整合了一个比较好的日期选择器，以便后面遇到同样的问题能够解决。下面就贴出部分使用的代码，比较简单，但是很实用！！！ jQuery UI 日期选择器（Datepicker） - 默认功能 #draggable { width:
复制链接

扫一扫