您的位置：首页 > Web前端 > JQuery

Jquery Datepicker使用

2012-07-05 18:37 369 查看

Jquery Datepicker使用
1、加载jquery的核心包和样式
2、写jquery代码监控input的focus事件
3、在代码中定义input并是id想对应
4、Jquery 官网：http://jqueryui.com/demos/datepicker/
5、百度搜索 jquery datepicker 视频有一个视频教程（不过是关于php的）
    http://v.youku.com/v_show/id_XMTk5MDEyOTky.html 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();
//默认的日期格式是 "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>

统计时间
<input id="datepicker_start" name="start_time" style="width: 170px"/>

至
<input id="datepicker_end" name="end_time" style="width: 170px" />

<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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery stylesheet input html function ui

相关文章推荐

新的分享

章节导航