在开发中用到了jQuery-ui里的datepicker 日历控件,这就涉及到jQuery UI 源文件的使用,经过摸索,我分享下使用心得,其实也很简单啦
1、首先下载jQuery UI 我下载的是jquery-ui-1.12.0.zip 下载地址:http://jqueryui.com/download/
2、打开压缩包,包内文件有:
3、把这些文件全部放到你的工程下指定的文件夹,这里请注意,其实并不是全部都要放到工程下,但是我是懒人,不想区分哪些是必须的,哪些不是,
我举个例子 jquery-ui.min.js 是jquery-ui.js 压缩后的文件, 所有带min的都是压缩后的文件,所以他们是一样的。
4、在你需要使用jquery ui的文件里引入jquery-ui.min.js和jquery-ui.css ,这两个文件会自动去引用他们需要的文件,这就是要将解压后所以的文件都
放到项目下的原因。
5、我举个datepicker小例子,让大家看的更明白
说明下:我的jquery-1.8.2.min.js 在解压后的文件的上一层,本例的代码和解压后的文件在同一个文件下。
<!DOCTYPE html>
<html>
<head>
<title>WdatePicker</title>
<script type="text/javascript" src="../jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./jquery-ui.min.js"></script>
<link href="./jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeYear: true,
});
})
</script
<style type="text/css">
</style>
</head>
<body>
<h2 class="demoHeaders">Datepicker</h2>
<div >
日期:<input id="datepicker" value="" />
</div>
</body>
</html>