jQuery UI Datepicker使用介绍

简介:

本博客使用Markdown编辑器编写

在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要。本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置。

1.jQuery UI介绍

jQuery UI是一套基于jQuery控件和动画效果Javascript类库。可以用来构建交互式的互联网应用程序。最新版本1.10.4.基于jQuery 1.6+
jQuery UI官方网站

2.jQuery UI Datepicker介绍

Datapicker是jQuery UI里面控件的一个控件。主要是给用户呈现日历,方便用户选择日期和时间。

Datepicker介绍

3.jQuery UI Datepciker示例

  • 步骤1.下载最新版jQuery UI.
  • 步骤2 引入下面三个文件,他们分别是:
    jquery.js
    jquery-ui.js
    jquery-ui.css
  • 步骤3 编写代码,下面配置一个很简单的datepicker控件
        $("#startdate").datepicker();

    程序运行结果如下:

    4.jQuery UI Datepicker显示中文

    可以datepicker控件显示出来了,但是全部是英文。所以我们需要对它进行修改,让它默认显示为中文。比如周一到周日显示为:“一、二、三、 四、五、六、日”这样的汉字。在使用datepicker之前,使用下面代码,将datepicker的语言设置为中文就好了。代码如下:

        jQuery(function($){
            $.datepicker.regional['zh-CN'] = {
                closeText: '关闭',
                prevText: '<上月',
                nextText: '下月>',
                currentText: '今天',
                monthNames: ['一月','二月','三月','四月','五月','六月',
                '七月','八月','九月','十月','十一月','十二月'],
                monthNamesShort: ['一','二','三','四','五','六',
                '七','八','九','十','十一','十二'],
                dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
                dayNamesMin: ['日','一','二','三','四','五','六'],
                weekHeader: '周',
                dateFormat: 'yy-mm-dd',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: '年'};
            $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
        });

    运行结果如下:


目录
相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1414 0
|
3月前
|
JavaScript
超炫酷UI效果的jQuery滑块插件
超炫酷UI效果的jQuery滑块插件
48 0
|
9月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
59 4
|
7月前
|
JavaScript
H-ui JQuery 给单选按纽赋值不生效
H-ui JQuery 给单选按纽赋值不生效
52 0
H-ui JQuery 给单选按纽赋值不生效
|
10月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
JavaScript
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
558 0
|
JavaScript
关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题
饿了么组件库的[DatePicker](https://element.eleme.cn/#/zh-CN/component/date-picker) 日期范围选择,
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
192 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
384 0

热门文章

最新文章

  • 1
    如何在React.js中使用Shadcn/UI
    77
  • 2
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    198
  • 3
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    21
  • 4
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    41
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    32
  • 6
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    40
  • 7
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    101
  • 8
    unity判断鼠标在不在UI上
    62
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    85
  • 10
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    164
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等