How to add Date Picker in JSP - Stack Overflow

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams <label for="surveyStartDate">Survey Start Date:</label> <input type="text" name="surveyStartDate" value=""> <label for="surveyEndDate">Survey End Date:</label> <input type="text" name="surveyEndDate" value=""> <label for="eventDate">Event Date:</label> <input type="text" name="eventDate" value="">

Here is a bit of the code to see where it falls to choose the date picker. Where are some good sites that I can look at to pick the date picker? I just wanted to get fancy and make it easy to pick dates

<!-- FORM VALIDATION -->
<script type="text/javascript">
    //Value of 'btn' set via onclick on submit/clear buttons at end of form
    var btn = "";
    function validate(myform) {
        if (btn == "submit") {
            //Validate Form only on 'submit' button (not for 'clear' button)
            var num = 0;
            var message = "";
            if(myform.name.value == "") {
                message += "- Group Name must be completed \n";
                num = 1;
            if(myform.highschool.value == "") {
                message += "- High School must be completed \n";
                num = 1;
            if(myform.teacher.value == "") {
                message += "- Teacher must be completed \n";
                num = 1;
            if(myform.classPeriod.value == "") {
                message += "- Period must be completed \n";
                num = 1;
            if(myform.surveyStartDate.value == "") {
                message += "- Survey Start Date must be completed \n";
                num = 1;
            if(myform.surveyEndDate.value == "") {
                message += "- Survey End Date must be completed \n";
                num = 1;
            if(myform.eventDate.value == "") {
                message += "- Event Date must be completed \n";
                num = 1;
            if (num == 1) { 
                alert ("Please complete or correct the following required fields: \n\n"+message);
                return false;
            } else {
                return true;
            } //end if
        } //end button if
    } //end func
</script>
</head>
<div id="wrapper">
<!--HEADER-->
<div id="header">
<img id="logoImg" src="images/cislogo.png" width="200" height="150" alt="Communities In Schools Logo">
<!--Header Text-->
<img id="headerText" src="images/realityuhead.png" width="600" height="80" alt="Reality University Program">
<!--REALITY U LOGO-->
<img id="logoImnewGrp" src="images/realityulogo.png" width="100" height="95" alt="Reality U Logo">
<!--NAVIGATION-->
<div id="nav">
    <li><a href="index.jsp">Home</a></li>   
    <li><a href="adminhome.jsp">Admin Home</a></li>
    <li><a href="newgroup.jsp">New Group</a></li>
    <li><a href="opengroup.jsp">Open Group</a></li>
    <li><a href="occupations.jsp">Edit Occupations</a></li>
    <li><a href="helpadmin.html">Help</a></li>
</div><!--END NAVIGATION-->
</div><!--END HEADER-->
<!--START FORM-->
<form id="newGroupForm" method="post" action="http://localhost:8080/RealityUWeb/NewGroupServlet" onSubmit="return validate(this);">
<fieldset>
<br><br>
//If form never been filled in yet, all values are blank
if (session.getAttribute("newGrp") == null) {
        <label for="name">Group Name:</label>
        <input type="text" name="name" value="">
        <label for="highschool">High School:</label>
        <input type="text" name="highschool" value="">
        <label for="teacher">Teacher:</label>
        <input type="text" name="teacher" value="">
        <label for="classPeriod">Period:</label>
        <input type="text" name="classPeriod" value="">
        <label for="surveyStartDate">Survey Start Date:</label>
        <input type="text" name="surveyStartDate" value="">
        <label for="surveyEndDate">Survey End Date:</label>
        <input type="text" name="surveyEndDate" value="">
        <label for="eventDate">Event Date:</label>
        <input type="text" name="eventDate" value="">
        <label for="studentAccessCode">Student Access Code:</label>
        <input type="text" name="studentAccessCode" value="(Auto-Generated after Submit)" readonly>
Adding a date picker to a JSP page is not specifically connected to JSP. You may do this as doing with plain HTML markup. 
To add a date picker, you have to choose a good Javascript date picker. As far as I know JqueryUI date picker is good. Here is another demo with Jquery Mobile.
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.