Bootstrap Datepicker Change Language Dynamically

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('');
        }  
    }