Share on Google+Share on Google+

suresh anugandula
2 Answer(s)      6 years and 6 months ago
Posted in : JavaScript Questions

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.
View Answers

May 23, 2011 at 3:43 PM


<script type="text/javascript">
function SelectDate(){
    D = document.getElementById('Date').value;
        D = D.split('/');
        Dat = new Date();
        D = new Array(Dat.getDay(), Dat.getMonth(), Dat.getFullYear());
    win ="pickmonth.html","win","status=no,scrollbars=no,toolbar=no,menubar=no,height=190,width=160");
    win.MakeDate(D[2], D[1], D[0]);
function SetDate(Day, Month, Year){
    document.getElementById('Date').value = Day + '/' + Month + '/' + Year;
<form name="DateTest">
<input type="text" name="Date" id="Date" readonly><input type="button" onClick="SelectDate('Date1')" value="Select"><br>

May 23, 2011 at 3:44 PM


<title>Date Picker</title>
<script type="text/javascript">
ReturnFunc = '';
function Calendar(iYear, iMonth, iDay, ContainerId, ClassName){
    MonthNames = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
    oDate = new Date();
    Year = (iYear == null) ? oDate.getFullYear() : iYear;
    Month = (iMonth == null) ? oDate.getMonth() : iMonth - 1;
    while(Month < 0){Month += 12;Year--}
    while(Month >= 12){Month -= 12;Year++}
    Day = (iDay == null) ? 0 : iDay;
    oDate = new Date(Year, Month, 1);
    NextMonth = new Date(Year, Month + 1, 1);
    WeekStart = oDate.getDay();
    MonthDays = Math.round((NextMonth.getTime() - oDate.getTime()) / 86400000) + 1;
    if(ContainerId != null) {
        ContainerId = ContainerId;
        Container = document.getElementById(ContainerId);
            document.write('<div id="' + ContainerId + '">&nbsp;</div>');
    else {
            ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
        document.write('<div id="' + ContainerId + '">&nbsp;</div>');
    Container = document.getElementById(ContainerId);
    ClassName = (ClassName == null) ? 'tblCalendar' : ClassName;
    HTML = '<table border=1>';
    HTML += '<tr bgcolor="red"><td ></td><td colspan="5" class="Title">' + MonthNames[Month] + ' ' + Year + '</td><td ></td></tr>';
    HTML += '<tr ><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>';
    HTML += '<tr>';
    for(DayCounter = 0; DayCounter < WeekStart; DayCounter++){
        HTML += '<td>&nbsp;</td>';
    for(DayCounter = 1; DayCounter < MonthDays; DayCounter++){
        if((DayCounter + WeekStart) % 7 == 1) HTML += '<tr class="Days">';
        if(DayCounter == Day)
            HTML += '<td ><a href="javascript:ReturnDate(' + DayCounter + ')">' + DayCounter + '</a></td>';
        else HTML += '<td><a href="javascript:ReturnDate(' + DayCounter + ')">' + DayCounter + '</a></td>';
        if((DayCounter + WeekStart) % 7 == 0) HTML += '</tr>';
    for(j = (42 - (MonthDays + WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++){
        HTML += '<td>&nbsp;</td>';
        if((j - DayCounter) % 7 == 0) HTML += '</tr>';
    HTML += '</table>';
    Container.innerHTML = HTML;
    return ContainerId;
function ReturnDate(Day){
    opener.SetDate(Day, Month+1, Year);
function MakeDate(iYear, iMonth, iDay, fn){
    D = new Date();
    Year = (typeof(iYear) != 'undefined') ? iYear : D.getFullYear();
    Month = (typeof(iMonth) != 'undefined') ? iMonth : D.getMonth();
    Day = (typeof(iDay) != 'undefined') ? iDay : D.getDate();
    ReturnFunc = fn;
    id = Calendar(Year, Month+1, Day, 'cal', 'CalendarRed');
<body onLoad="MakeDate();">
<div id='cal'> </div>


Related Tutorials/Questions & Answers:
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
calendar  sir, how to fix calendar in javascript..pls provide the complete source code..   Please visit the following link:
calendar - Date Calendar
Creating a Date calendar in Java  I am looking for a code for Creating a Date calendar in Java
calendar - Struts
Java calendar example  Please explain the Java calendar example
calendar js
calendar js  there are two calendar on form and i want that once date chosen from first calendar , the second calendar should be disabled till that date. for eg once i have chosen date 21-03-2012 from first calendar
Java Calendar !?
Java Calendar !?  I need to create a Java Calendar in an Applet. The calendar displays months (jan - dec) in a 3x4 grid ... jan feb march \n april.... so if a user picks the year 2000 show the calendar from that year. So how do i
Java Calendar issue - Date Calendar
Java Calendar issue  Hi I have having weird situation with java Calendar, its driving me crazy. My requirenment is that i got a xml schema element that accepts only Calendar Type Say element 2011-09-25T13:00:00 Say
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
javascript calendar popup code
javascript calendar popup code  javascript calendar popup code
Operations with Calendar
getDateOfWeekDay(int weekId, int year, int weekDay){ Calendar cal
Calendar Operation
Calendar Operation  I have a date - example - 22-09-2012(start date) I have to find my end date based on the current quarter My input are month of the quarter which is a list box with values(1,2,3) , Day of the month in list
Calendar       In this section we are displaying the days of  a specific month and the calendar format of the days for this month. We are also checking whether the year
(Displaying a calendar in GUI
(Displaying a calendar in GUI  (Displaying a calendar) Write a program that displays the calendar for the current month, as Use labels, and set texts on the labels to display the calendar."The Calendar and GregorianCalendar
event calendar sample
event calendar sample  creating a event calendar for my small app in PHP.. can any one explain about it's design with example php event calendar script
j2me code - Date Calendar
j2me code  how to write a calendar program using alert
calendar in php code - PHP
calendar in php code   Any Idea to create a calendar for school in PHP? I need a simple nd handy code
Version of com.obdobion>calendar dependency
List of Version of com.obdobion>calendar dependency
Gregorian calendar class
Gregorian calendar class  Hai... What is the purpose of gregorian calendar class?   Java provides the standard calendar by providing the class GregorianCalendar in java.util package. The Gregorian calendar is used
Java Coding - Date Calendar
Java Coding  Write a program that prompts the user to enter the year and first day of the year and displays the calendar for the year on the console... 1,2005, your program should display the calendar for each month in the year
class Calendar - Java Beginners
print a calendar for any month starting Junuary 1,1500.Note that the day... Calendar,include the following operations: a.Determine the first day of the month for which the calendar will be printed.Call this operation firstDayOfMonth
php date input calendar
php date input calendar  I'm having an issue while writing the date input calendar function in PHP.. any help? Thanks
codes for displaying in calendar
codes for displaying in calendar  can i get jsp codes for displaying comments, when the pointer is placed over the particular date in calendar
Javascript Create Calendar
Javascript Create Calendar  how to create calender application   Please visit the following link: Javascript create Calendar
What is Calendar class in Java?
What is Calendar class in Java?  Hi, What is Calendar class in Java? I want to learn about this class to make use of it in Java programs. Thanks... find tutorials at Calendar tutorial page. Thanks
Need an Example of calendar event in java
Need an Example of calendar event in java  can somebody give me an example of calendar event of java
need urgently - Date Calendar
need urgently  Hi, i need a calendar to pick the date,that calender should be in the same page,means suppose one text field todate is there in my page besides it only i need one calender if i click on todays date the calendar calendar control calendar control  I have used 2 text box to display calendar control... one is fromdate and another is todate... In database also fromdate and todate is displayed.... I want only fromdate and todate should be open... ie
conept - Date Calendar
example of using Calendar in JSP page by the JavaScript. has a very good example of using Calendar in JSP page by the JavaScript. http... link. This link has a very good example of using Calendar in JSP page
datetimepicker - Date Calendar
datetimepicker stylesheet problem  Hi every one i am getting a style sheet problem after select in the datetimepicker icon. I am not able to get the calendar in fields after the datepikcer are highlighting
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


Advertisement null