Selecting multiple dates using bootstrap calender

Recently I tried to work on selecting multiple date in std calendar, however it was not feasible. Here is the solution using bootstrap calendar plugin which allows user to select multiple dates.

Demo: Please click here

Source code is given below:

	<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>

view raw multipleDateSelect_Bootstrap.htm hosted with ❤ by GitHub

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

view raw multipleDateSelect_Bootstrap.java hosted with ❤ by GitHub