How to Change the Date Format of Calendar in Web Applications that Generated by PHPMaker 10.0.1

This is my first article that will inform you about the changes or anything regarding PHPMaker version 10. Yeah, there are lots of changes in version 10, and one of them is how easily we can change the Date format only for the certain Date or DateTime field in the specific table. I just found this trick about a few minutes ago, so I post it in here. I think you need to know this, too.

In PHPMaker 10, there is an additional .js file generated in order to change the Date format by simply using ew_CreateCalendar() javascript function that located in phpjs/ewcalendar.js file. As we have already known, PHPMaker uses jsCalendar extension in order to display the popup calendar. So, this function will create the calendar --- or in more detail the Date format --- based on three parameters. The first param is the Form ID, the second one is the Field ID, and the third one is the Date format.

This trick is very useful if you want to change the Date format only for the specific field on the Add or Edit form. You don't need to use the jsCalendar syntax anymore (as we have been using in PHPMaker version 9) in order to change the Date format on the fly. You can use the following code which you put it in the Startup Script that belongs to either Add or Edit page.

For example, by using the demo project, you can put the following code in Client Scripts -> Table-Specific -> Edit Page -> Startup Script that belongs to the employees table in order to change the Date format of the BirthDate field:

// Edit page
ew_CreateCalendar("femployeesedit", "x_BirthDate", "%d/%m/%Y"); 

Whereas for the Add page, you can use the following code in Client Scripts -> Table-Specific -> Add Page -> Startup Script:

// Add page
ew_CreateCalendar("femployeesadd", "x_BirthDate", "%d/%m/%Y"); 

Just wanted to let you know for comparison only, here is the example of related code for PHPMaker version 9:

Calendar.setup({
inputField: 'x_BirthDate',
ifFormat: '%d/%m/%Y',
showsTime: true,
timeFormat: "24",
firstDay: 1,
button: 'femployeesadd$x_BirthDate$'
}); 

Well, it's a nice update in version 10, isn't it? Simpler and good. 🙂