Error datepicker jquery does not work

-1

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><scriptsrc="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>
    
asked by anonymous 11.04.2014 / 10:41

4 answers

1

Dude, I noticed that you're resetting the value of textbox . Home On the first line within $(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 when you enter

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

the value will be equivalent to

 $('#2').datepicker({   

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

1) Enclose the two (or more) datepickers inside 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, just as 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, this is all within $(document).ready(function(){})

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

    
11.04.2014 / 15:30
2

A simple and succinct way of doing this would be to create a class specific to Datepickers, and add this class only to the elements you want such functionality.

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

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

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

Soon every time you need another one on your screens, you'd only need to add that class to the field.

I hope I have helped.

    
11.04.2014 / 19:07
1
I use 2 datepicker as well, what I chose to do was to create in script 2 functions, one for each picker :
$('#datepicker1').datepicker({
     ...
)};

$('#datepicker2').datepicker({
     ...
)};
    
11.04.2014 / 11:58
1

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 them once:

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

Or:

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

Our addition:

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

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