Other date formats for the DatePicker?

The new DatePicker is simply wonderful... it was certainly something on my silent wishlist :wink:

The default format of the DatePicker seems to be a shortdate presented as DD/MM/YYYY.

Is there currently any support (or future planned support) for other date formats? Looking for long-based formats similar to "September 9, 2008" or "Sept 9, 2008".

well, you need to change this in the calendar.js file and it will be ready!🙂

I thought I found gold with the line... format: 'd/m/y' ... but any tweaks I made to it really messed things up

I think i need to play with...

          var tddate = ft.replace('d',day);
				  tddate = tddate.replace('m',month);
				  tddate = tddate.replace('y',date.getFullYear());
				  
        	td.setProperty('id', tddate);

...but when I tried to maipulate the month line... it broke the entire JS and killed the popup🙄

oh well, i guess this is just over my head :wink:

If anyone can tell me how to have the 2nd line return the month name, i can probably hack the rest :wink:

Hi Dan, please check where is "month" defined ?

Hi, I'm having a similar issue. I don't mean to jack your thread, sorry but it's related!

I'm wanting my date in the calendar popup to be in Month/Day/Year format, and is currently in Day/Month/Year format.
I was able to change it so it is now Month/Day/Year the first time you select the date, and it works, but if you are to click back on the date selection field to choose a DIFFERENT date, ChronoForms still thinks the date is in Day/Month/Year format and it will mess up the selection box entirely. For example:

User selects September 1, 2008, Chronoforms displays 9/1/08 in the date box,
user then decides to change the date again so clicks on the date box again, the popup brings up the calendar again but this time it shows JANUARY 9, 2008.
The user then selects the 30th of "january" and when they click on the date box again, it shows a date 30 years in the future!🙂

Hopefully thats not too difficult to understand, basically Chornoforms thinks the date order is still day/month/year despite me changing the order on the front end to month/day/year...... any suggestions? I love this product by the way!

Thanks!
Blaine

Hi,

I looked in the calendar code and I agree that it looks like its setup to use the default form and not the changed one, its not easy to change this with 1 or 2 edits to the JS file, I need to understand it first because it was not written by me and it needs testing, maybe I will fix it sometime!

Regards

Max

Woot! I got it going!

Ok, here are the changes I made...

1st original code block to look for...

	      this.config = {
						Lng: lng,
					  imgNext: 'components/com_chronocontact/css/img/next.gif',
					  imgPrev: 'components/com_chronocontact/css/img/prev.gif',
					  imgCancel: 'components/com_chronocontact/css/img/close.gif',
					  maxDate: new Date('01/01/2099'),
					  minDate: new Date('01/01/1222'),
					  format: 'd/m/y'
				};

Altered format to be on the string order that I wanted... format: 'm d, y'...

	      this.config = {
						Lng: lng,
					  imgNext: 'components/com_chronocontact/css/img/next.gif',
					  imgPrev: 'components/com_chronocontact/css/img/prev.gif',
					  imgCancel: 'components/com_chronocontact/css/img/close.gif',
					  maxDate: new Date('01/01/2099'),
					  minDate: new Date('01/01/1222'),
					  format: 'm d, y'
				};

