• Datepicker控件


    jQuery UI(http://jqueryui.com/)是在jQuery基础上开发的开源JavaScript网页可视化控件库,其功能主要实现用户的基本界面、交互、动画、特效,以及可以更换主题等可视化控件。

    jQuery UI为基本界面控件建立了17种主题的样式,如果开发者需要特定的主题,可以使用ThemeRoller应用程序设置个性化的主题样式。

    要使用Datepicker日期选择控件,首先需要在页面<head>标签中引入相关的JavaScript类库,实现代码如下:

    <link type="text/css" href="http://www.cnblogs.com/Scripts/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
      <script type="text/javascript" src="http://www.cnblogs.com/Scripts/js/jquery-1.3.2.min.js"></script>
      <script type="text/javascript" src="http://www.cnblogs.com/Scripts/js/jquery-ui-1.7.2.custom.min.js"></script>

    对应的文件目录如下:

    我们要使用的是Datepicker控件

    所以要在<head>标签中定义该JavaScript方法

    如下:

    <script type="text/javascript">
          $(function() {
              $('#datepicker').datepicker({
                  inline: true
              });
          });
       </script>

    在需要使用该Datepicker控件的地方添加语句

    <div id="datepicker"></div>

    即可。

    效果如下

    如有需要可以在

    $('#datepicker').datepicker({
                  inline: true

              });

    语句块中添加额外的方法

    如:

    $('#datepicker').datepicker({
                  changeMonth:true,changeYear:true
          
              });

    将changeMonth和changeYear设置成true,可以再日期选择控件的工具栏中显示年和月的下拉列表框,便于用户设置不同年,月的日期,

    上述代码的运行效果如下:

  • 相关阅读:
    数据库设计三大范式
    常用正则表达式
    全国省市县无刷新多级关联菜单
    可选择Email和用户名登录的代码
    注册与登录界面的美化
    只能输入汉字js脚本
    js确认删除对话框
    同步文本框内容的JS代码
    网站变灰代码
    悬浮右侧可展开搜索的客服代码
  • 原文地址:https://www.cnblogs.com/nero/p/1597968.html
Copyright © 2020-2023  润新知