jQuery DatePicker does not work in Edge when deployed to IIS

fp2021

SOLVED CLOSED ACTIVE ANSWERED
User: fp2021
Posted: on Feb 24, 2022 10:04 PM
Forum: jQuery and jQuery Plugins
Replies: 4
Views: 5333

I have a few jQuery Datepicker controls that are being displayed inside of a .net 4.0 web application. The calendar controls appear on the screen whenever textbox controls are clicked. Everything works fine for all browsers while debugging. Everything continues to work fine in IE 11 and Chrome when the changes are deployed to IIS. However, the calendar control does not appear when the textbox controls are clicked in Edge when deployed to IIS. Does anyone know what would prevent the calendar control from being displayed in Edge when deployed to IIS? I assume the links are fine since everything works fine in IE and Chrome.

The links are below are included on the master page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <title></title>

  
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />

    <!-- Icons -->
    <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
    <link rel="shortcut icon" href="img/favicon.png" />
    <link rel="apple-touch-icon" href="img/icon57.png" sizes="57x57" />
    <link rel="apple-touch-icon" href="img/icon72.png" sizes="72x72" />
    <link rel="apple-touch-icon" href="img/icon76.png" sizes="76x76" />
    <link rel="apple-touch-icon" href="img/icon114.png" sizes="114x114" />
    <link rel="apple-touch-icon" href="img/icon120.png" sizes="120x120" />
    <link rel="apple-touch-icon" href="img/icon144.png" sizes="144x144" />
    <link rel="apple-touch-icon" href="img/icon152.png" sizes="152x152" />
    <link rel="apple-touch-icon" href="img/icon180.png" sizes="180x180" />
    <!-- END Icons -->

    <link rel="stylesheet" href="js/css/jquery-ui-1.10.1.css" type="text/css" />

    <!-- Stylesheets -->
    <!-- Bootstrap is included in its original form, unaltered -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />

    <!-- Related styles of various icon packs and plugins -->
    <link rel="stylesheet" href="css/plugins.css" type="text/css" />

    <!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
    <link rel="stylesheet" href="css/main.css" type="text/css" />


    <!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->

    <!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
    <link rel="stylesheet" href="css/themes.css" type="text/css" />
    <!-- END Stylesheets -->

    <!-- Calendar Style -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

Webform
    <div class="col-md-1">
                    <asp:TextBox ID="txtEntryDate" ClientIDMode="Static" runat="server" CssClass="form-control input-datepicker-close date "
                        data-date-format="mm/dd/yyyy"></asp:TextBox>
                </div>

app.js
  $('.input-datepicker-close').datepicker({ weekStart: 0, todayHighlight: true, clearBtn: true }).on('changeDate', function (e) { $(this).datepicker('hide'); });

dharmend...

0 1

Reply
User: dharmendr
Replied: on Feb 24, 2022 11:11 PM
Report

Hi fp2021,

You need to set correct path of scripts in deployment server.

Also the jQuery script file is missing.

If the Scripts folder is in root directory, try change the path as below.

<link rel="stylesheet" href="/js/css/jquery-ui-1.10.1.css" type="text/css" />
 
<!-- Stylesheets -->
<!-- Bootstrap is included in its original form, unaltered -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" />
 
<!-- Related styles of various icon packs and plugins -->
<link rel="stylesheet" href="/css/plugins.css" type="text/css" />
 
<!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
<link rel="stylesheet" href="/css/main.css" type="text/css" />
 
<!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->
 
<!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
<link rel="stylesheet" href="/css/themes.css" type="text/css" />
<!-- END Stylesheets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Calendar Style -->
<script src="https://code.jquery.com/jquery-1.12.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

fp2021

0 2

Reply
User: fp2021
Replied: on Feb 25, 2022 08:21 AM
Report

When I view the page in Dev Tools, I noticed that "hasDatepicker" is missing in the Edge browser.

IE
<input name="ctl00$ContentPlaceHolder1$txtEntryDate" type="text" id="txtEntryDate" class="form-control input-datepicker-close date  hasDatepicker" data-date-format="mm/dd/yyyy" readonly="readonly">

chrome
<input name="ctl00$ContentPlaceHolder1$txtEntryDate" type="text" id="txtEntryDate" class="form-control input-datepicker-close date  hasDatepicker" data-date-format="mm/dd/yyyy" readonly="readonly">

Edge
<input name="ctl00$ContentPlaceHolder1$txtEntryDate" type="text" id="txtEntryDate" class="form-control input-datepicker-close date " data-date-format="mm/dd/yyyy" readonly="readonly">

fp2021

0 3

Reply
User: fp2021
Replied: on Feb 25, 2022 10:23 AM
Report

The jQuery references below are at the bottom of the master page.

 <!-- jQuery, Bootstrap, jQuery plugins and Custom JS code -->
<script type="text/javascript" src="js/vendor/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

arjunv

0 4

Reply
User: arjunv
Replied: on Feb 25, 2022 10:46 PM
Report

Hi fp2021,

Please use ResolveUrl method.

<link rel="stylesheet" href="<%= ResolveUrl("/js/css/jquery-ui-1.10.1.css") %>" type="text/css" />
 
<!-- Stylesheets -->
<!-- Bootstrap is included in its original form, unaltered -->
<link rel="stylesheet" href="<%= ResolveUrl("/css/bootstrap.min.css") %>" type="text/css" />
 
<!-- Related styles of various icon packs and plugins -->
<link rel="stylesheet" href="<%= ResolveUrl("/css/plugins.css") %>" type="text/css" />
 
<!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
<link rel="stylesheet" href="<%= ResolveUrl("/css/main.css") %>" type="text/css" />
 
 
<!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->
 
<!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
<link rel="stylesheet" href="<%= ResolveUrl("/css/themes.css") %>" type="text/css" />
<!-- END Stylesheets -->
 
<!-- Calendar Style -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

jQuery DatePicker does not work in Edge when deployed to IIS

Company

Explore

Follow us

Contact Us