2nd original code block to look for...

		create_td: function(tr,i,date,class_Css) {
        var localThis = this;

				var td = new Element('td');
				if (date) {
				  var day = date.getDate();
				  var month = (date.getMonth()+1);
				  //  9 to 09 or another number <= 9
				  if (day <= 9) day = "0"+ day;
				  if (month <= 9) month = "0"+ month;
          var ft = localThis.config.format;

          var tddate = ft.replace('d',day);
				  tddate = tddate.replace('m',month);
				  tddate = tddate.replace('y',date.getFullYear());
				  
        	td.setProperty('id', tddate);
        }

I needed to REM the 2 lines that padded the day and month with "0" as it seemed to throw off parseInt()...
Added my own array of month names...
Replaced the insertion of the month number with the months name... tddate = tddate.replace('m',name_of_month[parseInt(month)]);

		create_td: function(tr,i,date,class_Css) {
        var localThis = this;

				var td = new Element('td');
				if (date) {
				  var day = date.getDate();
				  var month = (date.getMonth()+1);
				  //  9 to 09 or another number <= 9
				  //if (day <= 9) day = "0"+ day;
				  //if (month <= 9) month = "0"+ month;
          var ft = localThis.config.format;

          var name_of_month = new Array("","January","February","March","April","May","June","July","August","September","October","November","December");
          var tddate = ft.replace('d',day);
				  tddate = tddate.replace('m',name_of_month[parseInt(month)]);
				  tddate = tddate.replace('y',date.getFullYear());
				  
        	td.setProperty('id', tddate);
        }

... and the end result is a returned date in the format... September 9, 2008!! And abbreviated month names can be easily accomplished by updating the text in the array.

Great, I think its harder to make it dependent ONLY on the first config string, correct ?

I guess it depends what you are after. If all you wanted were numbers, then manipulating the first string is all you need...

format: 'd/m/y' => 01/12/2008
format: 'd-m-y' => 01-12-2008
format: 'y-m-d' => 2008-12-01

It's just a simple "placeholder" string that eventually gets the "d", "m", and "y" replaced with other things later in the code.

Hey thanks for the code! worked great.

What happened for me is when I only changed the format, it would only change the format on the front end of the website. When you were to click on the date box to change your input, it would take the second position (as far as it knew, the month field) and apply that for the number of the month. This would screw up the calendar so much that it would even go into the future by 100's of years!

Great code though, works like a charm now!

Hey! I think it's awesome that someone other than myself actually used/liked my little hack.🤣 :wink:

I'm running into the same problem as the others who have tried to simply change the 'd/m/y' code within the calendar.js... is works the first time you select a date.. but if you attempt to change the date it opens the calendar and thinks that it was the old format and pulls a date WAY off from the current calendar month..

Has there been any headway on being able to change the date format... it may not seem like a big thing, but when your clients are used to seeing it one way and you present a totally different way... it makes them wonder what else they can expect to be a little 'off' from there expectations..

Thanks again!

Hi revive,

I agree with you but I didn't work on this issue at all, maybe somebody else post some comment about this issue!

Regards,

Max

Find the line

this.today = new Date(dateinp[2],dateinp[1]-1,dateinp[0],0,0,0);

and change it to

this.today = new Date(dateinp[2],dateinp[0]-1,dateinp[1],0,0,0);

This should make the calendar parse an input date of the form m/d/y.

David

Hey David,

Thanks for the reply.. I tried your code, but it only seemed to show the date as ChronoForms normally shows it D/M/Y, yet, if you tried to reselect the calendar to choose another date,.. it showed it as Feb 2009 instead of Oct 2008..

Any ideas? You did mean to change this code within the calendar.js of ChronoForms correct?

Hi revive, there are 2 calendar.js files by the way, one for frontend and another one for admin area, are you testing with the frontend one ?

Cheers,

Max

Hey Max,

Actually I show 3 calendar.js files, one each in these directories:
<root>/media/system/js/
<root>/components/com_chronocontact/js/
<root>/includes/js/calendar

But, I assumed that David was referring to the one in ChronoContact... my bad. Which one should I change with his code to change the date format??

Thanks agian Max!

you are correct, you should use this one :
<root>/components/com_chronocontact/js/
there is another one here :
<root>/administrator/components/com_chronocontact/js/

Ok.. cool. That is the one I updated..

Just to make sure I wasn't proving to be a total rookie, I re-applied that code change to the <root>/components/com_chronocontact/js/ and when I select today's date this is what shows: 14/10/2008.. when I select the date field to change the date, it pulls the calendar for February 2009 !

So, something is not right with this code, or there maybe another piece that is missing.. not sure.. like I said.. I am a rookie! 😀 But, I can say that this code snippet is not working..

Any ideas Max??

Also, Max.. something of an oddity.. I do not have the admin folder you mentioned!! In administrator/ folder, there is no com_chronocontact.. am i missing something?? I have the newest version of Chronocontact v3.0 stable.

Hi revive,

I really have no ideas how to change the date format because I never tried it, sorry.

this folder must be there, maybe its your FTP client cache.

Cheers,

Max

<ROOT> components\com_chronocontact\js\calendar.js is the file I updated.

Here is the complete contents of the file if you want to see it fully. You can see my changed areas between REMs...

/*
 * Calendar Emoxion
 * with Mootools
 * Manuel Garcia (thekeeper)
 * http://www.mgarcia.info
 * Version 0.2
 *
 * Copyright (c) 2007 Manuel Garcia
 * http://www.opensource.org/licenses/mit-license.php
 */

window.addEvent('domready', function() {
	$$('input.ncalendar').each(function(el){
    el.addEvent('click', function(event) {
				new Calendar(el);
			});
	});
});

var Calendar = new Class({
    initialize: function(el,open,Config) {
   this.input = $(el);
			var lng = new Object();

			// Firefox? IE ?
			try {  var nav = navigator.language.substr(0,2); }
			catch (e)	{ var nav = navigator.userLanguage;}

			lng['en'] = {
      	month : ['January','February','March','April','May','June','July','August','September','October','November','December'],
      	day : ['S','M','T','W','T','F','S'],
      	first: 0 // First day of week => Monday
			}
      lng['es'] = {
      	month : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
      	day : ['L','M','M','J','V','S','D'],
      	first: 1 // First day of week => Monday
			};
			lng['pl'] = {
      	month : ['Styczen', 'Luty', 'Marzec', 'Kwiecien', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpien', 'Wrzesien', 'Pazdziernik', 'Listopad', 'Grudzien'],
				day : ['P','W','S','C','P','S','N'],
				first: 1 // Sunday
      }
      lng['nl'] = {
      	month : ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
      	day : ['M','D','W','D','V','Z','Z'],
      	first: 1 // Monday
      }

			lng = (!lng[nav])? lng['en'] : lng =  lng[nav] ;
      /* configuration */
      if (!Config)
	      this.config = {
						Lng: lng,
					  imgNext: 'components/com_chronocontact/css/img/next.gif',
					  imgPrev: 'components/com_chronocontact/css/img/prev.gif',
					  imgCancel: 'components/com_chronocontact/css/img/close.gif',
					  maxDate: new Date('01/01/2099'),
					  minDate: new Date('01/01/1222'),
					  /*DRI - Start of edits - 1 of 4*/
					  format: 'm d, y'
					  //format: 'd/m/y'
					  /*DRI - End of edits - 1 of 4*/
				};

      this.month_name = this.config.Lng.month;
      this.day_name =  this.config.Lng.day;
			this.create_calendar();
    },
    create_calendar: function() {

     var position = this.input.getCoordinates();
     if ($('ncalendar')) $('ncalendar').remove();
      // content div  //
      this.div = new Element('div')
      .setStyles({'top':(position.top+position.height)+'px', 'left':(position.left)+'px'}).setProperty('id', 'ncalendar').injectInside(document.body);
      this.div.makeDraggable();
      this.nav();
      this.setdate(this.input.getProperty('value'));
			this.effect(this.div,'show');
		} ,
		nav: function (today) {
		  // nav
      this.calendardiv = new Element('div').injectInside(this.div).addClass('cf_calheader')
      this.title = new Element('span').injectInside(this.calendardiv).addClass('month');
      // next month
      this.next = new Element('img').setProperty('src', this.config.imgNext).injectAfter(this.title);
      // before month
      this.before = new Element('img').setProperty('src', this.config.imgPrev).injectBefore(this.title);
			// close
			this.close = new Element('img').setProperty('src', this.config.imgCancel).injectAfter(this.next);
			// table
			this.table = new Element('table').injectInside(this.div);
			var thead = new Element('thead').injectInside(this.table);
   		var tr = new Element('tr').injectInside(thead);

      this.day_name.each(function (day) {
				var td = new Element('th').appendText(day).injectInside(tr);
			});

			var localThis = this;
			this.close.addEvent('click', function(e) {
          localThis.div.remove();
  		});
		},
		setdate : function(date) {
			// reset event nav
			this.next.removeEvents('click');
			this.before.removeEvents('click');

			if (!this.validate_date(date)) {
        this.today = new Date();
		    this.today.setDate(1);
      } else {
      	var dateinp = date.split('/');
    		this.today = new Date(dateinp[2],dateinp[1]-1,dateinp[0],0,0,0);
			}

      this.next_m = this.today.getMonth();
      this.next_m++;

      this.title.innerHTML = this.month_name[this.today.getMonth()]+' ' + this.today.getFullYear();

      this.title.addEvent('click', function (e) {
        if ($('listYear')) $('listYear').remove();
        var div = new Element('div').injectAfter(localThis.title).setProperty('id','listYear');
        var date = localThis.today;
        var ul = new Element('ul').injectInside(div);
      
        for (var a=(date.getFullYear()-2); a<= (date.getFullYear()+2);a++) {
          var li = new Element('li').setHTML(a).injectInside(ul)
          .setProperty('id',a)
          .addEvent('click', function (e) {
            localThis.tbody.remove();
            localThis.setdate(date.getDate()+'/'+date.getMonth()+'/'+this.getProperty('id'));
            div.remove();
          });
        }
        localThis.effect(div,'show');
      });
  		var localThis = this;

			// event next
			
			if (this.today < this.config.maxDate ) {
  			this.next.addEvent('click', function(e) {
            var date = localThis.today;
       	    date.setMonth(localThis.next_m+1,1);
  	        localThis.tbody.remove();
            localThis.setdate(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear());
    		});
  		}
  		// event before
  		if (this.today > this.config.minDate ) {
  			this.before.addEvent('click', function(e) {
            var date = localThis.today;
       	    date.setMonth(localThis.next_m-1,1);
            localThis.tbody.remove();
            localThis.setdate(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear());
    		});
  		}
			var LastMonth = new Date(this.today.getFullYear(),this.next_m-2,1,0,0,0);

			var last = LastMonth.getMonth();
			// total days the last month
			var counter = 0;
			for (var b = 1; b <= (30 +  this.config.Lng.first); b++) {
			  LastMonth.setDate(b);
 				if ( LastMonth.getMonth() == last) {
 				  counter++;
 				}
			}

			this.tbody = new Element('tbody').injectInside(this.table);
			var first_day = this.today;
			var last_day = this.today;
			this.month = this.today.getMonth();
   		var tr = new Element('tr').injectInside(this.tbody);

  		var day=0;

			/* first day week */
			first_day.setDate(1);
			var rest = (!first_day.getDay())? 6: first_day.getDay()-1;
			counter = counter - rest;
			for (var i= this.config.Lng.first; i <= 6; i++) {
			   if (first_day.getDay() == i) {
			    break;
      	 } else {
					counter++;
					LastMonth.setDate(counter);
					if (LastMonth.getMonth() == this.today.getMonth()) LastMonth.setMonth(this.today.getMonth()-1);
      	  this.create_td(tr,counter,LastMonth,'noday');
        }
   		}
			(this.config.Lng.first)? brea_k = 1:brea_k = 0;
   /* everydays */
      var date_s = this.today;
      var class_Css;
      var brea_k; // breaking week
  	  var daycounter = 0;
     	for (var i = 1; i <= 30; i++) {
    		date_s.setDate(i);
 				if (date_s.getMonth() == this.month) {
       		daycounter++;
		      if (date_s.getDay() == brea_k) {
						var tr = new Element('tr').injectInside(this.tbody);
					}
          class_Css = (!date_s.getDay())? 'sunday' : '';
					this.create_td(tr,i,date_s,class_Css);
				}
			}
			  this.today.setMonth(this.month);
       	this.today.setDate(daycounter);
       	var NextMonth = new Date(this.today.getFullYear(),this.today.getMonth()+1,1,0,0,0);
		    // finish month
			  var num = date_s.getDay();
			  num = (brea_k)? 7 - num: 6 - num;
			  var b;
			  b = (brea_k)? 0 : 6 ;
        if (this.today.getDay() != b) {
				  for (var i= 1; i <= (num); i++) {
				      NextMonth.setDate(i);
							this.create_td(tr,i,NextMonth,'noday');
					}
    		}
			this.effect(this.tbody,'show');
    },
		create_td: function(tr,i,date,class_Css) {
        var localThis = this;

				var td = new Element('td');
				if (date) {
				  var day = date.getDate();
				  var month = (date.getMonth()+1);
				  //  9 to 09 or another number <= 9
				  /*DRI - Start of edits - 2 of 4*/
				  //if (day <= 9) day = "0"+ day;
				  //if (month <= 9) month = "0"+ month;
				  /*DRI - End of edits - 2 of 4*/
          var ft = localThis.config.format;

          /*DRI - Start of edits - 3 of 4*/
          var name_of_month = new Array("","January","February","March","April","May","June","July","August","September","October","November","December");
          /*DRI - End of edits - 3 of 4*/
          var tddate = ft.replace('d',day);
				  /*DRI - Start of edits - 4 of 4*/
                                  tddate = tddate.replace('m',name_of_month[parseInt(month)]);
                                  //tddate = tddate.replace('m',month);
                                  /*DRI - End of edits - 4 of 4*/
				  tddate = tddate.replace('y',date.getFullYear());
				  
        	td.setProperty('id', tddate);
        }
       
        if (this.config.minDate < date) {
          if (this.config.maxDate > date) {
          td.addEvent('click', function(e) {
         			 localThis.input.value = this.id;
  						 localThis.effect(localThis.div,'fade');
  						 localThis.div.remove();
    			});
    			} else {
            td.addEvent('click', function(e) {
         			alert('Max. Date ' + localThis.config.maxDate);
    			});
          }
  			} else {
          td.addEvent('click', function(e) {
         			alert('Min. Date ' + localThis.config.minDate);
    			});
        }
  			td.addEvent('mouseover', function(e) {
						 this.addClass('dayselected');
  			});
  			td.addEvent('mouseout', function(e) {
						 this.removeClass('dayselected');
  			});

    		if (class_Css) td.addClass(class_Css);
    		// Today ??
    		var today = new Date();
				today = today.getDate() + "/" + (today.getMonth()+1) + "/" + today.getFullYear();
				if (date) var date_td = date.getDate() + "/" + (date.getMonth()+1) + "/" + date.getFullYear();
				if (today == date_td) td.addClass('isToday');

  		  td.appendText(i);
				td.injectInside(tr);
		},
		effect: function(div,op) {
		  var ef = new Fx.Style(div, 'opacity', {
				duration: 500,
				transition: Fx.Transitions.quartInOut
			});
			(op == 'fade')? ef.start(1,0): ef.start(0,1);
		},
		validate_date: function (date) {
		  		var regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
		  		return date.test(regex);
		}
});

You can find my edited sections in the comments/REM's i added.. like...
/*DRI - Start of edits - 1 of 4*/
my code
//old rem'ed out code
/*DRI - End of edits - 1 of 4*/

Two things.. 1) Great code.. I like the commenting style, very similar to one I use, and helpful! Thank you.
2) You rock!
I copied your entire file and overwrote mine.. worked like a charm! Thank you!

Thanks again,
Jesse

Great, I probably should have just posted the entire code from the start, but thought I could get away with the snippets.

Just rereading your previous posts... CF3 Stable is out?😲 Hehe, looks like I need to upgrade from Beta2 :wink:

Sorry about that - I was away from things for awhile.

1) I made my changes in the frontend calendar.js. Never occurred to me to look for another one. :?

2) In addition to the code change I posted, I also updated the format string. Here is a page I'm using it on:

http://jcev.threetenterprises.biz/index.php?option=com_chronocontact&Itemid=26

Thanks!

Hi David,

Yes I see your calendar has problems when you try to navigate between months, you better do it the same way the other guys here did it!

Cheers,
Max

for anyone using my JS file... you'll need to apply a little fix so that dates look correct when the month has a "y" in it (the "y" will get replaced with the year)

look for...

tddate = tddate.replace('y',date.getFullYear());

and move it up a few lines so it looks like...

tddate = tddate.replace('y',date.getFullYear());
/*DRI - Start of edits - 4 of 4*/
tddate = tddate.replace('m',name_of_month[parseInt(month)]);
//tddate = tddate.replace('m',month);
/*DRI - End of edits - 4 of 4*/