jquery datepicker error does not work

Asked

Viewed 1,496 times

-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>
<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>
  • 1

    Is there an error in the console? can you explain "not working" better? Shouldn’t be using the textbox with ID="datepicker" here $('#' + textbox).datepicker({ ?

  • No error. Only when I click on the textbox does not show the calendar.

  • Why $('#' + textbox) and not $('#datepicker') ? How many datepickers will you have?

  • in at least two Textbox

  • @user6018 Anyway, confirm if the value of textbox is correct (I understand that it must return the ID of its element, but it returns with or without the #?), printing it on the console. Because if there is no error, it is likely that the selector is wrong...

  • can place the html of the two textboxes?

  • I’ll edit the question

Show 2 more comments

4 answers

2

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.

1

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({
     ...
)};

1


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.

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 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({
    // ...
});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.