Jquery Datepicker使用
费德宇
Jquery Datepicker使用
1、加载jquery的核心包和样式
2、写jquery代码监控input的focus事件
3、在代码中定义input并是id想对应
2、写jquery代码监控input的focus事件
3、在代码中定义input并是id想对应
6、简单示例：（注意这里在网上引用了全部的juquery代码，如果想下载下来，在官网选择样式然后下载压缩包，剪视频教程）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>userCount.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker_start").datepicker();
$("#datepicker_end").datepicker();
<html>
<head>
<title>userCount.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker_start").datepicker();
$("#datepicker_end").datepicker();
//默认的日期格式是 "mm/dd/yyyy"。改成"yyyy-mm-dd"的方法
//$("#datepicker_start").datepicker({dateFormat:'yy-mm-dd'});
// $("#datepicker_end").datepicker({dateFormat:'yy-mm-dd'});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div align="center">
<h2 align="center" >用户数统计</h2>
统计时间
// $("#datepicker_end").datepicker({dateFormat:'yy-mm-dd'});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div align="center">
<h2 align="center" >用户数统计</h2>
统计时间
<input id="datepicker_start" name="start_time" style="width: 170px"/>
至
至
<input id="datepicker_end" name="end_time" style="width: 170px" />
<hr/>
</div>
</body>
</html>
<hr/>
</div>
</body>
</html>
7、更多设置（简单实用以上就够了）
jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址： http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。
一个不错的地址，用来DIY jQuery UI界面效果的站点 http://jqueryui.com/themeroller/
类似资料：