Home Discussion Discuss: Java Script Code of Calendar and Date Picker or Popup Calendar

  • pop up calenderarvind kumar April 12, 2011 at 9:38 AM

    sir, your are exellent.i hope in future you will be more helpful to us.thanks

  • java scriptNutan Sharma April 18, 2011 at 5:32 PM

    when I put this code in my project it gives error, that Object expexted at html file setYear(this,'dob')

  • changejames May 27, 2011 at 3:05 PM

    i want to change the format of it to month/day/year

  • could not assign that date to text boxdhanabal May 29, 2011 at 9:27 PM

    the main one is cursor can move the over day numers,could not show hand symbol that mean on click event did not assigned to it,reply me sir

  • Thankszorigoo June 29, 2011 at 8:20 PM

    More more

  • Calendar and Date PickerAndreas August 26, 2011 at 3:13 PM

    Thanks for your script. I try to use it twice in the same form but it isn't working. Can you tell me what should I change? Thanks. John

  • niceSanjay kumar August 26, 2011 at 4:44 PM

    i have used dis code dis is working very fine....i love dis site...

  • confused!sandy June 6, 2013 at 1:17 PM

    how to append these HTML code and JS code in above

  • confused!sanju June 6, 2013 at 1:19 PM

    how to append these HTML codes and JS codes

  • respondcredit loans September 24, 2011 at 5:57 PM

    The business loans seem to be essential for people, which want to start their own organization. In fact, it is very easy to get a auto loan.

  • Hipravin January 17, 2012 at 5:23 PM

    good calender

  • QuestionYoon Moe January 11, 2013 at 12:33 PM

    how can do for 2013 to 2100 according to ascending?

  • Convert dd/mm/yy into yy/mm/ddRAMYA February 21, 2012 at 7:23 PM

    The calendar coding is quite easy to understand... Thanks for the easy coding. Can anyone send me the coding to convert the date format from dd/mm/yy into yy/mm/dd

  • DudaGGGames March 12, 2012 at 4:15 AM

    Esta interesante el artículo pero tengo una duda: Y si deseo agregar varios inputs cada uno con su calendario en la misma página? Ya intenté cambiando los id pero no corre ... Muchas gracias por tu respuesta

  • 2 Calendar on the same pageMike March 13, 2012 at 7:48 PM

    Hi, Thanks for tour awesome tutorial. I am designing a website for my final project. It is for a flight service and I am trying to implement 2 calendars on the page (one for arrival date and the other departure date). I have tried to implement your code and have instantiated it, however, only one works. Can you help me out, please?

  • codeambusher March 20, 2012 at 8:34 PM

    awesome job

  • question regarding this codeHana March 26, 2012 at 11:27 AM

    what if I need to change the years, start from current year 2012 till 2020, what should I change on that code

  • Regarding Error while combining this code with jspBhushan April 12, 2012 at 12:56 AM

    thanx sir, for this code. but while attaching this code with jsp. the combine code is not able to run perfectly. it display the calender and close it very well. but unable to print date on selection of particular date. my jsp code is:- <%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %> <%@ taglib prefix="tab" uri="http://ditchnet.org/jsp-tabs-taglib" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>Server Admin Panel</title> <link href="tpcss.css" rel="stylesheet" type="text/css" /> <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script> <script language="javaScript" type="text/javascript" src="calendar.js"></script> <link href="calendar.css" rel="stylesheet" type="text/css"> <script language="javascript"> function addDate(){ date = new Date(); var month = date.getMonth()+1; var day = date.getDate(); var year = date.getFullYear(); var hr=date.getHours(); var mini=date.getMinutes(); var sec=date.getSeconds(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; var n = weekday[date.getDay()]; if (document.getElementById('date').value == ''){ document.getElementById('date').value =n+'-'+day + '/' + month + '/' + year; } } </script> <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" /> </head> <body onLoad="addDate();"> <form> <font class="middle-font" > Welcome to Wi-Fi Security</font> <div align="right">Today is:-<input type="text" id="date" class="alignclock" maxlength="80" style="width:300px"></div> </form> <form> <input type="text" name="datum1"><a href="#" onClick="setYears(2000, 2020); showCalender(this, 'datum1');"> <img src="calender.png"></a> </form> <!-- Calender Script --> <table id="calenderTable"> <tbody id="calenderTableHead"> <tr> <td colspan="4" align="center"> <select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));" id="selectMonth"> <option value="0">Jan</option> <option value="1">Feb</option> <option value="2">Mar</option> <option value="3">Apr</option> <option value="4">May</option> <option value="5">Jun</option> <option value="6">Jul</option> <option value="7">Aug</option> <option value="8">Sep</option> <option value="9">Oct</option> <option value="10">Nov</option> <option value="11">Dec</option> </select> </td> <td colspan="2" align="center"> <select onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));" id="selectYear"> </select> </td> <td align="center"> <a href="#" onClick="closeCalender();"><font color="#003333" size="+1">X</font></a> </td> </tr> </tbody> <tbody id="calenderTableDays"> <tr style=""> <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td> </tr> </tbody> <tbody id="calender"></tbody> </table> <!-- End Calender Script --> <div id="CollapsiblePanel1" class="CollapsiblePanel"> <div class="CollapsiblePanelTab" tabindex="0">Login History</div> <div class="CollapsiblePanelContent"><font face="Times New Roman, Times, serif" size="4"><center><br />Please insert Date and Time for checking Login History of Specified Duration</center></font> <br /> <font class="textbx" style="position:fixed;left:310px;top:143px">Date &nbsp;<input type="text" id="datetxt" placeholder="Please Enter Date" size="20" style="position:fixed;left:350px;top:140px" /></font> <font class="textbx" style="position:fixed;left:550px;top:143px">Time &nbsp;<input type="text" id="hr1txt" size="20" style="position:fixed;left:600px;top:140px;width:30px;" />&nbsp;&nbsp;&nbsp;<input type="text" id="mn1txt" size="20" style="position:fixed;left:640px;top:140px;width:30px;"/><font class="textbx" style="position:fixed;left:680px;top:143px"> To &nbsp;<input type="text" id="hr2txt" size="20" style="position:fixed;left:710px;top:140px;width:30px;" />&nbsp;&nbsp;&nbsp;<input type="text" id="mn2txt" size="20" style="position:fixed;left:750px;top:140px;width:30px;" /></font></font> <input type="submit" id="logsearch" name="Search" value="Search" style="position:fixed;left:800px;top:135px;width:100px;height:30px" /> Content</div> </div> <div id="CollapsiblePanel2" class="CollapsiblePanel"> <div class="CollapsiblePanelTab" tabindex="0">Find Students</div> <div class="CollapsiblePanelContent"> Content</div> </div> <div id="CollapsiblePanel3" class="CollapsiblePanel"> <div class="CollapsiblePanelTab" tabindex="0">Current Login</div> <div class="CollapsiblePanelContent">Content</div> </div> <script type="text/javascript"> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1"); var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false}); var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false}); </script> </body> </html> pls help to remove this problem

  • calendariqbal mulani May 31, 2012 at 5:35 PM

    it's working very well.

  • Extending the yearbalavishnu June 4, 2012 at 3:50 PM

    I want to extend the year till 2013. pls help me

  • Thankyou very muchbalavishnu June 4, 2012 at 4:55 PM

    Its gr8.. I was looking for this for a long time :) Thx for ur help...

  • calendarrishita July 6, 2012 at 10:48 PM

    thanks a lot.

  • failed to work in mozillaspandana August 16, 2012 at 10:32 AM

    I induced the above code in jsp page, the calendar worked well in IE and browser in eclipse, but in mozilla the calendar is displayed but i'm unable to select the date.

  • regarding month case in output of calendar...manisha garg August 22, 2012 at 2:32 PM

    hey dis is vry awsum code nd wrkng fyn but i have a doubt-jow cn i get month as jan,feb.. written in output..i have changed d values in html code but still not getting the required output as- 12-AUG-2012

  • java scriptjaimin August 25, 2012 at 8:41 PM

    post more java script

  • request for calender pickermanish November 3, 2012 at 3:32 PM

    hi,i need php code for calender picker with textbox/dropdown list..can any one help me..? thanks in advance..

  • THANKSYOGESH MEHER April 3, 2013 at 12:49 PM


  • pertanyaanfitri ahmad April 25, 2013 at 2:40 PM

    this is good website..it can help me to to my final project..

  • Question Regarding Validationsivaji July 5, 2013 at 8:27 PM

    Hi Sir I would like do one validation according to my requirement.Which is I want to disable all previous dates how can we do this please help me on this thank in advance..

  • requestxxx February 13, 2014 at 11:53 AM

    delete this code.. add some new one.. so that everybody can used//

  • calendarmanju September 4, 2014 at 11:33 PM

    Hi, I have used the above sample code for createCalendar and customized it as per my requirements. Calendar logic helped me alot, thanks for the code snippet...

  • How to add another yearFrancis Appiah February 16, 2012 at 9:37 PM

    Am here by asking how can add another year into the already year.

  • updating the calendarsimo rahouti August 1, 2012 at 6:56 PM

    I want to update the year select, can you help me to do it please!

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
Related Articles
JavaScript Tutorial

Java Script Code of Calendar and Date Picker or Popup Calendar
Java Script Code of Calendar and Date Picker or Popup Calendar...; This is detailed java script code that can use for Calendar or date picker or popup... selected date from the date picker.  2: calendar.js: Java script code file 


JavaScript calendar date picker
{ } /* the table (within the div) that holds the date picker calendar */ .dpTable { font... picker We are going to discus about JavaScript calendar date picker. We have used basic JavaScript date picker functionality. We use drop-down calendar 

JavaScript Questions

javascript calendar popup code
javascript calendar popup code  javascript calendar popup code 

Date Calendar

need popup calender - Date Calendar
need popup calender  Hi, I need a pop up calender code in html, but i guess javascript would be needed for event handling . I need a code which... a butoon , a popup calendar pops-up and sends the value to the textbox 

Date Calendar

Date limit on Dojo Date picker - Date Calendar
date from Dojo date picker? Please give me code for it. Thanks in Advance... picker in my project. When user click on date text box, date picker will pop up... want to Date limit for date picker i.e. If i given date limit from 31/03/2008 

Development process Questions

Popup Calendar in Javascript - Development process
Popup Calendar in Javascript   Hi, Can u plz send me javascript code for dispalying date in textbox using popup calendar . Thanks Prakash   Hi Friend, Please visit the following link: http 

Struts Questions

HELP: Xin's Popup Calendar with Struts
HELP: Xin's Popup Calendar with Struts  HI, I am designing a website using "Struts" framework, but am not able to populate my html form date field using Xin's pop up calendar My Code: <html:form action= "/login"> 

Date Calendar

calendar - Date Calendar
Creating a Date calendar in Java  I am looking for a code for Creating a Date calendar in Java 

Date Calendar

javascript date picker - Date Calendar
javascript date picker  how to insert a date picker user control in a html/jsp using javascript??? please help, it's urgent.  Hi Friend, Please visit the following links: http://www.roseindia.net/javascript 

Date Calendar

Set Date limit for dojo date picker dynamically - Date Calendar
Set Date limit for dojo date picker dynamically  Hi all, I am using Dojo's date picker in my project. I am trying to set min & max value for disable dates from date picker. There are two fields which are using this date 

Date Calendar

java yesterday - Date Calendar
a calender from another windwo use java script package rajanikant.code.sep_2008... = new Date(); Calendar calendar = Calendar.getInstance(); calendar.setTime...java yesterday  Afternoon,Yesterday i have a question that how 

JavaScript Questions

Calendar Issues
Calendar Issues  I am trying to get this calendar to to display to date selected on a new page. Right now it opens a new page but does not diplay the date from the calendar on the previos page. Here is my code <!DOCTYPE 

Date Calendar

j2me code - Date Calendar
j2me code  how to write a calendar program using alert 

Date Calendar

hi - Date Calendar
); l.setText(sdf.format(cal.getTime())); d.setTitle("Date Picker...hi  sir,i am do the project on swings,i want a datepicker in java,how... ThanQ  Hi Friend, Try the following code 

Java Beginners

attach a calendar in java
attach a calendar in java  how i attach a calendar near the box of date of birth in application form of java   Hello Friend, Try...); l.setText(sdf.format(cal.getTime())); d.setTitle("Date Picker"); } public 

