Multiple Dates in Multi select Drop down list in HTML 5

Hi All,

I have to have date ranges selected multiple times in HTML5, Like for example if we have Start Date and End Date, like there should be multiple Start and End Dates Selected, if one Start and End Date is Selected, then the drop down should allow me to select another one as long as I want one.

Any help would be appreciated thanks in advance my friends.

Here is my code to display one set of Date pickers for start and end:
 

        var template;
        if (paramType === 'Date Range') {
            var multiple = "multiple='multiple'";
            template =
            '<div id="Param_' + Id + '">' +
                '<div class="parameterHeader ui-widget-header ui-corner-top">' + paramDisplayName + '</div>' +
                '<div class="parameterItem ui-widget-content ui-corner-bottom" ' + multiple + '>' +
                    '<div class="parameterFieldResize parameterField">' +
                        '<input class="parameterDateRangePicker clearable" placeholder="Start" type="text" name="' + paramName + '_1_Start" id="' + paramName + '_1_Start" />' +
                        '<input class="parameterDateRangePicker clearable" placeholder="End" type="text" name="' + paramName + '_1_End" id="' + paramName + '_1_End" />' +
                    '</div>' +
 
                '</div>' +
            '</div>';
 
<pre>
        //Insert HTML
this.JQElem = $(template);
        initialParent.append(this.JQElem);            
 
        $('#' + paramName + '_1_Start').datepicker({
            onSelect: function (dateText) {
                $(this).trigger("input");
                if (typeof me.values[this.id.split('_')[1]] === 'undefined')
                    me.values[this.id.split('_')[1]] = {};
                me.values[this.id.split('_')[1]]['Start'] = dateText;
            }
        });
        $('#' + paramName + '_1_End').datepicker({
            onSelect: function (dateText) {
                $(this).trigger("input");
                if (typeof me.values[this.id.split('_')[1]] === 'undefined')
                    me.values[this.id.split('_')[1]] = {};
                me.values[this.id.split('_')[1]]['End'] = dateText;
            }
        });
        $("#" + paramName + '_1_Start').change(function (event) {
            //convert to 4 digit year (always will be in the 20's)
            var dateString = this.value;
            if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateString)) {
                dateString = dateString.substring(0, dateString.length - 2) + '20' + dateString.substring(dateString.length - 2, dateString.length);
                this.value = dateString;
            }
            if (isValidDate(dateString)) {
                if (typeof me.values[paramName + '_1'] === 'undefined')
                    me.values[this.id.split('_')[1]] = {};
                me.values[this.id.split('_')[1]]['Start'] = dateString;
            } elseif (typeof me.values[this.id.split('_')[1]] !== 'undefined'&& typeof me.values[this.id.split('_')[1]]['Start'] !== 'undefined') {
                if (typeof me.values[this.id.split('_')[1]]['End'] !== 'undefined')
                    delete me.values[this.id.split('_')[1]];
                elsedelete me.values[this.id.split('_')[1]];
            }
        });
        $("#" + paramName + '_1_End').change(function (event) {
            //convert to 4 digit year (always will be in the 20's)
            var dateString = this.value;
            if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateString)) {
                dateString = dateString.substring(0, dateString.length - 2) + '20' + dateString.substring(dateString.length - 2, dateString.length);
                this.value = dateString;
            }
            if (isValidDate(dateString)) {
                if (typeof me.values[this.id.split('_')[1]] === 'undefined')
                    me.values[this.id.split('_')[1]] = {};
                me.values[this.id.split('_')[1]]['End'] = dateString;
            } elseif (typeof me.values[this.id.split('_')[1]] !== 'undefined'&& typeof me.values[this.id.split('_')[1]]['End'] !== 'undefined')
                if (typeof me.values[this.id.split('_')[1]]['End'] !== 'undefined')                        
                    delete me.values[this.id.split('_')[1]];
                elsedelete me.values[this.id.split('_')[1]];
        });

The same thing was possible for Multi select Dropdown, here is the code for that, but when I am trying to do the same on the Date pickers its not working, any Idea is going to be greatly helpful, a code snippet, a link or even suggestion is going to be very helpful thanks in advance my friends.

var template;
if (paramType === 'Date Range') {
var multiple = "multiple='multiple'";
template =
'';

//Insert HTML
this.JQElem = $(template);
initialParent.append(this.JQElem);

$('#' + paramName + '_1_Start').datepicker({
onSelect: function (dateText) {
$(this).trigger("input");
if (typeof me.values[this.id.split('_')[1]] === 'undefined')
me.values[this.id.split('_')[1]] = {};
me.values[this.id.split('_')[1]]['Start'] = dateText;
}
});
$('#' + paramName + '_1_End').datepicker({
onSelect: function (dateText) {
$(this).trigger("input");
if (typeof me.values[this.id.split('_')[1]] === 'undefined')
me.values[this.id.split('_')[1]] = {};
me.values[this.id.split('_')[1]]['End'] = dateText;
}
});
$("#" + paramName + '_1_Start').change(function (event) {
//convert to 4 digit year (always will be in the 20's)
var dateString = this.value;
if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateString)) {
dateString = dateString.substring(0, dateString.length - 2) + '20' + dateString.substring(dateString.length - 2, dateString.length);
this.value = dateString;
}
if (isValidDate(dateString)) {
if (typeof me.values[paramName + '_1'] === 'undefined')
me.values[this.id.split('_')[1]] = {};
me.values[this.id.split('_')[1]]['Start'] = dateString;
} else if (typeof me.values[this.id.split('_')[1]] !== 'undefined' && typeof me.values[this.id.split('_')[1]]['Start'] !== 'undefined') {
if (typeof me.values[this.id.split('_')[1]]['End'] !== 'undefined')
delete me.values[this.id.split('_')[1]];
else
delete me.values[this.id.split('_')[1]];
}
});
$("#" + paramName + '_1_End').change(function (event) {
//convert to 4 digit year (always will be in the 20's)
var dateString = this.value;
if (/^\d{1,2}\/\d{1,2}\/\d{2}$/.test(dateString)) {
dateString = dateString.substring(0, dateString.length - 2) + '20' + dateString.substring(dateString.length - 2, dateString.length);
this.value = dateString;
}
if (isValidDate(dateString)) {
if (typeof me.values[this.id.split('_')[1]] === 'undefined')
me.values[this.id.split('_')[1]] = {};
me.values[this.id.split('_')[1]]['End'] = dateString;
} else if (typeof me.values[this.id.split('_')[1]] !== 'undefined' && typeof me.values[this.id.split('_')[1]]['End'] !== 'undefined')
if (typeof me.values[this.id.split('_')[1]]['End'] !== 'undefined')
delete me.values[this.id.split('_')[1]];
else
delete me.values[this.id.split('_')[1]];
});