Changing Date Format in ZK UI Calendar


The default Date Format of ZK UI Calendar is  (Day MM/d)" for example - Fri 07/2. However one of our customer wanted in (Day dd/MM/yy) format. If we want change default format of date in zk calendar, we have to make following code changes:

1. In calendar.zul file,

We have to include dateFormatter="@{win$composer.getDateFormatter}" attribute in calendars tag.Actually this field is optional.Whenever we
want specific kind of date format, then we have to include this field
also.The respected sample code is given below:

<?xml version="1.0" encoding="UTF-8"?>

...............

<zk>
<window id="win" border="none"
apply="org.adempiere.webui.Calendar.CalendarController"
use="org.adempiere.webui.Calendar.CalendarComponent" height="100%"
width="100%">
<style src="css/calendar.css"/>
<zscript>

......................

</zscript>

<calendars firstDayOfWeek="Sunday" timeZone="Australia=UTC+10:30"
model="@{win$composer.getCalendarModel}" dateFormatter="@{win
$composer.getDateFormatter}" mold="default" id="cal">

.............some toolbars............

</calendars>

...............................

</zk>

2. We have to implement DateFormatter interface into our own class.

In my code I have implemented DateFormatter interface into PMSDateFormatter class. Here in this class we have to mention our required date format in a variable,we have to implement one method.The sample is provided below:

public class PMSDateFormatter implements DateFormatter {

private String dateFormat = "EEE dd/MM/yy";
//Here we can mention our required date format.It will reflect in our ZK calendar. You can very well make this date format as configurable. Thus you may not need to change code - if someone wants date to be shown in some other format

private SimpleDateFormat df;

public String getCaptionByDate(Date date, Locale locale, TimeZone
timezone) {
if (df == null) {
df = new SimpleDateFormat(dateFormat, locale);
}

df.setTimeZone(timezone);
return df.format(date);

}

.............
...............
}

3. In CalendarController.java file,

we have to add one method.I provided that method below:

public class CalendarController extends GenericForwardComposer {

............Some code..........

public PMSDateFormatter getDateFormatter() {
PMSDateFormatter pmsDf = new PMSDateFormatter();
cal.setDateFormatter(pmsDf);
return pmsDf;
}
.........some code......

}

4. In CalendarComponent.java file,

We have to add below code:

public class CalendarComponent extends Window {

public void loadProjectEvents() {

.....................

Calendars calc;
PMSDateFormatter dateFormat = new PMSDateFormatter();
calc.setDateFormatter(dateFormat);

}

public void loadClientEvents() {

........................

Calendars calc;
PMSDateFormatter dateFormat = new PMSDateFormatter();
calc.setDateFormatter(dateFormat);

}

}



Tagged with: , , , , , ,
Posted in ADempiere
2 comments on “Changing Date Format in ZK UI Calendar
  1. Hello. Are you still working on ZK ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Recent Publication
%d bloggers like this: