Ext DateField 控件的日期选择控件DatePicker 布局 显示异常问题

最新推荐文章于 2014-12-01 15:33:16 发布
最新推荐文章于 2014-12-01 15:33:16 发布
阅读量4.5k 收藏 2
点赞数 1
分类专栏： Ext 文章标签： ext table html date class 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlcoy_1/article/details/5751637
版权

最近为实现客户的界面需求，在项目中引入了部分Ext控件。在使用日期选择控件时，发现打开日期选择面板后宽度超长，致使页面拉伸，不能正常。

 

分析：逐步分析代码，发现可能是系统中原来定义的默认table样式(默认width:100%)造成的，但此默认样式在以前的页面中广泛使用，不能修改。

 

解决：查找Ext样式文件，发现有部分样式注释为/* Date Picker */，估计是日期选择面板的样式相关，但尝试修改未成功，不多费力气了。

根据此注释，估计Ext中日期选择面板名为picker或DatePicker。

 

在ext-all.js中搜索picker，果然找到Ext.DatePicker，其代码中有DatePicker的HTML代码

其中第一句为<table cellspacing="0">

 

在CSS文件中为DatePicker新定义一个样式

.ExtDatePickerTable{width:30}（宽度设为一个小点的的数字即可，DatePicker里用图片填充，宽度不足会自动撑大）

将上面Html改为<table class="ExtDatePickerTable" cellspacing="0">

 

重新打开测试页面，问题解决

 

