JQuery datepicker 用法详解

最新推荐文章于 2024-07-20 03:28:24 发布

zivzang

最新推荐文章于 2024-07-20 03:28:24 发布

阅读量2.3k

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/GUO_LOVER/article/details/51837129

版权

这篇博客详细介绍了jQuery UI的日期选择插件Datepicker，包括如何配置日期格式、语言、日期范围限制等功能。提供了丰富的示例代码，帮助开发者更好地理解和使用jQuery UI Datepicker。

摘要由CSDN通过智能技术生成

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。

示例代码：

     
     
     
      
      
      
       
       
       
      
      
      
     
     
     <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <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>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

一个不错的地址，用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/

DatePicker基本使用方法：

 
 <!DOCTYPE html> 

 
 <html> 

 
 <head> 

 
   
 <link href= 
 "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
  rel= 
 "stylesheet" 
  type= 
 "text/css" 
 /> 

最低0.47元/天解锁文章

zivzang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录