date_range_picker for teestyle

date_range_picker.js

var details_form               = $("form#campaign_details");
    var campaign_end_date_input    = $("input#campaign_end_date");
    var select_five_days           = $("#campaign_end_date_range #five_days");
    var select_seven_days          = $("#campaign_end_date_range #seven_days");
    var select_ten_days            = $("#campaign_end_date_range #ten_days");
    var select_fourteen_days       = $("#campaign_end_date_range #fourteen_days");
    var select_twentyone_days      = $("#campaign_end_date_range #twentyone_days");
    var campaign_end_date_picker   = $("button#campaign_end_date_picker");
    var find_date_range_span       = $("span.date_range");
    var date_range_template_start  = '<span class="hidden-xs hidden-sm date_type">Campaign Ending: </span><span class="date">';
    var date_range_template_end    = '</span>';
    // today
    var today                      = moment().format('MM/DD/YYYY');
    // five day range variables
    var add_five_days              = moment().add(5, 'days');
    var five_day_range             = moment(add_five_days).format('MM/DD/YYYY')
    var five_day_input_val         = moment(add_five_days).format('MM/DD/YYYY h:mm A');
    // seven day range variables
    var add_seven_days             = moment().add(7, 'days');
    var seven_day_range            = moment(add_seven_days).format('MM/DD/YYYY')
    var seven_day_input_val        = moment(add_seven_days).format('MM/DD/YYYY h:mm A');
    // ten day range variables
    var add_ten_days               = moment().add(10, 'days');
    var ten_day_range              = moment(add_ten_days).format('MM/DD/YYYY')
    var ten_day_input_val          = moment(add_ten_days).format('MM/DD/YYYY h:mm A');
    // fourteen day range variables
    var add_fourteen_days          = moment().add(14, 'days');
    var fourteen_day_range         = moment(add_fourteen_days).format('MM/DD/YYYY')
    var fourteen_day_input_val     = moment(add_fourteen_days).format('MM/DD/YYYY h:mm A');
    // twentyone day range variables
    var add_twentyone_days         = moment().add(21, 'days');
    var twentyone_day_range        = moment(add_twentyone_days).format('MM/DD/YYYY')
    var twentyone_day_input_val    = moment(add_twentyone_days).format('MM/DD/YYYY h:mm A');
    /*
     * Campaign End Date (using moment.js)
     */
    $(select_five_days).find(find_date_range_span).text("(Ending - " + five_day_range +")");
    $(select_seven_days).find(find_date_range_span).text("(Ending - " + seven_day_range +")");
    $(select_ten_days).find(find_date_range_span).text("(Ending - " + ten_day_range +")");
    $(select_fourteen_days).find(find_date_range_span).text("(Ending - " + fourteen_day_range +")");
    $(select_twentyone_days).find(find_date_range_span).text("(Ending - " + twentyone_day_range +")");

    $(select_five_days).click(function(event) {
         $(campaign_end_date_picker).find(find_date_range_span).html(date_range_template_start + five_day_range + date_range_template_end);
         $(details_form).find(campaign_end_date_input).val(five_day_input_val);
    });

    $(select_seven_days).click(function(event) {
         $(campaign_end_date_picker).find(find_date_range_span).html(date_range_template_start + seven_day_range + date_range_template_end);
         $(details_form).find(campaign_end_date_input).val(seven_day_input_val);
    });

    $(select_ten_days).click(function(event) {
         $(campaign_end_date_picker).find(find_date_range_span).html(date_range_template_start + ten_day_range + date_range_template_end);
         $(details_form).find(campaign_end_date_input).val(ten_day_input_val);
    });

    $(select_fourteen_days).click(function(event) {
         $(campaign_end_date_picker).find(find_date_range_span).html(date_range_template_start + fourteen_day_range + date_range_template_end);
         $(details_form).find(campaign_end_date_input).val(fourteen_day_input_val);
    });

    $(select_twentyone_days).click(function(event) {
         $(campaign_end_date_picker).find(find_date_range_span).html(date_range_template_start + twentyone_day_range + date_range_template_end);
         $(details_form).find(campaign_end_date_input).val(twentyone_day_input_val);
    });