www.webdeveloper.com
Results 1 to 7 of 7

Thread: Popup date picker

  1. #1
    Join Date
    Jul 2009
    Posts
    4

    Popup date picker

    Can anyone point me to some code for a good popup date picker that can show the date in the yyyy-mm-dd format. I have been searching the web for some and most are junk, too complicated to install or not customizable enough to change the date.

    I would greatly appreciate it.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Post an small example of what you are trying to do.

    Are you trying to pick a date from a pop-up calendar?
    Or a select box (drop-down list of dates)?
    Or separate fields for YYYY MM DD values?
    Or something else ...

    Perhaps you could also give an example of, or links to, what you consider junk, too complicated and/or non-customizable enough.

  3. #3
    Join Date
    Jul 2009
    Posts
    4
    I am trying to allow the user's to pick a date from a calendar. I write php but javascript would be better for this type of thing. I have tried different code off the web, some just did not work, some had so many different scripts that I couldn't find how to customize it through the code. I am just looking for a simple picker that has the date format yyyy-mm-dd and hopefully would have a little css or allow me to add some style to it.

    Thanks

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb Consider this ...

    Here's a simple one of my own design.

    One line change to modify output format (see commented line in JS file)
    I set it for your desired format of YYYY/MM/DD

    CSS included in HTML file.

    External 'cal.js' file
    Code:
    // Calendar Display (cal.js)
    
    var now = new Date();
    var monthM = now.getMonth()+1;
    var yearM = now.getFullYear();
    var MonthOfYear = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var DaysInMonth = ['',31,28,31,30,31,30,31,31,30,31,30,31];
    var monthC = 0;  var yearC = 0;
    
    function Initialize() {
      var now = new Date();  				// normally use this
      monthM = now.getMonth()+1;  	yearM = now.getFullYear();
      monthC = monthM;		yearC = yearM;
      return '';
    }
    
    function CalendarRedisplay(M,Y) {
      if (M < 1) { M = 12; Y--; }
      if (M > 12) { M = 1; Y++; }
      monthC = M;  yearC = Y;
      document.getElementById("calM").innerHTML =  displayCalendar(M,Y);
    }
    
    function displayCalendar(month, year,IDS,TBid) {
      month = parseInt(month);
      year = parseInt(year);
      var i = 0;
      var days = getDaysInMonth(month,year);
      var firstOfMonth = new Date (year, (month-1), 1);
      var startingPos = firstOfMonth.getDay();
      days += startingPos;
      var page = '<table border="1" width="100%"><tr><th colspan="7">';
      page += '<button onClick="CalendarRedisplay('+month+','+(year-1)+');return false">|</button> ';
      page += '<button onClick="CalendarRedisplay('+(month-1)+','+year+');return false">&lt;</button> ';
    
      page += '<button onClick="CalendarRedisplay('+monthM+','+yearM+');return false;">';
      page += MonthOfYear[month]+' '+year+'</button>';
    
      page += ' <button onClick="CalendarRedisplay('+(month+1)+','+year+');return false">&gt;</button>';
      page += ' <button onClick="CalendarRedisplay('+month+','+(year+1)+');return false">|</button>';
      page += '</th></tr>';
    
      page += '<tr><th class="date">Su</th><th class="date">Mo</th><th class="date">Tu</th><th class="date">';
      page += 'We</th><th class="date">Th</th><th class="date">Fr</th><th class="date">Sa</th></tr>';
      page += '<tr>';    
      for (i = 0; i < startingPos; i++) {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += '<th><span class="date">&nbsp;</span></th>';
      }
      for (i = startingPos; i < days; i++) {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += '<th><span class="date"';
    
    // return date formatted as desired
    // format for following line is MM/DD/YYYY
    //    page += ' onclick="calAction('+"'"+pad(month)+'/'+pad(i-startingPos+1)+'/'+year+"'"+',false)">';
    // format for following line is YYYY/MM/DD
        page += ' onclick="calAction('+"'"+year+'/'+pad(month)+'/'+pad(i-startingPos+1)+"'"+',false)">';
    
        page += (i-startingPos+1) + '</span></th>';
      }
      for (i=days; i<42; i++)  {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += "<td>&nbsp;</td>";
      }
      page += '</tr></table>';
      return page;
    }
    
    function getDaysInMonth(month,year)  {
      var days = DaysInMonth[month];
      if ((month == 2) && isLeapYear(year)) { days=29; } 
      return days;
    }
    
    function isLeapYear (Year) {
     if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); }
    }
    
    function pad(value) {
      return value=(value < 10)?'0'+value:value;
    }
    HTML file
    Code:
    <html>
    <head>
    <title>Quick Calendar</title>
    
    <style type="text/css">
      div.cal { width:225px; display:none; } /* border: 1px solid blue; } */
      .date { cursor:pointer; font-size:0.9em; }  /* cursor:default; } */
    </style>
    
    <script type="text/javascript" src="cal.js"></script>
    
    <script type="text/javascript">
    document.onkeydown = function (evt) {
        var e = evt || window.event;
        if (e.keyCode == 27) { calAction('',true); }
    }
    
    function calAction(info,bypass) {
      document.getElementById('calM').style.display = 'none';
      if (!bypass) { document.getElementById('SelectedDate').value = info; }
    }
    </script>
    
    </head>
    <body onload="Initialize();displayCalendar(monthM,yearM)">
    <input type="text" id="SelectedDate" value="" size="10"> 
    
    <span onclick="document.getElementById('calM').style.display='block'">
    <image src="cal.gif"></span>
    
    <script type="text/javascript">
      document.write('<div id="calM" class="cal">'+displayCalendar(monthM,yearM)+'</div>');
    </script>
    
    </td>
    <tr></table>
    </body>
    </html>
    Uses a common 'cal.gif' image (See Attached)

    Put all files in the same directory for ease of use.
    Post back if you have problems.

    If you change the CSS significantly (fonts, colors, etc)
    or link to an external file then
    post them so we can see your ideas.

    Simple instructions:
    '|' labeled buttons move back/forward a year.
    '<' and '>' buttons move back/forward a month.
    Click on month display button to go back to current month display.
    ESC exits without any change.
    Click on date to change display field.

    Hard to make much simpler but I'm sure someone will try.
    Attached Images Attached Images

  5. #5
    Join Date
    Jul 2009
    Posts
    4
    It looks like this is hard coded that the calendar is for only one element "SelectedDate." Is that correct? I have many text boxes that need calendars, how do I reference each one?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Exclamation

    Quote Originally Posted by lubber123 View Post
    It looks like this is hard coded that the calendar is for only one element "SelectedDate." Is that correct? I have many text boxes that need calendars, how do I reference each one?
    Currently, yes.
    Would be nice if you gave all your requirements in your request.

  7. #7
    Join Date
    Jul 2009
    Posts
    4
    Okay, well thanks for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles