$(document).ready(function() { $('#holidayDate').datepicker(); var availa...">

Javascript error

My script works if

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine Day", "Washington Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother Day", "Memorial Day", "Flag Day", "Father Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
        if ($(this).val().substring(0, 5) === '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>

And it doesn't work if I include multiple values ​​using "if" or "else if"

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine Day", "Washington Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother Day", "Memorial Day", "Flag Day", "Father Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
        if ($(this).val().substring(0, 5) === '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        if ($(this).val().substring(0, 5) === '01/01') { 
            $('#tags').val('New years Day'); 
        } 
        if ($(this).val().substring(0, 5) === '02/02') { 
            $('#tags').val('Groundhog Day'); 
        } 
        if ($(this).val().substring(0, 5) === '02/14') { 
            $('#tags').val('Valentine Day'); 
        } 
        if ($(this).val().substring(0, 5) === '04/22') { 
            $('#tags').val('Earth Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '10/12') { 
            $('#tags').val('Columbus Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '07/04') { 
            $('#tags').val('Independence Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '10/31') { 
            $('#tags').val('Halloween'); 
        } 
        if  ($(this).val().substring(0, 5) === '11/11') { 
            $('#tags').val('Veterans Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '12/07') { 
            $('#tags').val('Pearl Harbor Remembrance Day'); 
        } 
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>
+3
source share
7 answers
$('#tags').val('Valentine Day');

You have some kind of problem with a quote here ...
Must be:

$('#tags').val('Valentine\ Day'); 

Pay attention to the backslash to avoid a quote ...

+6
source

, . if else, . , , , , :

var map = {
    "12/25": "Christmas Day",
    "01/01": "New Years Day",
    "02/02": "Groundhog Day",
    "02/14": "Valentine Day",
    "04/22": "Earth Day",
    "10/12": "Columbus Day",
    "07/04": "Independence Day",
    "10/31": "Halloween",
    "11/11": "Veterans Day",
    "12/07": "Pearl Harbour Remembrance Day",
}
$('#holidayDate').change(function() {
    // Check our object map for the date, default to "" if there isn't one.
    $('#tags').val(map[$(this).val().substring(0, 5)] || ""); 
}); 

, .

EDIT: , .

+7

$('#tags').val('Valentine Day');
+3

$(this).val().substring(0, 5) , .

+2

, -

('Valentine Day'); 

.

+1

NthDay, .

Latest Version - Complete example with auto-complete date from vacation

It remains to make it a pleasant jQuery plugin

Here are some of the code - no more than a switch

var fixedHolidayMap = { // "Name of day":"MM/DD"
"New years Day"               :"01/01",
"Groundhog Day"               :"02/02",
"Valentine Day"             :"02/14",
"Earth Day"                   :"04/22",
"Flag Day"                    :"06/14",
"Independence Day"            :"07/04",
"Halloween"                   :"10/31",
"Veterans Day"                :"11/11",
"Pearl Harbor Remembrance Day":"12/07",
"Christmas Day"               :"12/25"
}
var variableHolidayMap = { // "Name of day":"Nth,DDD,M" 
"Martin Luther King Day":"3,Mon,1",  // 3rd Mon in Jan 
"Washington Birthday" :"3,Mon,2",  // 3rd Mon in Feb 
"National Arbor Day"    :"-1,Fri,4", // Last Fri of Apr
"Mother Day"          :"2,Sun,5",  // 2nd Sun in May
"Memorial Day"          :"-1,Mon,5", // Last Mon of May 
"Father Day"          :"3,Sun,6",  // 3rd Sun in Jun
"Labor Day"             :"1,Mon,9",  // 1st Mon in Sep
"Columbus Day"          :"2,Mon,10", // 2nd Mon in Oct
"Thanksgiving Day"      :"4,Thu,11"  // 4th Thu in Nov
};
var availableTags = ["Easter"]; // the odd one out
var fixedHoliday = [];
for (var o in fixedHolidayMap) { // build a holiday by dateString 
  availableTags[availableTags.length] = fixedHolidayMap[o];
  fixedHoliday[fixedHolidayMap[o]]=o;
}  
for (var o in variableHolidayMap) availableTags[availableTags.length] = o;
+1
source

try this snip code

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine Day", "Washington Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother Day", "Memorial Day", "Flag Day", "Father Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
    substr = $(this).val().substring(0, 5);
        if (substr == '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        else if (substr == '01/01') { 
            $('#tags').val('New years Day'); 
        } 
        else if (substr == '02/02') { 
            $('#tags').val('Groundhog Day'); 
        } 
        else if (substr == '02/14') { 
            $('#tags').val('Valentine Day'); 
        } 
        else if (substr == '04/22') { 
            $('#tags').val('Earth Day'); 
        } 
        else if  (substr == '10/12') { 
            $('#tags').val('Columbus Day'); 
        } 
        else if  (substr == '07/04') { 
            $('#tags').val('Independence Day'); 
        } 
        else if  (substr == '10/31') { 
            $('#tags').val('Halloween'); 
        } 
        else if  (substr == '11/11') { 
            $('#tags').val('Veterans Day'); 
        } 
        else if  (substr == '12/07') { 
            $('#tags').val('Pearl Harbor Remembrance Day'); 
        } 
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>
-1
source

Source: https://habr.com/ru/post/1754413/


All Articles