采用jqueryUI创建日期选择器

转载

mb5fe94b3e552d9 2015-09-24 11:39:00

文章标签 jquery 日期选择器 html css 百度 文章分类 代码人生

该公司的项目使用的插件时间选择，百度很长一段时间。没有找到合适的，而且，他们在看了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>