[liferay6.2]input-date日期控件

时间：2024-02-15 13:25:02

input-date日期控件

liferay6.2中默认提供了一个简单的日期控件input-date，调用代码片段如下：

<%
    Calendar calendar = Calendar.getInstance();
    int nf = calendar.get(calendar.YEAR);
    int month = calendar.get(calendar.MONTH);
    int day = calendar.get(calendar.DAY_OF_MONTH);
%>
 
<aui:field-wrapper name="开始时间">
    <liferay-ui:input-date name="kssj" yearValue="<%=nf%>"
        monthValue="<%=month%>" dayValue="<%=day%>" />
</aui:field-wrapper>

日期控件截图如下：

应用存在的问题

 

控件界面比较简洁，但是应用起来我们就会发现存在两个问题：

1、上下月份切换不方便，虽然鼠标移动到顶部左右两端会变成手型形式，点击可以切换月份，但是没有显示很不直观

2、中文国际化不彻底，月份中文显示，但是星期几却是英文显示

经过研究，终于得出了解决办法。

在此感谢韩同学的帮助，让我学习到了data:image/png这么个神奇的东东,感兴趣的朋友也可以查看《小tip: base64:URL背景图片与web页面性能优化》这篇文章。

月份切换解决办法

隐藏的切换按钮样式：

.yui3-skin-sam .yui3-calendarnav-prevmonth, .yui3-skin-sam .yui3-calendarnav-nextmonth{
    background-image: url(http://localhost:8080/html/js/aui/calendarnavigator/assets/skins/sam/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAOCAYAAAA1+Nx+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKNJREFUeNpiYCAeSAPxUiiWZqAi4ATiaiD+DMT/ofgzVIyTUsMDgfghksHo+CFUDcnAAIgP4DEYHR+A6iEIhIB4GgkGo+NpUDMwADMQFwHxBwoMh+EPULOYYYZ7APFVKhiMjkFmejBBLWFjoD5gQ+dQO4iwOloUiOdQYPgcqBkDl0zRQRQRGS2KGkVFHRB/QzL4G1SMk5qpQg6psJMjVhNAgAEAH+qPqeiPEUsAAAAASUVORK5CYII=);
}

 

直接将url地址复制打开会跳转到控件所在页面，但是直接复制以data:image/png开头的base64图片地址却可以在浏览器中正常查看到切换图标。

因此判断应该是liferay的资源访问权限导致了base64图片url无法正常打开，liferay本身的机制暂且就不去深究了，我们选择强制替换css样式的方法更经济地解决这个问题，引入以下CSS代码即可。

.yui3-skin-sam .yui3-calendarnav-prevmonth, .yui3-skin-sam .yui3-calendarnav-nextmonth{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAOCAYAAAA1+Nx+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKNJREFUeNpiYCAeSAPxUiiWZqAi4ATiaiD+DMT/ofgzVIyTUsMDgfghksHo+CFUDcnAAIgP4DEYHR+A6iEIhIB4GgkGo+NpUDMwADMQFwHxBwoMh+EPULOYYYZ7APFVKhiMjkFmejBBLWFjoD5gQ+dQO4iwOloUiOdQYPgcqBkDl0zRQRQRGS2KGkVFHRB/QzL4G1SMk5qpQg6psJMjVhNAgAEAH+qPqeiPEUsAAAAASUVORK5CYII=) !important;
}
 
.yui3-skin-sam .yui3-calendarnav-prevmonth:hover, .yui3-skin-sam .yui3-calendarnav-nextmonth:hover{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAOCAYAAAA1+Nx+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPpJREFUeNpi/P//PwMxQD9jszSQ6oJyyy7O8H1KjD5GQhYADeYEUkVAXAHEPFDhL0DcAcR9QIu+k20B0PBAIDUBiOVwKHkExAVAS9aTZAHQYAOowfYMxIGDUIsu4LUAaLAQkGoB4kwG8sB0IK4BWvQOxQKgwcxAdj4Q1wExPwNl4CMQNwHxRKBFfxn10jd5ADm9QKzFQF1wDYiLmaAcNgbqA7CZTEBv7ADS2iDboN5joEIQgczSBpmNHsmiQKodiJPJNHwuEFcCDX49MMkUi0VRUB/hy2ggFy+jtKgohRYVnFDh79CiopuiogLNIjmobxigrn5EjD6AAAMAok9vhfHG8wQAAAAASUVORK5CYII=) !important;
}

 

星期国际化问题的解决办法

在liferay-portal-6.2-ce-ga2\tomcat-7.0.42\webapps\ROOT\html\js\aui\calendar-base\lang文件夹中，打开calendar-base.js，替换成以下代码，然后重启tomcat即可。

YUI.add("lang/calendar-base",function(e){e.Intl.add("calendar-base","",{very_short_weekdays:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"],first_weekday:1,weekends:[0,6]})},"patched-v3.11.0");

 

其中:

very_short_weekdays：表示星期的短名称，[“\u65e5″,”\u4e00″,”\u4e8c”,”\u4e09″,”\u56db”,”\u4e94″,”\u516d”]就是[“日”,”一”,”二”,”三”,”四”,”五”,”六”]的ISO-8859-1编码。

first_weekday：表示一周从周几开始，默认0标识从是周日开始，这里我们改成了1，表示从周一开始。

修改的后的样式

 

相关文章