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

Liferay Maven Introduction & Install Maven

Q-what is maven?
ans-"maven is a software management and comprehension tool based on the concept of project object model.

Maven do many things for us like resolving dependencies, create project structure, build  a project, creating war/jar etc. By using Maven you can also create portlet, theme, services without any need of SDK.

(POM) which can manage project build , reporting and  documentation from center piece of information."

All build system are essentials the same
There are some step for build project
1-compile source code.
2-copy resource
3-compile and run test.
4-packge project.
5-deploy project
6-clean up the code.

Development of maven wanted:-
Advantages of maven: - Maven wanted a standard way to build the project they wanted clear definition what the project consist of an easy way to publish project information and way to share jar across several the project.
they wanted an easy way to build the project and share your project with the colleagues or with the client
so they come up with the tool which is called maven.. which is for building and managing  any java project
maven is intended to make day to day java developer work easier

POM(project object model)
Maven uses the concept of POM.

Q-What is pom?
ans- POM is fundamental unit of work in maven you can say.
"pom is XML file that contain information about the project and configuration details used by maven
to build the project "

 Note-XML file contains some information
1-  Describe a project
2- This information contain name, version and artifact, source code location, Dependences of project
3- It also retail the plugin information and profile.
4- It uses XML by default
5- But not the way ant uses XML.

MAVEN Advantag and objective:- 
1: - Making the build process easy.
2: - Provide the uniform an information
3: - Provide quality project information
4: - Provide guildlines for best practice Development
5: - Allowing transprant migration for a new feature.

Create first maven project simple
step1- First set class path  with maven
step2- Copy that maven project path and pased on command line.
step3- mvn archetype: generate  (this command is used for generate  project from existeing template ) maven project( this command will  help you to create a perfect diretory structure for you)
( when you entre for this command we need internate for download plugin)
note :- Generally what happend is  if yu are not using maven than you need to make project structural  by your self.

How to create maven project with eclipse:-
ans:-
step:- Goto file-new- choose project-search maven-select maven project-next-next-we need to give group id, artifact id,version,package  and leave everything is default
and finish
after  eclipse it will create maven project for us.
 
How maven work internally? 

Suppose you need any dependencies jar file maven it provide automatically download required  dependencies for that we need to dependency on jar.

Jquery Validation for radio button

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        <!--simple validation for  radio button ------->

      
        $("#SaveConfirm").click(function(){
            var test=0;
            console.log("here>>>>>>>>>>>");
            if(!($("#r1").is(':checked') || $("#r2").is(':checked')){
                console.log("hide");
                $("#error1").html("Enter select First radio buttion");
                test=1;
                }
            else{
            console.log("show");
            $("#error1").html("");
            console.log("show2s");
            }
          
            if(!($("#r3").is(':checked') || $("#r4").is(':checked'))){
            console.log("hide");
            $("#error2").html("Enter select second radio buttion");
            test=1;
            }
        else{
        console.log("show");
        $("#error2").html("");
        console.log("show2s");
        }
     
            if(test==1)
                return;
          
        });
    });
</script>


<script type="text/javascript">
$(document).ready(function(){

<!--validation for if radio button is checked with JQuery?------->

  
$('.fistRed').change(function(){
      
        if($(this).is(':checked'))
            $('#error1').html('');
    });
      
$('.secdRed').change(function(){
  
    if($(this).is(':checked'))
        $('#error2').html('');
})     
});
</script>

 

 <!--Input Fields---->

<div colspan="2" align="center">
<tr>
      <td><p>
        <label>
          <input type="radio" id="r1" name="radio1"  class="form-input fistRed" />
          yes</label>
        <label>
          <input type="radio" id="r2" name="radio1"  class="form-input fistRed" />
          no</label>
        <br />
      </p></td>
    </tr>
    <label class="form-label" style="color:red;" id="error1"></label><br>
    <tr>
      <td><p>
        <label>
          <input type="radio" id="r3" name="radio2"  class="form-input secdRed" />
          yes</label>
        <label>
          <input type="radio" id="r4" name="radio2"  class="form-input secdRed"/>
          no</label>
        <br />
      </p></td>
    </tr>
    <label class="form-label" style="color:red;" id="error2"></label>
        
<div colspan="2" align="center">
<input type="submit" value="Rigister" id="SaveConfirm">
</div>
</div>