MVC 5 – Third Party Date Picker that works in IE

First, send back the browser type from the controller to the browser.

ViewBag.Browser = Request.Browser.Browser; 

Add the following javascript:

 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/
npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.
net/npm/daterangepicker/daterangepicker.css" /> 


 @if (ViewBag.Browser == "InternetExplorer")
    {
        <script type="text/javascript">
            var mFromDate = '@Model.Search.From_Date';
            if (mFromDate != "") {
                mFromDate = mFromDate.substring(0, mFromDate.search(/ /));
            }
                $('input[name="Search.From_Date"]').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    dateFormat: "mm/dd/yyyy",
                    autoUpdateInput: true
                }, function (start, end, label) {
                    $('input[name="Search.From_
Date"]').val(start.format("MM/DD/YYYY"));
                }).val(mFromDate);
        </script>


        <script type="text/javascript">
            var mToDate = '@Model.Search.To_Date';
            if (mToDate != "") {
                mToDate = mToDate.substring(0, mToDate.search(/ /));
            }
                $('input[name="Search.To_Date"]').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    dateFormat: "mm/dd/yyyy",
                    autoUpdateInput: true
                }, function (start, end, label) {
                    $('input[name="Search.To_Date"
]').val(start.format("MM/DD/YYYY"));
                }).val(mToDate);
        </script>
    }  

And check the browser type in order to use the default HMTL date picker when not Internet Explorer.

 
<div class="col-md-2" style="padding-left: 0px;">
                    @Html.LabelFor(m => m.Search.From_Date, new { style = "font-weight:bold; margin-bottom: 0px;" })
                    <br />
                    @if (ViewBag.Browser != "InternetExplorer")
                    {
                        @Html.EditorFor(m => m.Search.From_Date, new { @class = "form-control", name = "FromDate" })
                    }
                    else
                    {
                        <input type="text" name="Search.From_Date" id="Search.From_Date" autocomplete="off"  style="height: 35px;" placeholder="mm/dd/yyyy" />
                    }
                    @Html.ValidationMessageFor(m => m.Search.From_Date)
                </div>