jquery datepicker error does not work

Question

I have the script defined as follows:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/ >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var textbox = '<%=TextBoxDataInicial.ClientID%>';
        var textbox = '<%=TextBoxDataFinal.ClientID%>';
        $('#'+textbox).datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior'
        })
    });

</script>

and control as follows:

<td class="auto-style3">
                <asp:TextBox ID="TextBoxDataInicial" runat="server" Width="120px" MaxLength="24" ReadOnly="True"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidatorDataInicio" runat="server" ControlToValidate="TextBoxDataInicial" ErrorMessage="Campo necessário!">*</asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBoxDataInicial" ErrorMessage="Data Inválida!(##/##/####)" Font-Bold="True" Font-Size="Smaller" ValidationExpression="(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[0-2])/((1[2-9]|[2-9][0-9])[0-9]{2})"></asp:RegularExpressionValidator>
            </td>

<td class="auto-style3">
                <asp:TextBox ID="TextBoxDataFinal" runat="server" Width="120px" MaxLength="25" ReadOnly="True"></asp:TextBox>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBoxDataFinal" ErrorMessage="Data Inválida!(##/##/####)" Font-Bold="True" Font-Size="Smaller" ValidationExpression="(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[0-2])/((1[2-9]|[2-9][0-9])[0-9]{2})"></asp:RegularExpressionValidator>
            </td>

Answer 1

A simple and succinct way to do this would be to create a specific class for the Datepicker, and add this class only to the elements you want such functionality.

Ex: $(".datepicker").datepicker( ... );

Add your PHP code, JSP, or whatever a function is that if such a field is required to be datepicker scrunches such a class in it:

<input type="text" name="data" class="datepicker">

Soon every time you need another on your screens, you would need only add such a class in the field.

I hope I’ve helped.

Answer 2

I use 2 datepicker also, what I chose to do was to create in the script 2 functions, one for each Picker:

$('#datepicker1').datepicker({
     ...
)};

$('#datepicker2').datepicker({
     ...
)};

Answer 3

Dude, I notice you’re redefining the value of textbox.
On the first line inside the $(document).ready({}), you put

var textbox = '<%=TextBoxDataInicial.ClientID%>'
var textbox = '<%=TextBoxDataFinal.ClientID%>'; // Aqui, o textbox vai ser substituido por outro ID.

In practice, it would be equivalent to:

var textbox = 1;
var textbox = 2;

So that when you enter

 $('#'+textbox).datepicker({

the value will be equivalent to

 $('#2').datepicker({   

And only the second datepicker (if dp settings are correct) will be interpreted.
How do you want the two datepicker to be interpreted, you can do the following (this is how I would do):

1) Enclose the two (or more) datepickers within a jQuery obj.

var objDP = $("#<%=TextBoxDataInicial.ClientID%>,#<%=TextBoxDataFinal.ClientID%>");
//Desta forma, o seletor vai buscar os dois inputs de uma vez.

2) Run the Datepicker interpreter the same way you would have done before.

objDP.datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
        dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        nextText: 'Próximo',
        prevText: 'Anterior'
    })

Of course, all this inside the $(document).ready(function(){})

UPDATE Now that I saw the answer of Jorge B. But I think putting the two in a selector only improves the visibility of the code, besides allowing you to put MORE inputs, receiving the same datepicker template.

Answer 4

Your problem is that you are setting the variable text twice.

var textbox = '<%=TextBoxDataInicial.ClientID%>';
var textbox = '<%=TextBoxDataFinal.ClientID%>';
$('#'+textbox).datepicker({ ...

To solve your problem, try concatenating the variables and calling at once:

var textbox = '#<%=TextBoxDataInicial.ClientID%>,#<%=TextBoxDataFinal.ClientID%>';
$(textbox).datepicker({ ...

Or:

var textbox = '#<%=TextBoxDataInicial.ClientID%>';
textbox += '#<%=TextBoxDataFinal.ClientID%>';
$(textbox).datepicker({ ...

Our still:

var textbox = '<%=TextBoxDataInicial.ClientID%>';
$('#'+textbox).datepicker({
    // ...
});

textbox = '<%=TextBoxDataFinal.ClientID%>';
$('#'+textbox).datepicker({
    // ...
});