jQuery 日期选择器在 IE 中不起作用

Question

I'm trying to get the jQuery UI Date Picker to work in IE via php. I did their basic example with a div and it works even in IE. However trying to work it into my code works on Chrome and Firefox, but not IE. Running IE 11. Here is just the heart of the part that is doing the date picker:

echo"   <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css\"> \n";
echo " <script src=\"https://code.jquery.com/jquery-1.12.4.js\"></script>";
echo " <script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.js\"></script>";
echo " <script>";
echo " $( function() {";
echo " $( \"#datepicker\" ).datepicker();";
echo " } ); ";


echo " $( function() {";
echo " $( \"#datepicker1\" ).datepicker();";
echo " } ); ";
echo " </script> ";


echo "<tr>                                                          \n";
    echo "<td>                                                                      \n";
        echo " <form action=\"Web.php\" method=\"post\">                            \n";
        if(!empty($_POST["datefrom"]))
            $datefr = $_POST['datefrom'];
        echo "  <b>Date From: (ex: 7/12/2017):</b> <input type=\"text\" id=\"datepicker\" name=\"datefrom\" value=\"$datefr\" >\n";
    echo "</td>                                                                     \n";
    echo "<td>                                                                      \n";
        if(!empty($_POST["dateto"]))
            $dateto = $_POST['dateto'];
        echo "  <b>Date To:   (ex: 7/12/2017):</b> <input type=\"text\" id=\"datepicker1\" name=\"dateto\" value=\"$dateto\" >\n";
    echo "</td>                                                                     \n";
    echo "<td>                                                                      \n";
    echo "</td>                                                                     \n";
echo "</tr>                                                                         \n";

It works great in Chrome and Firefox. But in IE all I have is the field to type in the date with no date picker. I used the example:

Datepicker jQuery UI

I'm not sure if IE isn't liking something specific. I do have some styling on the table. My next thing to try was going to be commenting out all the styling and see if it shows up after that.

Was hoping someone spots it right off.

I was able to do an inspect and found this error - "SCRIPT5007: The value of the property '$' is null or undefined, not a Function object" which points to:

  $( function() { $( "#datepicker" ).datepicker(); } );

I can't post all the rendered HTML as I would have to sanitize a bunch of it. Here is the part for the jQuery UI and the datepicker sections

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 <script> 
    $( function() { $( "#datepicker" ).datepicker(); } );  $( function() { $( "#datepicker1" ).datepicker(); } ); 
 </script>

 <td>                                                                       
 <form action="Web.php" method="post">          
    <b>Date From: (ex: 7/12/2017):</b> <input type="text" id="datepicker" name="datefrom" value="" >
</td>                                                                       
<td>                                                                        
    <b>Date To:   (ex: 7/12/2017):</b> <input type="text" id="datepicker1" name="dateto" value="" >
</td>                                                                       

Answer 1

Please update your post with a console log or error report for what's going on when you are using IE. I can use IE on Windows 10 and load datepicker() just fine for jQuery UI. It's one giant perk of jQuery - it works on a lot of browsers. That said, older versions of IE might not work with it. For one, you can use type="date" for modern browsers, and revert to old school core JS for a date box pop up. Or, use a polyfill. At the very least though, unless you are using an extremely old version of IE then this code should work fine... It works on my IE at least.

<!-- SCRIPT SRC INCLUDES HERE --> 

<input type="text" id="anythingYouWantHere" class="customDatepickerClass">
<input type="text" id="anythingYouWantHere2" class="customDatepickerClass">
<input type="date" id="defaultHTML5">

<script>
 $(document).on('ready', function(){
  $(".customDatepickerClass").datepicker(); // initialize all datepickers at once
 }); 
</script>

Answer 2

It was a software issue in our company. They were trying out some software to monitor what sites we go to and it took it a while before it hit all the browsers. First IE. I think it was blocking the loading of the jQuery script items. Anyway it's working now on all browser. Gotta love this stuff. Thanks for all the help.

Answer 3

In JS you have to wrap it into a Timeout Function:

setTimeout(function() { ... ... }, 600);

This is necessary in many cases when you want to tweak the DOM using jQuery after page loading. The page has to be fully loaded, otherwise you won't be able to use jQuery selectors on the not yet existing DOM tree. They will report back 'empty' and your code cannot be executed upon them.