Blogs

It's very convient to use <liferay-ui:input-date> tag to create a date field. But this just provide very basic use of aui date picker. And attributes doesn't cover all options of date picker. This makes me have to create my own aui date picker through javascript. But using <liferay-ui:input-date> can save me a lot of time. So I am going to introduce a practical way to apply advanced options to the date picker that has been generated by input-date tag. Actually you can use the same method to modify any date picker.

The component name of the date picker that is generated by tag is NAMESPACE+FIELD_NAME+DatePicker

For example :

Suppose we are in a portlet under name space "_PersonalInfo_WAR_PersonalInfoportlet_"

<liferay-ui:input-date name="birthday" yearParam="birthYear" yearValue="1984" monthParam="birthMonth" monthValue="01 dayParam="birthDate" dayValue="17" />

This tag generate a date picker called _PersonalInfo_WAR_PersonalInfoportlet_birthdayDatePicker

You can easiliy get the date picker's javascript object by this method:

var datePickerName = '_PersonalInfo_WAR_PersonalInfoportlet_birthdayDatePicker';

var datePicker = Liferay.component(datePickerName);

for example we want to limit the user's input range to be in last 100 days until today, you can modify the date picker's configuration

var today = new A.Date();
var calendar = datePicker.getCalendar();

if (calendar) {
    calendar.setAttrs({minimumDate:A.Date.addDays(today, -100), maximumDate:today);

}

Same idea if you want to change Date picker's default date format, you can change the mask. Basically if you get the date picker you can do whatever you want to do with it.