CODEWITHSUNDEEP
asp.netdatepicker
Pepe
Pepe

Reputation: 423

Aspx datepicker browser compatibility

I´m new using aspx project, in FrontEnd I have table like this:

<table style="width: 450px" id="tabla1">
  <tr>
    <th style="text-align:left">
      <asp:Label runat="server" ClientIDMode="Static" ID="label_fechaini" Text="Fecha de Apertura:" Width="50%"></asp:Label>
      <br />
    </th>
    <th style="text-align:left">
      <asp:Label runat="server" ClientIDMode="Static" ID="label_fechafin" Text="Fecha de Cierre:" Width="50%"></asp:Label>
      <br />
    </th>
  </tr>
  <tr>
    <td>
      <asp:TextBox type="date" ClientIDMode="Static" runat="server" ID="fecha_ini"></asp:TextBox>
    </td>
    <td>
      <asp:TextBox type="date" ClientIDMode="Static" runat="server" ID="fecha_fin"></asp:TextBox>
    </td>
  </tr>
</table>

In chrome browser I can see date picker without problems like this:

enter image description here

Problem is compatibility with other browsers, for example IE don´t show up datepicker.I search into CanIuse web. And IE don´t support date. What can I do to solve this problem?

IE picture:

enter image description here

Upvotes: 0

Views: 97

Answers (1)

Athanasios Karagiannis
Athanasios Karagiannis

Reputation: 308

I am assuming your not running IE 7 or anything really old. I would look into JQueryUI Datepicker. It works in recent IE and in Firefox/Chrome/Mozilla and so on.

$("#fecha_ini").datepicker();

You may have to reference to the input ID using this.

$("#<%= fecha_ini.ClientID %>").datepicker();

EDIT

My mistake. I was under the belief that you cannot apply datepicker to an asp:TextBox control and that it only worked on html inputs. I removed that part from the answer.

You need to include JQUERY and JQUERYUI to make this work.

<script>
    $(document).ready(function ()
    {
        // Regular way to apply datepicker
        $("#fecha_ini").datepicker();
        $("#fecha_fin").datepicker();

        // If you get error because it cannot find the control use this.
        //$("#<%= fecha_ini.ClientID %>").datepicker();
        //$("#<%= fecha_fin.ClientID %>").datepicker();
    });
</script>
<table style="width: 450px" id="tabla1">
    <tr>
        <th style="text-align:left">
            <asp:Label runat="server" ClientIDMode="Static" ID="label_fechaini" Text="Fecha de Apertura:" Width="50%"></asp:Label>
            <br />
        </th>
        <th style="text-align:left">
            <asp:Label runat="server" ClientIDMode="Static" ID="label_fechafin" Text="Fecha de Cierre:" Width="50%"></asp:Label>
            <br />
        </th>
    </tr>
    <tr>
        <td>
            <asp:TextBox type="date" ClientIDMode="Static" runat="server" ID="fecha_ini"></asp:TextBox>
        </td>
        <td>
            <asp:TextBox type="date" ClientIDMode="Static" runat="server" ID="fecha_fin"></asp:TextBox>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions