[Liferay6.2]input-date Date control

Input-date Date Control

A simple date control input-date is provided by default in liferay6.2, and the calling code fragment is as follows:

<%    = 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= "Start Time" >    <liferay-ui:input-date name= "KSSJ" yearvalue= "<%=nf%>"         Monthvalue= "<%=month%>" dayvalue= "<%=day%>"/></aui:field-wrapper>

The date control is as follows:

Problems with Application

The control interface is relatively concise, but when applied we will find that there are two problems:

1, up and down the month switch inconvenient, although the mouse move to the top left and right ends will become hand form, click can switch month, but not show very not intuitive

2, Chinese internationalization is not complete, the month Chinese display, but the day of the week is in English display

After study, finally came to a solution.

In this thanks to the help of Han classmates, let me learn to data:image/png such a magical east, interested friends can also see "small Tip:base64:URL background picture and Web page performance optimization" this article.

Month Switch resolution

Hidden toggle Button Styles:

. 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=);}

Directly copying the URL address will jump to the page where the control is located, but copying the base64 image address that begins with Data:image/png can be viewed in the browser as a toggle icon.

Therefore, the judge should be Liferay resource access to the Base64 image URL can not open properly, liferay itself mechanism for the moment not to delve into, we choose to force the replacement of CSS style method to solve this problem more cost-effective, introduce the following CSS code.

. 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+ K20b0pbaidubiovwkhkexavas9atzahqyaoowfymxigduisu4luaalaqkgob4kwg8sb0ik4bwvqoxqkgwcxadj4q1wexpwnl4cmqnwhxrkbffxn10jd5adm9q kzfqf1wdyilmaacngbqa7cztebv7ads2idbon5joeiqgczsbpmnhsmiqkodijpjnhwuefccdx49mmkui0vrub/hy2ggfy+ jtkgohryvnfdh79ciopuioglnijmobxigrn5ejd6aaamaok9vhfhg8wqaaaaasuvork5cyii=)!important;}

Solutions to international problems of the week

In the Liferay-portal-6.2-ce-ga2\tomcat-7.0.42\webapps\root\html\js\aui\calendar-base\lang folder, Open Calendar-base.js, replace with the following code, and then restart 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");

which

Very_short_weekdays: Represents the short name of the week, ["\u65e5″," \u4e00″, "\u4e8c", "\u4e09″," "\u56db", "\u4e94″," "\u516d"] is ["Day", "one", "two", "three "," Four "," five "," six ", the Iso-8859-1 code.

First_weekday: Indicates a week from the beginning of the week, the default 0 logo starting from Sunday, here we changed to 1, indicating that starting from Monday.

Modified style of the post

[Liferay6.2]input-date Date control