zlcoy_1
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Ext DateField控件 - 只选择年月
07-29
NULL 博文链接：https://newlethe.iteye.com/blog/814634
el-date-picker默认日期区间
anny_mei的博客
11-10 1015
在搜索部分引用 <el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-
extDatePicker
11-02
继承 Ext日历控件 支持全选 反选 清除等功能
Ext学习之6_组件_DatePicker
dengyulong的专栏
06-22 169
Ext.namespace("com.deng"); /** * 日期选择器Ext.DatePicker */ Ext.onReady(function(){ var dp = new Ext.DatePicker({ renderTo: Ext.getBody(), minDate: Date.parseDate("2009-01-01","Y-m-d"), ...
Ext.DatePicker yearmonth
07-09
将Ext.DatePicker年份调到左边，月份调到右边 http://blog.csdn.net/loocao/archive/2010/07/09/5724491.aspx
EXTJS日期时间选择控件（精确到秒）
hwak的专栏
10-11 431
一。一些废话 近日来，有几个项目用到了EXTJS作为Web前端。也看到了一些童鞋苦苦在网上寻觅可以选择时间的控件，由于EXTJS版本差异较大，利用官方3.2的Demo制作了一个可以选择到秒的时间控件，该控件只能够用于ExtJs2.2以上的版本。经过测试ExtJs2.02版本不适用该控件，如果你还在使用2.02这个版本或者更老，请绕道。废话不说了，看代码： 二。文件明细： Spinner.js...
Ext.form.DateField在chrome、safari下显示异常的解决方法
zyjustin9的专栏
09-18 246
最近在用extjs的DateField控件的时候，总是出现时间空间显示的时候宽度占满了整个屏幕，后来发现这个extjs在chrome下面的一个bug。   解决方式一： 在js中添加一下语句   if(Ext.isChrome===true){ var chromeDatePickerCSS = ".x-date-picker {border-col...
Ext日期控件显示农历，及其周末高亮显示
08-08
先有两种实现方式，一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在高版本中使用，可参照例子重写相应源码的方法即可。
ext 时间控件带有时分秒的控件
02-21
描述中提到，EXT JS的原生日期控件不包含时分秒的选择，这意味着在标准的EXT JS DateField或DatePicker组件中，用户只能选择日期，无法设定具体的时间。为了解决这个问题，开发者可以创建一个自定义的EXT JS组件，...
为EXT写的月份选择控件
10-17
往往是需要修改源码的方法,如: 修改Ext.DatePicker使得Ext.form.DateField只选择年月 等,但是修改源码有个不好的地方,如果ext升级了,又需要改一次,很不方便.干脆,就重写了一个月份选择控件.使用接口和DateField类似,...
带时分秒的EXT日期控件
08-10
/** * 此组件为带时分秒的日期控件，在原DateTimeField修改 * 此功能较以前版本增加功能 * 1，在GRID中使用时，增加单元格处于编辑状态时的初始化此控件值 * 2，增加操作日选择器时初始化时分秒功能 * 3，增加点击时分秒控件时，带动Ext.DateTimePicker设置 * 4，增加时期时间选择器变动时的样式变化功能 * 5，解决GRID中使用时，同列同对象间值影响的问题 * 6，解决原组件，点击today按钮时，无法回到选择器当日界面的问题 */ 另外此控的时分秒用到spinnerField控件，所以需将spinnerField的js与此控件一并使用
解决datefield组件 日期选择框在IE8下显示不完整的问题
06-23
extjs中，经常会用到datefield组件控制用户对日期的操作，比如日志管理，需要开始时间、结束时间，但是IE8下日期选择框会显示不全，解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题，即开始时间不能大于结束时间。 代码首行注释中已经描述了哪几行解决显示问题，哪几行解决范围控制问题。
Ext2的日期组件只选择年月
03-18
4. **源码修改**：如果上述配置选项不能满足需求，可能需要查看 `DatePicker.js` 和 `DateField.js` 的源码，找到处理日期显示和选择的部分进行修改。 在实际应用中，开发者可能还会遇到兼容性问题，特别是对于旧...
extjs4.2选择两个月的日期控件
03-28
在这个例子中，"demo_uxmultimonth.js"可能包含了对EXTJS的DateField或DatePicker组件的扩展，增加了选择两个月份的能力。这可能涉及到了以下技术点： 1. **组件继承**：EXTJS支持面向对象编程，可以通过`Ext....
ext DateTime.js在ie下显示不全
taotao6086的专栏
09-30 162
问题： ext在使用DateTime.js的时候会出现在日期控件在ie下显示不完成。如图  少了底部的“今天按钮”。   解决方法： 在ext/ux/form/DateTime.js （我的是这个路径，根据自己的情况查找到DateTime.js文件）查找onRender方法，在方法里加入   var p = this.el.parent('div.x-layer'); ...
修改Ext.DatePicker使得Ext.form.DateField只选择年月
LightSun----让成功成为可能!
12-16 3756
在最近一个项目中用到了Ext,学到了很多新的东西，同时JS水平得到了大大的提升。项目中需要一个年月输入框，不带日期的，可是Ext本身不带这样的功能，没办法只能自己扩展。G了一下得到2篇文章http://www.javaeye.com/topic/105492http://blog.csdn.net/forgetdavi/archive/2007/09/07/1776079.aspx
Extjs的DatePicker与普通表单的Input文本框集成
老紫竹的专栏
02-23 8024
还处于实验阶段，运行效果如下里面使用的是标准的Form的Input,而不是 Ext.FormPanel如果你想在自己的表单里使用Ext的日期选择器，可以参考一下这个Ext的DatePicker与普通表单的Input文本框集成我这里也给出完整的代码，供喜爱Ext的朋友参考测试Extjs的DatePicker的单独使用 - JAVA世纪网
【转】ExtJS日历控件在chrome显示异常（布满整个屏幕）的解决办法
liuxi1024的专栏
12-01 225
解决办法： 一、在date-picker.css中加入控件的宽度185 .x-date-picker { border: 1px solid; border-top:0 none; position:relative; width: 185px; } 当然，date-picker.css需要被引入 二、 近在用extjs的DateField控件的时候，总是出现时间空间显示的...
ExtJs DatePicker 中文语言下显示不全问题
oSunnyo_Sun的专栏
04-07 251
ExtJs DatePicker控件，如果在中文语言环境下，显示不完全，显示长度不够，原因有两个地方。 1.月份集合中是：一月，二月，……十一月，十二月。 这样的话，十一月和十二月就会占用两行来显示，从而使得本来就不够长的显示面板变的更不够，以至于看不到确定和取消按钮。 2.汉字和其它文字的占用调度不一样，这样也是导致面板显示不完全的原因。 解决方法： 1.1找到ext-...
django 时间控件怎么只选择年月
最新发布
06-02
如果你只想在 Django 时间控件中选择年月，可以使用 `DateInput` 来限制它的显示格式。你可以自定义一个 `DateInput` 子类并设置 `format` 属性来实现这个功能。 以下是一个示例： ```python from django import forms class MonthYearWidget(forms.DateInput): input_type = 'month' format = '%Y-%m' class MyForm(forms.Form): my_date_field = forms.DateField(widget=MonthYearWidget) ``` 在这个示例中，我们定义了一个名为 `MonthYearWidget` 的子类，它继承自 `DateInput` 并设置了 `input_type` 为 `'month'`，这将只显示月份和年份。我们还设置 `format` 为 `%Y-%m`，这将指定日期的显示格式为年-月。 然后，我们在表单中使用 `my_date_field` 字段，并将其小部件设置为 `MonthYearWidget`。这将确保在表单中使用这个小部件时只显示年月。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值