I am now wanting to dynamically change the language of the date picker when the user changes a language of PORTAL.
I'm trying to localize the bootstrap-datetimepicker which has a folder 'locales' that contains the different languages.
The plugin supports i18n for the month and weekday names and the weekStart option. The default is English ('en'); other available translations are avilable in the js/locales/ directory, simply include your desired locale after the plugin. To add more languages, simply add a key to $.fn.datetimepicker.dates, before calling .datetimepicker().
To your View page and design your page likes this:
<div class="span12">
<span class="span5">
<aui:input name="fromdate" id="from-date-input" value='${fromdateValue}'
inlineField="true" readonly='true' data-date-autoclose='true'>
</aui:input>
</span>
<span class="span5">
<aui:input name="todate" id="to-date-input" value='${todateValue}'
inlineField="true" readonly='true' data-date-autoclose='true'>
</aui:input>
</span>
<span class="span2">
<input type="submit" value="Go" name="Go" onclick="<portlet:namespace/>dateValidate();" >
</span>
</div>
Now We have to download bootstrap-datetimepicker.de.js from bootstrap site.
NOTE:The default is English (“en”); Am using GERMAN(de) for demonstration, other available translations are available in the js/locales/ directory, simply include your desired locale after the plugin.
Then we have JS folder in our Portlet. There we have put the file bootstrap-datetimepicker-de.js with the following content.
datetimepicker-de.js code like that:
/**
* German translation for bootstrap-datepicker
* Sam Zurcher <sam@orelias.ch>
*/
;(function($){
$.fn.datepicker.dates['de'] = {
days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
today: "Heute",
monthsTitle: "Monate",
clear: "Löschen",
weekStart: 1,
format: "dd.mm.yyyy"
};
}(jQuery));
Next we can add this bootstrap to our liferay-portlet.xml file. like
<footer-portlet-javascript>/js/bootstrap-datepicker.de.js</footer-portlet-javascript>
Next we can add the script to our view page JSP, If locale change Date-picker should be change en to de:
<script>
$(document).ready(function(){
var locale = "<%=themeDisplay.getLocale().toString()%>";
console.log("Locale Value is......."+locale);
var jslocale = 'en';
if(locale=="de_DE"){
jslocale='de';
}
$("#<portlet:namespace/>to-date-input , #<portlet:namespace/>from-date-input").datepicker({
autoclose:true,
format: "dd/mm/yyyy",
endDate: '+0d',
language: jslocale
});
});
</script>
To restrict the date picker from taking future date:
I have added a Bootstrap property in above script-
endDate: '+0d'
Now its time for validation on datepicker:
For my case i added these 3 validation-
1.From and To dates are required.
2.From date cannot be greater than the To date.
3.Date range must be within 1 month.
function <portlet:namespace/>dateValidate(){
var fromdate="";
var todate ="";
var startDate = "";
var endDate = "";
var months = 0;
var daysDiff = 0;
var timeDiff = 0;
var selFromDate = $("#<portlet:namespace/>from-date-input").val();
var selToDate = $("#<portlet:namespace/>to-date-input").val();
if(selFromDate!=null && selFromDate!='' && selToDate!=null && selToDate!=''){
var fdate = selFromDate.split("/")
var tdate = selToDate.split("/")
var fromNewDat = new Date(fdate[2], fdate[1] - 1, fdate[0]);
var toNewDat = new Date(tdate[2], tdate[1] - 1, tdate[0]);
startDate = new Date(fromNewDat);
endDate = new Date(toNewDat);
timeDiff = endDate - startDate;
daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
}
if (selFromDate == "" || selToDate == ""){
$('#<portlet:namespace/>errorMessage').html('From and To dates are required');
}else if (startDate > endDate){
$('#<portlet:namespace/>errorMessage').html('From date cannot be greater than the To date');
}else if(daysDiff > 30){
$('#<portlet:namespace/>errorMessage').html('Date range must be within 1 month');
}else {
$('#<portlet:namespace/>errorMessage').html('');
}
}