JavaScript Questions

calendar  I got one requirement like this i have to display a calendar with only current month and whenever user selects the date, that date needs to be display in a text field 

JavaScript Questions

calendar  sir, how to fix calendar in javascript..pls provide the complete source code..   Please visit the following link: http://www.roseindia.net/javascript/javascript-calendar.shtml 

Date Calendar

date format - Date Calendar
date format  how to convert dd-mmm-yyyy date format to gregorian calendar format in JSP please tell me the code  Hi friend, Code... SimpleDateFormat("dd-MMM-yyyy"); date = (Date)format.parse(strDate); Calendar cal 

Date Calendar

Date format - Date Calendar
Date format  please convert dd-mmm-yy date format to gregorian calendar date format.  Hi friend, Code related your Problem: import...]); Calendar calendar = new GregorianCalendar(pdt); Date time = new Date 

Date Calendar

LINUX SHELL SCRIPT   I wish to create a bash shell script that meets the requirements below. ?Write a bash shell script called how_many_to_go... the end of the current month (based on the output of the date command). o Do 

Date Calendar

Date Formay - Date Calendar
Date Formay  Sir, How to comapare two different date format in java.  Hi friend, Code to compare two different date import... main(String args[]){ Calendar cal = Calendar.getInstance(); Calendar 

Date Calendar

How to build calander - Date Calendar
; } /* the div that holds the date picker calendar */ .dpDiv { } /* the table (within the div) that holds the date picker calendar... to today, or close the calendar var today = new Date(); var todayString 

Swing AWT

Date Picker
Date Picker   Hi Java Developers ! I came across the coding for date picker in this site which was almost similar to the coding done by our team... in the calendar( by using date picker ) it needs to get updated/highlighted 

PHP Questions

Date Picker
Date Picker  "I want to set default calendar date when using datepicker. This date means auto-loaded date when the calendar appears. The default date is the current date. I want to change it. How could I do 

Date Calendar

date - Date Calendar
date   hi, sir i am doing student details project in swing but i am not getting current date in jtextfield in date it is giving ambigious error...;Please elaborate more..  Hi Friend, Try the following code: import 

Date Calendar

Date format - Date Calendar
Date format  Hi All, I am getting a date from database as a format 2010-15-07.I need to change it to 07/15/2010 and display it on my date field.Every time i need to check the format of the date field and make sure the correct 

Date Calendar

datetimepicker - Date Calendar
datetimepicker  Hi, Iam using date time picker for the selection of the date in the input field but i want to disable the past dates i.e from yesterday date. can any one help in disabling the past dates from 

Date Calendar

How to display current date in textbox - Date Calendar
the following code: <script> function addDate(){ date = new Date(); var...How to display current date in textbox  Hi guys, I'm really need your help. This is my source code. var currentTime = new 

Date Calendar

continue java - Date Calendar
date1;// = new Date(); Calendar calendar = Calendar.getInstance...continue java  and how to subtract date(day month year) form jframe... and source code where you having the problem. Thanks   Thanks for posting 

Date Calendar

this is my code java - Date Calendar
) throws ParseException{ Date date1;// = new Date(); Calendar calendar...this is my code java  /* * NewJFrame.java * * Created on 11... NOT modify this code. The content of this method is * always regenerated