multipleDateSelect_Bootstrap.htm

<apex:page sidebar="false" controller="multipleDateSelect_Bootstrap">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
            <script type='text/javascript'>
            $m = jQuery.noConflict();
            $m(document).ready(function() {
                $m( "#selDates" ).datepicker({    
                    show : true,
                    multidate : true,
                    ignoreReadonly: true,
                    multidateSeparator : '; ',
                    todayHighlight : true,
                    startDate: new Date()
                }).on('changeDate', function(ev){
                    window.console.log($m(this).val());
                    $m("[id$='selDatesInputHidden']").val($m(this).val());
                }); 
            })  
            </script> 
            
     <apex:form >
        <apex:pageBlock title="Multiple Date Select" mode="maindetail"  >           
            <apex:pageBlockButtons >
               <apex:commandButton action="{!refresh}" value=" Submit & Verify  " /> 
            </apex:pageBlockButtons> 
            
            <apex:pageBlockSection columns="1" collapsible="false">     
                <apex:inputField value="{!con.LastName}" required="true" />
                
                <apex:inputField value="{!Con.FirstName}" />
                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Dates"/>
                    <apex:outputPanel >
                        <input type="text" id="selDates" class="dateOnlyInput" onkeydown="return false;"/>
                        <apex:inputHidden value="{!selMltDates}" id="selDatesInputHidden"/>
                    </apex:outputPanel>
                    
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>

            <apex:pageBlockTable id="resTable" value="{!conLst}" var="c" rendered="{!conLst.size <> 0}">
                <apex:column value="{!c.LastName}"/>
                <apex:column value="{!c.FirstName}"/>
                <apex:column value="{!c.Date_Field__c}" headerValue="Assigned Date"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
     </apex:form>   
</apex:page>

multipleDateSelect_Bootstrap.java

public class multipleDateSelect_Bootstrap {

    public string selMltDates {get;set;}{ selMltDates = '';}
    public Contact con {get;set;}{ con = new Contact();}
    public List<contact> conLst {get;set;}{ conLst = new List<contact>();}    
    
    public multipleDateSelect_Bootstrap(){}
    
    public void refresh(){
    
        for(string strDate : selMltDates.split('; ')){
            Integer d = Integer.valueOf(strDate.split('\\/')[1]) ;
            Integer m = Integer.valueOf(strDate.split('\\/')[0]) ;
            Integer y = Integer.valueOf(strDate.split('\\/')[2]) ;
            
            Contact conClone = con.Clone(false, true);
            
            conClone.pradeep_dani__Date_Field__c = Date.newinstance(y, m, d);  
            conLst.add(conClone);
        }        
    }
}