Configuring a date picker with support for disabled dates

Question

I'd like to see if I can somehow make this loop more effective (smaller?). I'm using MultiDatesPicker to make a reservation plugin. And I've set everything right, and everything works, but I'd like to see if my jquery code can be optimized somehow.

HTML looks like this (minus the actual calendar):

<div class="reservation_field_left">
 <label>Reservation Date:</label>
 <input type="hidden" id="disabled_dates" value=""27.11.2015, 28.11.2015"">
 <input type="text" name="reservation_date" id="reservation_dates_input" value="14.11.2015, 15.11.2015, 25.11.2015">
 <div id="reservation" class="hasDatepicker"></div>
</div>

I have inputs where I have dates that have been reserved #disabled_dates, and in my #reservation_date is the date of the current reservation. Now this input, if you're creating a new reservation, is empty, which means if I don't make the check if it's empty, I'll get an error in my date picker plugin (if the option for it is included). There are double quotes in the #disabled_dates because that's how I get my output from php but the code below deals with that, so that's not an issue at all.

I'm just wondering if this big if - else if - else chunk can be reduced somehow.

jQuery(document).ready(function($) {
 "use strict";
 var disabled_dates = $('#disabled_dates').val(),
 reservation_dates_input = $('#reservation_dates_input').val(),
 disabled_dates_array,
 reserved_dates_array,
 options;
 if (disabled_dates.length) {
 var clean_disabled_dates = disabled_dates.replace(/\"/g, '');
 disabled_dates_array = clean_disabled_dates.split(", ");
 }
 if (reservation_dates_input.length) {
 var clean_reserved_dates = reservation_dates_input.replace(/\"/g, '');
 reserved_dates_array = clean_reserved_dates.split(", ");
 }
 if (disabled_dates.length>2 && reservation_dates_input.length>2) {
 options = {
 firstDay: 1,
 dateFormat: "dd.mm.yy",
 altField: '#reservation_dates_input',
 addDisabledDates: disabled_dates_array,
 addDates: reserved_dates_array
 };
 } else if(disabled_dates.length>2 && reservation_dates_input.length<=2) {
 options = {
 firstDay: 1,
 dateFormat: "dd.mm.yy",
 altField: '#reservation_dates_input',
 addDisabledDates: disabled_dates_array,
 };
 } else if(reservation_dates_input.length>2 && disabled_dates.length<=2) {
 options = {
 firstDay: 1,
 dateFormat: "dd.mm.yy",
 altField: '#reservation_dates_input',
 addDates: reserved_dates_array
 };
 } else {
 options = {
 firstDay: 1,
 dateFormat: "dd.mm.yy",
 altField: '#reservation_dates_input',
 };
 }
 $('#reservation').multiDatesPicker(options);
});

I tried putting empty arrays in the disabled_dates_array and reserved_dates_array, but MultiDatesPicker doesn't allow empty arrays, or arrays with no date in it.

Answer 1

You don't need to build the options object in one go instead create what all cases need and then optionally add:

options = {
 firstDay: 1,
 dateFormat: "dd.mm.yy",
 altField: '#reservation_dates_input',
};
if (disabled_dates.length>2) {
 options.addDisabledDates = disabled_dates_array;
}
if (reservation_dates_input.length>2) {
 options.addDates = reserved_dates_array;
}

you also have some code duplication when creating the arrays, you can put that in a function and call it twice:

function createArrayFromInput(dates_input){
 if (dates_input.length) {
 var clean_dates = dates_input.replace(/\"/g, '');
 return clean_dates.split(", ");
 }
 return [];
}

• dingo_d: I never thought to just add the property in the object! Thanks! :)
• dingo_d: Just one thing: you need quotes around options[addDisabledDates] and options[addDates] so that they look like: options['addDisabledDates'] and options['addDates'] :) Thanks!!