I have a Lightning component with a Javascript jQuery Data Picker for use in a Flow Screen to create child "Subscription" records.
I have configured the Javascript to allow input of Date Ranges and restrict already selected Date Ranges when creating the child records.
I would like to store the previously selected Date Ranges on the parent record and pass this to the jQuery component via the Flow.
When I set the 2 Dimensional Array statically in the Javascript this properly restricts the multiple ranges
However when I try to pass this as aura attribute with type="String[] only the Start and end Dates of each range are restricted.
How can I adjust my Component and/or Javascript to support restricting the multiple ranges?
Component
<aura:component implements="lightning:availableForFlowScreens" access="global">
<!-- Component Attributes-->
<aura:attribute name="restrictedDates" type="String[]" />
<!--add jQuery UI style CSS file and jQuery, jQuery UI javaScript files-->
<ltng:require styles="{! $Resource.jQuery_UI + '/jquery-ui-1.12.1/jquery-ui.min.css'}"
scripts="{!join(',',
$Resource.jquery224 ,
$Resource.jQuery_UI + '/jquery-ui-1.12.1/jquery-ui.min.js')
}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
<input type="text" class="slds-input" id="datepickerId" />
</aura:component>
Javascript
({
scriptsLoaded : function(component, event, helper) {
//var date_range = [["07-03-2022","07-05-2022"],["07-09-2022","07-11-2022"]];
var date_range = component.get('v.restrictedDates');
$(document).ready(function(){
//Restrict past date selection in date picker
$( "#datepickerId" ).datepicker({
minDate: "-1D",
maxDate: "+1Y",
dateFormat : "mm-dd-yy",
numberOfMonths: 1,
showAnim : "fadeIn",
onSelect: function( selectedDate ) {
if(!$(this).data().datepicker.first){
$(this).data().datepicker.inline = true
$(this).data().datepicker.first = selectedDate;
$(this).data().datepicker.s_first = selectedDate;
delete $(this).data().datepicker.s_second;
}else{
if(selectedDate > $(this).data().datepicker.first){
$(this).data().datepicker.s_second = selectedDate;
$(this).data().datepicker.s_first = $(this).data().datepicker.first;
$(this).val($(this).data().datepicker.first + " to " + selectedDate);
//$(this).val("\[\"" + $(this).data().datepicker.first +"\"" + "," + "\"" + selectedDate + "\"\]");
}else{
$(this).val(selectedDate + " to " + $(this).data().datepicker.first);
//$(this).val("\[\"" + selectedDate +"\"" + "," + "\"" + $(this).data().datepicker.first + "\"\]");
$(this).data().datepicker.s_second = $(this).data().datepicker.first;
$(this).data().datepicker.s_first = selectedDate;
}
$(this).data().datepicker.inline = true;
var $this = $(this);
setTimeout(function(){
$this.datepicker("hide");
$this.data().datepicker.inline = false;
},750)
}
$(this).datepicker("show"); // update the dates
},
beforeShowDay: function(date) {
var string = $.datepicker.formatDate('mm-dd-yy', date);
for (var i = 0; i < date_range.length; i++) {
if (Array.isArray(date_range[i])) {
var from = new Date(date_range[i][0]);
var to = new Date(date_range[i][1]);
var current = new Date(string);
if (current >= from && current <= to) return false;
}
}
return [date_range.indexOf(string) == -1]
},
onClose:function(){
delete $(this).data().datepicker.first;
$(this).data().datepicker.inline = false;
$(this).blur()
}
});
});
},
getVal : function(component,event,helper){
// to get selected date value using jQuery
var oDate = $('#datepickerId').val();
alert(oDate);
}
})
component.get('v.restrictedDates');
? Is it stored in the parent record? is yes, can you show me the exact format in which it's stored?[["07-03-2022","07-05-2022"],["07-09-2022","07-11-2022"]]
If I use the same value in the Javascript it properly restricts the entire range. (This is commented out on Line 5)component.set
method?