After inspecting the HTML and CSS with F12 developer tools, it becomes evident that Chrome browser utilizes a user agent stylesheet which applies pseudo-elements (::webkit) specific to Chrome. However, in Microsoft Edge browser, there is no usage of a user agent stylesheet, resulting in the pseudo-elements not being applied to the input date textbox. As a consequence, the code does not function correctly in Microsoft Edge.
To address this issue, one potential solution is to utilize the Microsoft Edge Dev version (chromium based), where the code performs effectively.
Alternatively, as a workaround, you can consider using the provided code snippet below, which implements a text box and datepicker plugin for displaying the date:
<style>
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.month {
color: cornflowerblue;
}
.day {
color: aqua;
}
.year {
color: darkmagenta
}
.separate-letter {
color: red
}
</style>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="input-field">
<input id="input-text-field" type="text" class="date" data-selecteddate="" value="" />
<label for="input-text-field">
<span id="span_month" class="month">MM</span>
<span class="separate-letter">/</span>
<span id="span_day" class="day">DD</span>
<span class="separate-letter">/</span>
<span id="span_year" class="year">YYYY</span>
</label>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function ($) {
$(".date").datepicker({
onSelect: function (dateText) {
var dataarray = dateText.split("/")
$("#span_month").html(dataarray[0]);
$("#span_day").html(dataarray[1]);
$("#span_year").html(dataarray[2]);
this.value = "";
$("#input-text-field").attr("data-selecteddate", dateText);
}
})
});
</script>
The expected result when using Microsoft Edge browser can be viewed in the following gif: https://i.sstatic.net/Ow7Q0.gif