Forum:

HTML Pages with CSS and JavaScript

DatePicker works but only one per page

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

Im writing a form in JSP like this:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show All Users</title>
</head>
<body>
    <form method="GET" action='UserController' name="frmAddUser">
    <table border=1>
        <thead>
            <tr>
                <th>User Name</th>
                <th>Email</th>
                <th>Registration Date</th>
                <th colspan=2>Action</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${users}" var="user">
                <tr>
                    <td><c:out value="${user.nombre}" /></td>
                    <td><c:out value="${user.email}" /></td>
                    <td><fmt:formatDate pattern="yyyy-MM-dd" value="${user.created_at}" /></td>
                    <td><a href="UserController?action=edit&userId=<c:out value="${user.nombre}"/>">Update</a></td>
                    <input  type="submit" value="Submit" name="edit"/>
                    <td><a href="UserController?action=delete&id=<c:out value="${user.id}"/>">Delete</a></td>
                    <td><input type="checkbox" name="deleteList" />
        </form></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
        <input type="submit" value="Submit" />
        </form>
        
    <p><a href="UserController?action=insert">Add User</a></p>
    <p><a href="UserController?action=listFilterdUsers">Seleccionar usuarios por rango de fechas</a></p>
    
    
    <p>From date: <input type="text" id="datepicker" >Till Date: <input type="text" id="datepicker" ></p>
   
   
</body>
</html>

I added a datePicker using jQuery at the bottom of the page. If I use one it works but when I use two only the one which is at the first place in the form shows a pop up for pick a date, the other one just doesnt show it.

Any idea?

Regards,
Isaac

Stephan Hochhaus

author

Posts: 18

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Isaac Ferguson wrote:
<script> $(function() { $( "#datepicker" ).datepicker(); }); </script> <p>From date: <input type="text" id="datepicker" >Till Date: <input type="text" id="datepicker" ></p>
I added a datePicker using jQuery at the bottom of the page. If I use one it works but when I use two only the one which is at the first place in the form shows a pop up for pick a date, the other one just doesnt show it.

IDs for HTML elements must be unique. First of all, if you add two datepickers, make sure they have two different IDs. Also, you are initializing the datepicker based on the ID, which gets messy if you keep using the ID. A better approach is to initialize the datepicker based on a class if you have multiple elements on the same page.

Using a class for the datepicker makes your code look like this:

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I tried with code like this:

And in the HEAD this:

Now it doesnt whow any of them.

Any idea?

Stephan Hochhaus

author

Posts: 18

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You must change the code inside the JavaScript function to use .datepicker and not #datepicker

Bear Bibeault

Sheriff

Posts: 67637

173

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

If you name something "fred", and then call for "barney", you should not be surprised when fred doesn't answer.

You might want to reacquaint yourself with how jQuery (and CSS) selectors work so that you know exactly what is being addressed when you use a jQuery selector.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Angus Ferguson

Ranch Hand

Posts: 1402

I like...

posted 7 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It works now. It was the dot issue

<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>

Evacuate the building! Here, take this tiny ad with you:

Free, earth friendly heat - from the CodeRanch trailboss

https://www.kickstarter.com/projects/paulwheaton/free-heat