`

JqueryEasyUI的datebox插件日期格式的修改

阅读更多

默认日期为3/23/2011  改为2010-03-23等

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
 <script>
  $('#dd').datebox({
  closeText:'关闭',
  formatter:function(date){
   var y = date.getFullYear();
   var m = date.getMonth()+1;
   var d = date.getDate();
   var h = date.getHours();
   var M = date.getMinutes();
   var s = date.getSeconds();
   function formatNumber(value){
    return (value < 10 ? '0' : '') + value;
   }
   alert(formatNumber(h));
   return y+'-'+m+'-'+d+' '+ formatNumber(h)+':'+formatNumber(M)+':'+formatNumber(s);
  },
  parser:function(s){
   var t = Date.parse(s);
   if (!isNaN(t)){
    return new Date(t);
   } else {
    return new Date();
   }
  }
 });
 </script>
</head>
<body>
 <h1>DateBox</h1>
 <div style="margin-bottom:10px;">
  <a href="#" onclick="disable()">disable</a>
  <a href="#" onclick="enable()">enable</a>
 </div>
 <input id="dd" class="easyui-datetimebox" value="3/23/2010 23:10:10" required="true"></input>
</body>
</html>

datebox有以下属性

currentText 看名字就知道意思了即当前按钮显示的文本内容 默认为today

closeText  关闭按钮显示的文本内容 默认是close

disabled  插件是否有用

formatter  即文本框中日期显示的格式,改属性是一个函数,解释一个date的参数

parser 看名知意解析日期字符串成日期类型

 

NameTypeDescriptionDefault
currentText string The text to display for the current day button. Today
closeText string The text to display for the close button. Close
disabled boolean When true to disable the field. false
formatter function A function to format the date, the function take a 'date' parameter and return a string value.
parser function A function to parse a date string, the function take a 'date' string and return a date value.
0
6
分享到:
评论

相关推荐

    jquery easyui及教程

    1. **组件使用**:了解如面板(panel)、表格(datagrid)、下拉框(combobox)、日期选择器(datebox)等主要组件的基本用法,以及它们的配置选项。 2. **数据绑定**:学会如何将后台数据与 EasyUI 组件结合,例如...

    jquery easyUI

    jQuery EasyUI 提供了一系列表单组件,如复选框(checkbox)、单选按钮(radio)、日期选择器(datebox)等,方便创建和验证表单。 ### 3. 主题系统 jQuery EasyUI 支持多主题,开发者可以通过修改或自定义 CSS ...

    jQuery EasyUI jquery-easyui-1.5.5.6

    8. `plugins`目录:这里可能包含jQuery EasyUI的扩展插件,如日期选择器(datebox)、时间选择器(timespinner)等。 9. `locale`目录:包含不同语言的本地化文件,使得jQuery EasyUI可以支持多语言环境。 10. `...

    给easyui datebox扩展一个清空的实例

    EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的组件,如 Dialog、Grid 和 Datebox,用于构建富客户端界面。Datebox 是 EasyUI 中用于输入日期的控件,它提供了日历面板供用户选择日期。 首先,我们...

    jquery-easyui demo

    - jQuery EasyUI 提供了多种预设主题,如 "default"、"gray" 等,可以通过更改 CSS 文件轻松改变整个应用的外观风格。 3. **数据绑定与异步通信**: - 使用 `datagrid` 或 `combobox` 等组件时,可以方便地与后台...

    李炎恢jQuery EasyUI讲义代码.zip

    5. 插件和扩展:除了内置组件,社区还开发了许多插件,如日期选择器(datebox)、时间选择器(timespinner)、树网格(treegrid)等,这些扩展增强了EasyUI的功能。学习如何引入和使用这些插件能提升应用的用户体验...

    李炎恢jQuery EasyUI讲义代码

    - **日期选择器**: `&lt;input class="easyui-datebox" ... /&gt;` #### 4. **布局与容器** - **面板**: `&lt;div class="easyui-panel" ... &gt;` - 可嵌套其他 UI 组件,支持拖拽和折叠等功能。 - **选项卡**: `...

    最新jquery easyui Demo

    1. **组件的使用**:Demo中包含了各种组件的实例,如对话框(dialog)、数据网格(datagrid)、下拉列表(combobox)、日期选择器(datebox)等。通过这些例子,你可以了解如何引入并初始化组件,以及如何配置它们的...

    JQuery EasyUI 学习笔记珍藏版

    3. **与jQuery插件的协同**:了解如何在jQuery EasyUI基础上扩展或集成其他jQuery插件,丰富功能。 通过深入学习和实践这些知识点,你将能够熟练地使用jQuery EasyUI构建功能丰富的Web应用程序,实现类似ExtJS的...

    Jquery easyui 1.2.5 官方原版API

    - **其他组件**:包括布局(Layout)、树形控件(Tree)、下拉选择框(ComboBox)、日期选择器(DateBox)等,丰富了Web应用的交互体验。 5. **数据绑定与Ajax** - **Json数据**:EasyUI与JSON格式的数据源配合良好,通过...

    jquery easyui 帮助文档

    6. **插件扩展**:EasyUI社区提供了许多第三方插件,如日期选择器(datebox)、树形菜单(treegrid)等,这些插件进一步丰富了框架的功能。 7. **兼容性和性能优化**:EasyUI兼容大部分现代浏览器,包括Chrome、...

    jQuery EasyUI 1.4 版 API 中文版

    14. **插件扩展**:EasyUI允许开发者根据需求自定义组件和功能,通过编写jQuery插件实现。 15. **主题系统**:提供多种预设主题,可以通过CSS文件轻松更改页面风格。 这个API中文版详细解释了每个组件的使用方法、...

    jquery easyui 中文文档

    DateBox 是一个用于输入和选择日期的组件,它结合了文本框和日历插件的功能,使得用户能够方便地输入或选择日期。 **实例** ```html &lt;input id="d1" class="easyui-datebox" data-options="formatter:...

    jquery easyui 实例

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的插件和组件,使得开发者可以快速构建具有专业界面和交互的Web应用。这个压缩包包含了一些关键文件和一个名为 "demo" 的目录,用于展示jQuery EasyUI的...

    jQuery EasyUI 1.5 版 API 中文版 (Made By Richie696)

    6. **插件扩展**:除了内置组件外,jQuery EasyUI 社区还提供了许多第三方插件,如日期选择器(`datebox`)、时间选择器(`timespinner`)等,这些插件进一步丰富了功能库。 7. **API理解**:Richie696 制作的中文...

    jQuery EasyUI Demo 官方实例

    5. **插件扩展**:除了内置组件,EasyUI 社区还提供了许多第三方插件,如日期选择器(datebox)、时间选择器(timespinner)等,进一步丰富了功能。 6. **主题系统**:EasyUI 支持多主题切换,用户可以轻松地更改...

    jQuery EasyUI 1.5 版 API 中文版

    - **日期选择器(DateBox)**:提供日期选择功能,有多种模式,如日期、日期时间等。 - **下拉选择框(ComboBox)**:组合框,包含下拉列表,可用于搜索和选择。 - **进度条(ProgressBar)**:展示任务进度,增强用户...

    jquery-easyui-1.3.4 api

    在jQuery EasyUI 1.3.4的API中,我们可以找到如对话框(dialog)、表格(datagrid)、下拉菜单(combobox)、日期选择器(datebox)等常见UI组件。这些组件都有丰富的配置选项和API接口,可以进行高度定制,满足不同...

    jquery-easyui-1.6.10

    在`plugins`目录下,存放着EasyUI的各种可扩展插件,如日期选择器(datebox)、时间选择器(timespinner)等,这些插件极大地丰富了EasyUI的功能,让开发者可以构建更加灵活多样的用户界面。 `locale`目录则包含...

Global site tag (gtag.js) - Google Analytics