EasyUI 中关于datetimebox赋值问题

最新推荐文章于 2020-10-10 15:35:13 发布
原创 最新推荐文章于 2020-10-10 15:35:13 发布 · 6.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了一个在使用 EasyUI 的 datetimebox 控件时遇到的问题：当尝试将 Oracle 数据库返回的时间字符串赋值给 datetimebox 时，由于时间格式中的空格数量不符导致值无法正确绑定。文章详细描述了问题的原因及解决方法。

近期一个项目用到了easyUI，在使用过程中，遇到了一些个人觉得值得记录的注意点，片段化，在此记录谨供个人自由回忆，不保证质量！

在form中导入数据时发现返回的值无法赋值给datetimebox，
$('#ID').val(str)；
$('#ID').datetimebox('setValue',str)
均无法绑定值，最终发现oracle返回时间格式问题：
to_char(t.updateDate,'mm/dd/yyyy hh24:mi:ss') ,
在yyyy和hh中间有2个空格，只能允许一个空格，很容易疏忽。
——细节决定成败！

easyUI中使用datatimebox选定开始日期时间后自动带出7天之后的结束日期时间
ydqie的博客
09-23 4098
easyUI中使用datatimebox选定开始日期时间后自动带出7天之后的结束日期时间
003-EasyUI框架
xiaogang1226的博客
10-08 851
一、基本操作；二、数组操作；三、树操作；四、走马灯案例
easyui datatimebox 取值和赋值
weixin_34235135的博客
01-19 378
1.取值 var time = $('.easyui-datetimebox').datetimebox('getValue'); 全部代码如下： <script type="text/javascript"> function seach(){ var time = $('.easyui-datetimebox').datetimebox('getValue'); ...
easyUI设置datetimebox的值
教官的博客
05-10 1149
//清空 $(’#start_data’).datetimebox(‘setValue’, ‘’); //赋值 $(’#start_data’).datetimebox(‘setValue’, ‘111’); //取值 var startData = $(’#start_data’).datetimebox(‘getValue’); ...
easyui datetimebox初始化赋值
略略略的博客
05-29 5279
默认显示今天0点到当前时间点 jsp <div id="tb" style="padding-left: 10px"> 开始时间: <input name="startTime" id="startTime" class="easyui-datetimebox" style="width:160px;heigh
easyui datetimebox setvalue 设置值
热门推荐
mingjie1212的博客
11-05 1万+
从官网上知道,设置datetimebox 的值的方式是setValue: 如下: setValue value Set the datetimebox value. Code example: $('#dt').datetimebox('setValue', '6/1/2012 12:30:56'); // set datetimebox value v
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
10-19
在这个特定的问题中，我们需要实现一个功能，即通过两个datetimebox选择的日期来计算它们之间的相隔天数，并根据这个天数来计算包干费用。以下是详细的实现步骤和知识点： 1. **datetimebox组件**：datetimebox是...
easyui textbox失去焦点事件及获取文本框的内容
01-20
我们可以通过在文本框的data-options中指定events属性来绑定blur事件，如：<input class="easyui-textbox" data-options="events:{blur:getStaffno}" id="staffno"name="staffno" value="${user.staffno}"/> ...
使用Easyui的控件后，val()方法获取不到值的解决方法和比较日期大小的js方法
lindiwo的博客
03-27 2486
最近博文写的有点多，每篇都是一两个知识点，其实就是笔记了，哎，有点对不起看文章的大家。如果有空，必定重新整理一下。 说一下这个问题，就是写js方法的时候，正常的 var str=$("#cehsi").val();获取不到值，而我的标签如下 正常情况下，class属性引用了easyui-datetimebox控件，所以按照官网的用法，要想获取到值，应该用getValue，同样设置值也可以
jQuery EasyUI中的日期控件DateBox修改方法
11-29
jQuery EasyUI中的日期控件DateBox很好用的，首先需要引入jquery文件，代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="css/easyui.css"> [removed][removed] <script type
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
08-31
本篇文章主要介绍了EasyUI修改DateBox和DateTimeBox的默认日期格式示例，具有一定的参考价值，有兴趣的可以了解一下。
easyui-textbox、easyui-datetimebox 使用名字name选择器（input[name=xxx]）赋值和取值
Atimynyc的博客
01-10 3520
easyui-textbox: &lt;input id="actSpecification" name="actSpecification" data-options="multiline:true" class="easyui-validatebox easyui-textbox" style="width: 710px;height: 65px;"&gt;  ea
EasyUI日期控件获值和赋值
weixin_30505485的博客
04-29 1228
一，获值 1.$("#id").datebox('getValue') 2.$("input[name='mydate']").val() 参考：http://www.cnblogs.com/iyangyuan/p/3358239.html 二，赋值（赋当前时间） //获取当前日期并格式化function getNowFormatDate() { var date = new Da...
datetimebox赋值或取值
weixin_30764883的博客
06-29 415
datetimebox赋值或取值 $('#j_dateStart').datebox('setValue', "");　　　　//赋予空值 $("#j_dateStart").datebox("getValue");　　　　//获取值 <input class="easyui-datetimebox" name="operDateStart" id="j_dateStart"...
EasyUI datetimebox控件动态改变下一个时间框值（datetimebox自定义赋值）
weixin_43273702的博客
10-10 597
EasyUI datetimebox控件动态改变下一个时间框值（datetimebox自定义赋值）开始:js代码：结果如图，选择计划开始时间，计划结束时间自动赋值，因为我的代码逻辑是给计划开始时间加50个小时，所以计划结束时间为加50小时之后的日期时间 开始: // 用户选择计划开始时间 <input class="easyui-datetimebox textbox-input" id="planBeginDate" name="planBeginDate" prompt="请选择计划开始时间" d
easyUI的datebox赋值以及取值，赋值不生效问题
qq_42027416的博客
08-02 3110
easyUI的datebox设定值以及取值1、时间戳格式化2、把格式化后的时间放入datebox中 1、时间戳格式化 时间格式处理按照下面时间框图片中显示的格式进行处理 function parsedate(value) { var date = new Date(value).format("yyyy-MM-dd"); return date; ...
jQuery EasyUI - DateTimeBox 日期时间框
De_Moivre的专栏
08-06 1276
扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。     依赖 datebox timespinner 用法 &lt;input id="dt" type="text"&gt;&lt;/input&gt; $('#dt').datetimebox({ showSec...
关于easyUI控件easyui-datetimebox的value值设置错误的解决办法
misstang1996的博客
10-25 2406
问题：在jsp页面的&lt;input/&gt;标签中使用easyUI时间控件easyui-datetimebox，直接在value处传入动态获取到的毫秒数转换成的时间格式时，不能正常显示时分秒。 转换后的值alert的图片：    页面显示的图片：（标红位置为使用了easyui-datetimebox的输入框）无法正常显示时分秒。  查看浏览器页面代码发现问题的所在：(动态传入的va...
给EasyUI的DateBox控件增加一个清空按钮
最新发布
06-10
<think>我们参考多个引用，特别是引用[2]和引用[3]提供了实现方法。核心思路是扩展datebox的buttons数组，在原有按钮基础上插入一个清空按钮，并设置其handler函数来清除日期值。具体步骤：1.获取datebox默认的buttons数组。2.在适当位置（通常是在第一个按钮后面）插入一个新的按钮对象，该按钮显示文本为“清空”，并定义其handler函数。3.在handler函数中，通过调用datebox的'clear'方法清空日期值，也可以选择调用'hidePanel'方法关闭日期面板（如引用[4]所示）。4.将修改后的buttons数组应用到datebox上。根据引用[3]的注意事项，如果在页面加载时需要初始化datebox的值，应确保在扩展之后进行赋值。下面给出两种实现方式：方式一：全局扩展（适用于所有datebox）如果希望所有的datebox都添加清空按钮，可以在全局扩展，如引用[4]所示。但是这种方式会修改默认设置，所有datebox都会生效。方式二：针对特定datebox扩展（如引用[2]和引用[3]所示）更常见的是对特定的datebox添加清空按钮，这样更加灵活。代码示例（针对特定datebox）：假设我们有两个datebox，id分别为"startTime"和"endTime"。首先，在HTML中定义datebox：```<inputid="startTime"name="startTime"class="easyui-datebox"><inputid="endTime"name="endTime"class="easyui-datebox">```然后，在JavaScript中，我们可以这样写：```$(function(){//扩展按钮数组varbuttons=$.extend([],$.fn.datebox.defaults.buttons);//获取默认按钮数组的副本//在第二个位置插入一个按钮（索引为1，即在第一个按钮后面）buttons.splice(1,0,{text:'清空',handler:function(target){//清空当前datebox的值$(target).datebox('clear');//可选：关闭日期面板$(target).datebox('hidePanel');}});//为特定的datebox应用修改后的按钮数组$('#startTime,#endTime').datebox({buttons:buttons});//注意：如果需要在页面加载时设置初始值，一定要在设置buttons之后进行//例如：//$('#startTime').datebox('setValue','2024-01-01');});```方式二改进（引用[3]的方式）：用一个数组存放需要扩展的datebox的id，然后循环设置。另外，引用[3]还提到一个注意点：如果自己扩展了datebox，同时要在页面加载时初始化赋值，那么赋值的操作必须放在扩展之后（即设置buttons之后），否则赋值会被覆盖。另外，也可以参考引用[4]的全局扩展方法（使用立即执行函数），但要注意这会影响所有的datebox。如果项目中大多数datebox都需要清空按钮，可以采用这种方式。全局扩展代码示例：```(function($){varbuttons=$.extend([],$.fn.datebox.defaults.buttons);buttons.splice(1,0,{text:'清空',handler:function(target){$(target).datebox('clear');$(target).datebox('hidePanel');}});$.extend($.fn.datebox.defaults,{buttons:buttons});})(jQuery);```总结：根据需求选择全局扩展或局部扩展。局部扩展更加灵活，而全局扩展则一劳永逸。注意事项：1.确保在页面加载完成后执行这些脚本。2.如果同时使用datetimebox，也有类似的方法，但是要注意datetimebox的默认按钮数组可能不同，同时clear方法同样适用。生成相关问题：1.如何为EasyUI的datetimebox添加清空按钮？2.如何自定义EasyUIdatebox的按钮位置和样式？3.为什么在扩展datebox后初始化赋值会失效？如何解决？</think> 为 EasyUI DateBox 控件添加清空按钮的实现方法如下： ### 实现原理 1. 扩展 DateBox 的按钮数组，插入自定义按钮 2. 在新按钮的点击事件中调用 `datebox('clear')` 清除日期 3. 使用 `datebox('hidePanel')` 关闭日期面板 --- ### 代码实现（推荐方式） ```javascript // 扩展DateBox的按钮数组 var buttons = $.extend([], $.fn.datebox.defaults.buttons); // 在第二个位置插入"清空"按钮（位置索引从0开始计算） buttons.splice(1, 0, { text: '清空', handler: function(target) { $(target).datebox('clear'); // 清除日期值 $(target).datebox('hidePanel'); // 关闭日期面板 } }); // 应用到所有DateBox控件 $('.easyui-datebox').datebox({ buttons: buttons, editable: false // 禁止手动输入 }); ``` --- ### 代码说明 1. **核心方法**： - `datebox('clear')` - 清除日期值 - `datebox('hidePanel')` - 关闭面板 2. **按钮位置**： - `splice(1, 0, ...)` 表示在原始按钮后添加清空按钮 - 原始按钮顺序：确定（0）、取消（1） 3. **应用方式**： - `$('.easyui-datebox')` 选择器匹配所有日期框 - `editable: false` 确保用户不能手动修改日期值 --- ### 注意事项 1. **执行时机**： ```javascript $(function(){ // 确保在DOM加载完成后执行 }); ``` 2. **初始化顺序**： ```javascript // 先扩展日期框功能 $('.easyui-datebox').datebox({ buttons: buttons }); // 后进行初始化赋值（必须在扩展之后执行） $('#yourDatebox').datebox('setValue', '2023-01-01'); ``` --- ### 效果展示 实现后日期框将包含三个按钮： ``` [确定] [清空] [取消] ``` 点击"清空"按钮后： 1. 日期值被清除（文本框变为空） 2. 日期面板自动关闭 3. 通过 `$('#id').datebox('getValue')` 获取的值为空字符串 [^1][^2][^3][^4]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值