SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Calendar Help

  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calendar Help

    I have a calender that I am sing for an application and a client that requires the date to be displayed differently than the default mm/dd/yyyy - they require the calendar to display the day in this format: Jan 01 2010, Feb 01 2010, Mar 01 2010 and so on.

    can someone please direct me on how to change the below JS to accommodate this request? I am lost, especially since the JS below deals with dates.

    Thanks, much appreciated!!

    Code:
     
    // cal.js
    
    // Output Element
    var ds_oe = ds_getel('ds_calclass');
    // Container
    var ds_ce = ds_getel('ds_conclass');
    
    // Output Buffering
    var ds_ob = ''; 
    
    //initial date
    var ds_i_date;
    var ds_c_month;
    var ds_c_year;
    
    var ds_element; // Text Element...
    var ds_element2; // Text Element 2... EX. start and end date 
    var ds_offset=0; // Days to add to 2nd date
    
    var ds_date_format='yyyy-MM-dd';//MySQL default 
    
    
    var ds_monthnames = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
    ]; // You can translate it for your language.
    
    var ds_daynames = [
    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
    ]; // You can translate it for your language.
    
    
    
    // Get Element By Id
    function ds_getel(id) {
          return document.getElementById(id);
    }
    
    // Get the left and the top of the element.
    function ds_getleft(el) {
          var tmp = el.offsetLeft;
          el = el.offsetParent
          while(el) {
                tmp += el.offsetLeft;
                el = el.offsetParent;
          }
          return tmp;
    }
    
    function ds_gettop(el) {
          var tmp = el.offsetTop;
          el = el.offsetParent
          while(el) {
                tmp += el.offsetTop;
                el = el.offsetParent;
          }
          return tmp;
    }
    
    
    function ds_ob_clean() {
          ds_ob = '';
    }
    
    function ds_ob_flush() {
          ds_oe.innerHTML = ds_ob;
          ds_ob_clean();
    }
    
    function ds_echo(t) {
          ds_ob += t;
    }
    
    
    // Calendar template
    function ds_template_main_above(t) {
          return '<table cellpadding="3" cellspacing="0" class="ds_tbl">'
                + '<tr>'
                  + '<td colspan="7" valign="top" class="ds_headSM" style="font-size:9px;" ><img src="calendar/close.gif" onclick="ds_hi();" style="cursor: pointer;"/></td>'
                 + '</tr>'
               + '<tr>'
                 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();" ><img src="calendar/arrowLL.gif" /></td>'
                 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><img src="calendar/arrowL.gif" /></td>'
                 + '<td colspan="3" class="ds_head">' + t + '</td>'
                 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();"><img src="calendar/arrowR.gif" /></td>'
                 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();"><img src="calendar/arrowRR.gif" /></td>'
                 + '</tr>';
                 + '<tr>';
    }
    
    function ds_template_day_row(t) {
          return '<td class="ds_subhead">' + t + '</td>';
          // Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
    }
    
    function ds_template_new_week() {
          return '</tr><tr>';
    }
    
    function ds_template_blank_cell(colspan) {
          return '<td colspan="' + colspan + '"></td>'
    }
    
    function ds_template_day(d, m, y) {
          //date in the past, disable the onclick (change the format?)
          if(past(d,m,y)){
                return '<td class="ds_cell_past">' + d + '</td>';
          }
          //the currently selected date, highlighted
          if(d==ds_i_date.getDate()&&((m*1)-1)==ds_i_date.getMonth()&&y==ds_i_date.getFullYear()){ 
                return '<td class="ds_cell_selected" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
          }
          //regular date 
          else{
                return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';// Define width the day row.
          }
    }
    
    function ds_template_main_below() {
          var today=new Date();
          var d=today.getDate();
          var m=(today.getMonth()+1);
          var y=today.getFullYear();
          return '</tr>'
          		+'<tr>'
          			+'<td colspan="7" valign="top" class="ds_ftr" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')"><span class="ds_ftrTxt">Select Today: '+ds_format_date(d, m, y)+'</span></td>'
          		+'</tr>'
               + '</table>';
    }
    
     
    
    // This one draws calendar...
    function ds_draw_calendar(m, y) {
          // First clean the output buffer.
          ds_ob_clean();
          // Here we go, do the header
          ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
          for (i = 0; i < 7; i ++) {
                ds_echo (ds_template_day_row(ds_daynames[i]));
          }
          // Make a date object.
          var ds_dc_date = new Date();
          ds_dc_date.setDate(1);
          ds_dc_date.setMonth(m - 1);
          ds_dc_date.setFullYear(y);
          if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                days = 31;
          } else if (m == 4 || m == 6 || m == 9 || m == 11) {
                days = 30;
          } else {
                days = (y % 4 == 0) ? 29 : 28;
          }
          var first_day = ds_dc_date.getDay();
          var first_loop = 1;
          // Start the first week
          ds_echo (ds_template_new_week());
          // If sunday is not the first day of the month, make a blank cell...
          if (first_day != 0) {
                ds_echo (ds_template_blank_cell(first_day));
          }
          var j = first_day;
          for (i = 0; i < days; i ++) {
                // Today is sunday, make a new week.
                // If this sunday is the first day of the month,
                // we've made a new row for you already.
                if (j == 0 && !first_loop) {
                      // New week!!
                      ds_echo (ds_template_new_week());
                }
                // Make a row of that day!
                ds_echo (ds_template_day(i + 1, m, y));
                // This is not first loop anymore...
                first_loop = 0;
                // What is the next day?
                j ++;
                j %= 7;
          }
          // Do the footer
          ds_echo (ds_template_main_below());
          // And let's display..
          ds_ob_flush();
          // Scroll it into view.
          //ds_ce.scrollIntoView();
    
    }
    
    
    
    // 2 dates are connected, change the 2nd to match 1st
    function ds_sh2(t,id){
    	ds_element2=ds_getel(id);
    	ds_sh(t);
    }
    function ds_sh2Image(id1,id2){
    	ds_sh(ds_getel(id),id2);
    }
    
    // 2 dates are connected, change the 2nd to be 1st plus numdays
    function ds_sh2offset(t,id,d){
    	ds_element2=ds_getel(id);
    	ds_offset=d;
    	ds_sh(t);
    }
    function ds_sh2offsetImage(id1,id2,d){
    	ds_sh2offset(ds_getel(id1),id2,d);
    }
    
    // Click a calendar image to get the cal.
    function ds_shImage(id){
    	ds_sh(ds_getel(id));
    }
    // A function to show the calendar.
    // When user click on the date, it will set the content of t.
    function ds_sh(t) {
          // Set the element to set...
          ds_element = t;
          
          //Get the Date and set the current month and year.
          if(ds_i_date!=null){
          	   //use ds_i_date
          }
          else if(t.value!=""){
          	ds_i_date = ds_makeDate(t.value);
          }
          else if(document.getElementById('mstart')){
          	ds_i_date = ds_makeDate(document.getElementById('mstart').innerHTML);
          }
          else{
          	ds_i_date=new Date();
          }
          
          
          
          ds_c_month = ds_i_date.getMonth() + 1;
          ds_c_year = ds_i_date.getFullYear();
    
          // Draw the calendar
          ds_draw_calendar(ds_c_month, ds_c_year);
    
          // To change the position properly, we must show it first.
          ds_ce.style.display = '';
    
          // Move the calendar container!
          the_left = ds_getleft(t);
          the_top = ds_gettop(t) + t.offsetHeight;
    
          ds_ce.style.left = the_left + 'px';
          ds_ce.style.top = the_top + 'px';
    
          // Scroll it into view.
          //ds_ce.scrollIntoView();
    }
    
     
    
    // Hide the calendar.
    
    function ds_hi() {
          ds_ce.style.display = 'none';
    }
    
     
    
    // Moves to the next month...
    
    function ds_nm() {
          // Increase the current month.
          ds_c_month ++;
          // We have passed December, let's go to the next year.
          // Increase the current year, and set the current month to January.
          if (ds_c_month > 12) {
                ds_c_month = 1; 
                ds_c_year++;
          }
    
          // Redraw the calendar.
          ds_draw_calendar(ds_c_month, ds_c_year);
    }
    
     
    
    // Moves to the previous month...
    function ds_pm() {
          ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
          // We have passed January, let's go back to the previous year.
          // Decrease the current year, and set the current month to December.
          if (ds_c_month < 1) {
                ds_c_month = 12; 
                ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
          }
    
          // Redraw the calendar.
          ds_draw_calendar(ds_c_month, ds_c_year);
    }
    
     
    
    // Moves to the next year...
    function ds_ny() {
          // Increase the current year.
          ds_c_year++;
          // Redraw the calendar.
          ds_draw_calendar(ds_c_month, ds_c_year);
    }
    
     
    
    // Moves to the previous year...
    function ds_py() {
          // Decrease the current year.
          ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
          // Redraw the calendar.
          ds_draw_calendar(ds_c_month, ds_c_year);
    }
     
    
    function ds_format_date(d, m, y) {
        var mDig=(ds_date_format.lastIndexOf('M')-ds_date_format.indexOf('M'))+1;
        var dDig=(ds_date_format.lastIndexOf('d')-ds_date_format.indexOf('d'))+1;
        var yDig=(ds_date_format.lastIndexOf('y')-ds_date_format.indexOf('y'))+1;
        
        var m2 = '00' + m;
        m2 = m2.substr(m2.length - mDig);
        var d2 = '00' + d;
        d2 = d2.substr(d2.length - dDig);
        var y2=''+y;
        y2=y2.substr(y2.length - yDig);
    
    	var s=getSeperator();
    	var o=getOrder();
    	var returndate='';
    
    	for(var i=0; i<o.length; i++){
    		var ch=o.substring(i,i+1);
    		if(ch=='y'){
    			returndate+=(s+y2);	
    		}
    		else if(ch=='M'){
    			returndate+=(s+m2);	
    		}
    		else{
    			returndate+=(s+d2);	
    		}
    	}
    	var r2=returndate.substring(returndate.length-ds_date_format.length);
    	return returndate.substring(returndate.length-ds_date_format.length);
    
    }
    
    function ds_format_dateObject(date) {
    	return ds_format_date(date.getDate(), date.getMonth() + 1, date.getFullYear());
    }
     
    
    // When the user clicks the day.
    
    function ds_onclick(d, m, y) {
    	  // Hide the calendar.
          ds_hi();
          // Set our global date, so calendar is the same next time we come to it
          ds_i_date.setFullYear(y,((m*1)-1),d);
          
          // Set the value of it, if we can.
          if (typeof(ds_element.value) != 'undefined') {
                ds_element.value = ds_format_date(d, m, y);
          // Maybe we want to set the HTML in it.
          } else if (typeof(ds_element.innerHTML) != 'undefined') {
                ds_element.innerHTML = ds_format_date(d, m, y);
          // I don't know how should we display it, just alert it to user.
          } else {
                alert (ds_format_date(d, m, y));
          }
          
          if(ds_element2!=null){
          	var el2date=new Date();
    		el2date.setTime(ds_i_date.getTime()+(ds_offset*86400000));
    		var el2formated=ds_format_dateObject(el2date);
    		
          	if (typeof(ds_element2.value) != 'undefined') {
          		ds_element2.value = el2formated;
    	    // Maybe we want to set the HTML in it.
    		} else if (typeof(ds_element2.innerHTML) != 'undefined') {
    	    	ds_element2.innerHTML = el2formated;
    	    // I don't know how should we display it, just alert it to user.
    	    } else {
    	    	alert (el2formated);
    	    }
    	    ds_element2=null;
          	ds_offset=0;
          }
          
    }
    
    function ds_makeDate(d){
          //MM/dd/YYYY
          var m1=ds_date_format.indexOf('M');
          var m2=ds_date_format.lastIndexOf('M')+1;
          var d1=ds_date_format.indexOf('d');
          var d2=ds_date_format.lastIndexOf('d')+1;
          var y1=ds_date_format.indexOf('y');
          var y2=ds_date_format.lastIndexOf('y')+1;
          
          var month=d.substring(m1,m2);
          var day=d.substring(d1,d2);
          var year=d.substring(y1,y2);
          var year2 = '20' + year;
       	  year2 = year2.substr(year2.length - 4);
          
          var ped=new Date();
          ped.setFullYear(year2,((month*1)-1),day);
          return ped;
    
    }
    
    function setDateFormat(f){
    	ds_date_format=f;
    }
    
    function past(d,m,y){
          var today = new Date();
          var pd=new Date();
          pd.setFullYear(y,((m*1)-1),d);
          return ((pd<today) ? true : false);
    }
    function getSeperator(){
    	for(var i=0; i<ds_date_format.length; i++){
    		var ch=ds_date_format.substring(i,i+1);
    		if(ch!='y'&&ch!='M'&&ch!='D'){
    			return ch;
    		}
    	}
    }
    function getOrder(){
    	var m=ds_date_format.indexOf('M');
    	var d=ds_date_format.indexOf('d');
    	var y=ds_date_format.indexOf('y');
    	
    	if(y<m && y<d){
    		if(m<d){
    			return 'yMd';
    		}
    		else {
    			return 'ydM';
    		}
    	}
    	else if(m<y && m<d){
    		if(y<d){
    			return 'Myd';
    		}
    		else {
    			return 'Mdy';
    		}
    	}
    	else {
    		if(m<y){
    			return 'dMy';
    		}
    		else {
    			return 'dyM';
    		}
    	}
    	
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You can use the setDateFormat() function to change the ordering and the separators

    Code javascript:
    setDateFormat('MM dd yyyy');

    But that calendar code doesn't support anything other than M d and y for the roman numeral variations.

    It might take extensive rewriting to allow it to support full month names, or partial month names, without breaking other parts of its functionality.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I figured, thanks for the feedback.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    What if you farmed off the date formatting to a more specialised function instead?

    There's a date format method that would work perfect.

    M is supposed to be for the short textual month names anyway, so the whole ds_date_format function could just be replaced with:

    Code javascript:
    var ds_date_format='Y-m-d'; //MySQL default 
    ...
    function ds_format_date(d, m, y) {
        return new Date(y+'-'+m+'-'+d).format(ds_date_format);
    }

    You can then delete the getSeparator and getOrder functions too.

    Your date format can now be specified as:

    Code "javascript':
    setDateFormat('M d Y');

    "Jan 01 2010"

    The only other place that ds_date_format is used is in the ds_makeDate function, for when the date field automatically contains a value already. You might be able to get away with only the following to replace the ds_makeDate function:

    Code "javsacript':
    function ds_makeDate(d){
        return new Date(Date.parse(d));
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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