`
baobeituping
  • 浏览: 1064644 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

jquery ui 的datepicker日期插件使用

阅读更多

首先是下载所需要的JS文件。
然后引入到项目中。

HTML页面:
<td>
            开始时间:<INPUT id="beginDate" type="text"/>
</td>
JS函数:
$("#beginDate").datepicker({ dateFormat: 'yy-mm-dd' });

但是这有个问题,原因是该插件是英文的,而且格式是:mm/dd/yy
转成中文格式的,并且设置格式:
首先将如下代码保存成UTF-8格式的JS文件:
jQuery(function($){
     $.datepicker.regional['zh-CN'] = {
        clearText: '清除',
        clearStatus: '清除已选日期',
        closeText: '关闭',
        closeStatus: '不改变当前选择',
        prevText: '<上月',
        prevStatus: '显示上月',
        prevBigText: '<<',
        prevBigStatus: '显示上一年',
        nextText: '下月>',
        nextStatus: '显示下月',
        nextBigText: '>>',
        nextBigStatus: '显示下一年',
        currentText: '今天',
        currentStatus: '显示本月',
        monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],
        monthStatus: '选择月份',
        yearStatus: '选择年份',
        weekHeader: '周',
        weekStatus: '年内周次',
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        dayStatus: '设置 DD 为一周起始',
        dateStatus: '选择 m月 d日, DD',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        initStatus: '请选择日期',
        isRTL: false};
        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
    });
   
 然后在项目中引用,然后设置格式:
 $("#beginDate").datepicker({ dateFormat: 'yy-mm-dd' });
 
 大功告成!

分享到:
评论

相关推荐

    jQuery UI Datepicker插件timepicker时分秒

    在Web开发中,日期和时间的选择常常是一项必不可少的功能,jQuery UI Datepicker插件是一个非常流行的选择工具,它为用户提供了直观、易于使用的日期选择界面。然而,Datepicker默认只支持日期选择,不包含时间选择...

    jQuery ui Datepicker日期插件

    jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...

    jquery ui datepicker all theme

    jQuery UI库中的Datepicker组件是此类功能的一个强大实现,它提供了丰富的功能和多样的主题,使得日期选择器既能满足功能需求,又能与网站设计无缝融合。本文将深入探讨jQuery UI Datepicker及其全主题,帮助开发者...

    jquery ui利用datepicker插件实现日期控件

    《jQuery UI中的Datepicker插件实现日期控件详解》 在网页开发中,日期选择控件是不可或缺的一部分,它能够方便用户输入或选择日期,提高交互体验。jQuery UI库提供了一个强大的Datepicker插件,使得创建这样的控件...

    jqueryui中插件Datepicker控件的使用

    **Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先需要确保页面已经加载了 jQuery 和 jQuery UI 的相关文件。 1. **引入...

    jquery-ui-1.10.3.custom.rar jquery 日期插件 带时间选择

    在给定的"jquery-ui-1.10.3.custom.rar"压缩包中,我们特别关注的是其内置的日期时间选择插件,这个功能强大且易于使用的工具极大地提升了用户在网页上的交互体验。 首先,jQuery UI 1.10.3 版本是该库的一个稳定...

    jquery.ui.datepicker.js

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

    jQuery Datepicker 日期选择插件

    它包含了Datepicker插件和其他组件的代码,通过引入此文件,我们可以使用jQuery UI中的所有功能。 对于日期选择器的本地化,`jquery.ui.datepicker-zh-CN.js`文件是中文语言包,它使得Datepicker可以显示中文日期...

    jquery datepicker 日期控件

    jQuery UI Datepicker是一款基于jQuery库的日期选择插件,它提供了丰富的自定义选项和多种语言支持,包括中文。Datepicker不仅在视觉上呈现出整洁的界面,还提供了一套完整的事件和方法,使得开发者能够轻松地集成到...

    jQuery UI Datepicker - Select a Date Rang

    jQuery UI Datepicker 是一款强大的、可定制的日期选择插件,它提供了丰富的功能和友好的用户体验。在中文网站中,本地化支持使得这款插件成为日期选择的首选工具。本文将深入探讨如何使用 jQuery UI Datepicker ...

    jQuery插件datepicker的使用详解.pdf

    其中,datepicker插件是jQuery UI中的一个核心组件,它解决了网页中日期输入框的诸多问题,如输入格式、合法性验证等,并且提供了优秀的用户体验和高度定制的可能性。 在传统的日期输入方式中,通常使用`...

    jQuery datepicker 日期选择器 中文汉化版 开始日期结束日期

    jQuery UI的日期选择器(jQuery datepicker)是一个广泛使用的组件,尤其在网页表单中用于输入日期时。这个组件提供了一个优雅、用户友好的界面,允许用户通过日历视图来选择日期,而不是手动输入。在中文环境中,...

    jQueryUI datepicker

    jQuery UI Datepicker是一款广泛使用的JavaScript库,它是jQuery UI框架的一部分,专门用于添加日期选择功能到网页上。这个插件提供了一种优雅的方式来显示和选择日期,可以与timepicker插件结合,形成一个完整的...

    jquery日期插件-datepicker

    jQuery UI中的DatePicker插件是一个强大的工具,它提供了丰富的自定义选项,使得日期选择功能既美观又实用。下面我们将深入探讨jQuery DatePicker插件的核心特性、用法以及常见配置。 一、DatePicker概述 jQuery ...

    jQuery ui-datepicker最好用的日历控件

    **jQuery UI Datepicker是最受欢迎的JavaScript日历插件之一,尤其在jQuery库的广泛使用下,它成为开发人员实现日期选择功能的首选工具。本文将深入探讨Datepicker控件的关键特性、使用方法以及如何与其他技术如Java...

    基于JQuery UI的datepicker二次开发 支持时分秒(带示例)

    这通常涉及到自定义扩展JQuery UI的datepicker插件。在这个案例中,我们可以使用名为`jquery-ym-datePlugin-0.1.js`的文件,这是一个针对日期插件的扩展,增加了时分秒的选择功能。该插件可能通过添加新的选项,如`...

    jquery mobile datepicker

    **jQuery Mobile Datepicker** 是一个专门用于移动设备的日期选择器插件,它扩展了标准的jQuery UI Datepicker,使其更适合在触摸屏设备上使用。这个插件在原生的日期选择器基础上增加了对移动环境的优化,如响应式...

    jquery.ui.datepicker增强版 支持时间输入

    总的来说,jQuery UI Datepicker增强版的日期时间选择功能是通过扩展原生的Datepicker插件,结合自定义的UI和事件处理来实现的。它提供了更丰富的用户交互体验,让日期和时间的选择更加便捷。理解和掌握这一增强功能...

    jquery datepicker 时分秒

    首先,为了实现`jQuery UI Datepicker`,你需要先从官方网站(https://jqueryui.com/datepicker/)下载最新的版本。`jquery-ui-1.8.16.custom.zip`这个文件名表明这是一个自定义构建的版本,可能包含了特定的功能集...

    jquery-ui插件

    - **Datepicker(日期选择器)**: 为输入字段提供一个日历控件,方便用户选择日期。 - **Tabs(标签页)**: 将内容分割成多个可切换的标签页。 - **Sortable(可排序)**: 可以使列表项或者表格行变得可拖拽排序。 -...

Global site tag (gtag.js) - Google Analytics