在网页中经常会有输入日期来过滤列表结果、完成表单等一些功能，但是由于时间格式的多种多样，经常需要在输入框旁边注明输入格式，或者在程序中多次判断时间格式是否正确。这样带来了程序中对输入验证的臃肿和繁琐，较为流行的方式是使用一个类似于下图的一个日期选择框来实现时间的输入，既统一了格式也提升了用户体验。

         在网络上我们也能找到很多类似的下拉日历框，在这儿就不一一列举。本文根据动易SmartGov5.2系统为例制作一个日历下拉框。

         首先，我们要有一个可以实现以上界面的JavaScript UI类库。在本例系统中有一个自带的时间UI库，这个库在JSGovernmentDatePicker.js，如果不是SmartGov版本可以下载此类库并加以引用。此类库可以从文章最后下载，只要使用此标签的页面引用此类库即可，引用代码如下：

         一切准备就绪，现在开始我们的标签制作：

第一步、登陆后台à选择系统设置à标签模板管理à标签管理à添加标签

         输入以下信息：

         注意选择简单XSLT解析，这样才能保证我们对后面控件的参数进行定义。

第二步、设置标签参数

         定义输入框（即）的ID参数：

第三步、标签内容编辑

         设置好参数后我们就可以在编辑框中实现这个标签的行为和显示方式了，我们需要一个以及后面点击弹出日历的一个按钮：

         理解了标签的作用后，我们开始定义自己的标签，下面贴出代码：

     

     

      text

     

      inputtext

     

      font-size:9pt;height:15px;

     

      return showCalendar('','yyyy-MM-dd');

     

     

        Template/Default/Skin/images/Calendar.gif

      border-width:0px;cursor:pointer;vertical-align:middle;

     

      

 

第四步、粘贴上面的代码进去，点击“完成”按钮，大功告成了，到页面中调用以下试试，调用标签代码为：

   在需要调用的模板head中引用日历js：

         

         模板需要引用的地方调用标签：

{PE.Label id="日期输入框下拉日历" inputId="txtBox1" /}

 

注意：如果同一个页面中要多次调用此标签请确保每个标签中inputId参数值不相同。

 

JS类库下载：DatePicker.rar  下载后将js文件存放于网站根目录JS文件夹中。