【分享】My97DatePicker与FineUI控件结合

Panda

    首先非常感谢三石大神为我们提供这么强大的控件。FineUI确实为我们开发人员提供了许多便利，至少对我们这些不擅长美工设计，而且也没有美工支持的人来说，FineUI为我们解决了界面设计这一大难题。如果说有美中不足的地方的话，应该就是现在FineUI中的日期控件。
    目前FineUI的日期控件只能选择日期，无法精确到时、分、秒，而报表统计中我们经常需要精确到时、分、秒（至少我做过的很多报表都有这方面的需求）。其实这点之前我看论坛上有其他水友提过在日期控件中增加时、分、秒的选择、跟My97DatePicker控件做整合，但是估计是考虑到与其他日期控件整合会涉及到版权的问题，所以三石大神也一直没有增加这个功能，虽然后来有增加TimePicker控件，但是感觉还是不够灵活。
    当然，必须肯定的一点是目前这个日期控件还是可以满足大部分人的需要的。而且目前在FineUI中使用My97DatePicker控件的方法：

1. 
   
2. <P><ext:ContentPanel ID="ContentPanel1" EnableBackgroundColor="true" ShowBorder="false" ShowHeader="false" runat="server">
   
3.        开始时间：</P>
   
4. <P>       <input type="text" class="Wdate" id="text1" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:00:00',readOnly:true})" runat="server" />
   
5. </ext:ContentPanel></P></SPAN></FONT>

复制代码

    虽然通过上面这种方法也是可以实现，但是这种实现方式会严重影响页面的整体风格，尤其是在使用FormRow控件进行布局的时候，时间控件是无法自适应的。之前我也是一直采用这种方式，然后通过CSS样式调整到与其他FineUI控件差不多，但看起来还是很不和谐。最近做一个项目时又采用这种方式，但是真的越看越觉得太丑，所以觉得尝试下看能不能通过ExtJs将My97DatePicker与TextBox结合起来（想法早就有，理论上是绝对可行的，只是之前小弟对ExtJs没什么研究，而且也比较懒，所以才一直没有动手做）。最后通过在网上找了一些ExtJs的方式，终于实现了这以功能：

    第一步当然是引用WdatePicker.js啦{:soso_e113:}

1. <script src="../My97DatePicker/WdatePicker.js" type="text/javascript"></script>

复制代码

第二步是定义用来存放My97DatePicker控件的文本框，其实与平时使用FineUI的TextBox 没区别

1. <ext:TextBox ID="TextBox1" Readonly="true" Label="开始时间" runat="server">
   
2. </ext:TextBox>

复制代码

第三步是最重要的，在页面</form>下方增加下面这段JS代码就可以实现这个功能了。

1. <script type="text/javascript">
   
2. var TB_DATE = '<%=TextBox1.ClientID %>';
   
3. 
   
4. // 页面第一个加载完毕后执行的函数
   
5. function onReady() {
   
6. 
   
7. //单击文本框时，显示日期控件
   
8. var DATE_OBJ = X(TB_DATE);
   
9. DATE_OBJ.on('focus', function(e) {
   
10. WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })
    
11. });
    
12. }
    
13. 
    
14. // 页面AJAX回发后执行的函数
    
15. function onAjaxReady() {
    
16. 
    
17. //单击文本框时，显示日期控件
    
18. var DATE_OBJ = X(TB_DATE);
    
19. DATE_OBJ.on('focus', function(e) {
    
20. WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })
    
21. });
    
22. }
    
23. 
    
24. </script>

复制代码

注意：1、必须加上onAjaxReady() 函数，否则在页面刷新（FineUI通常都是Ajax）后日期控件将失效。
              2、之前有发现过有某几个版本的FineUI的DLL不支持ExtJs，使用过程中如果页面报：“Ext未定义”的错误，可以尝试换其他版本的DLL

    以上是小弟在使用FineUI是的一些收获，这个也不是什么技术问题，可能论坛里有其他大神已经实现，甚至做得更好，这里仅分享给那些还没找到更好的方法或者跟我一样懒的水友。

    {:soso_e104:}{:soso_e104:}第一次发分享帖，有写的不好的地方希望各位水友多多包涵。

erp8@live.cn

谢谢你的无私分享!

Min

感谢 分享 ，先收藏了~~~~~~~~~~

kkleetom

学习了，谢谢分享

birdover

确实可行

Hanson

我在4.0版本，chrome中页面会死，在IE9正常使用。不知你是否有碰到此问题。

Panda

Hanson 发表于 2014-1-2 14:10
我在4.0版本，chrome中页面会死，在IE9正常使用。不知你是否有碰到此问题。

下午找时间测试下，4.0的没试过

Panda

Hanson 发表于 2014-1-2 14:10
我在4.0版本，chrome中页面会死，在IE9正常使用。不知你是否有碰到此问题。

刚刚测试了一下，4.0版本IE8、CHROME都不行，点击后没有加载日期框，但是页面不会死

最初的理想

不错..应该三石兄直接加上一个这样的控件在fineui。

wd844125365

我现在就去试试！ 楼主很棒！赞歌