Forums

I somewhat liked the Calendar Picker in ChronoForms, but I do not see how or why I do not have the same Calendar available in CC. Is there a way to get this same functionality in CC? It would be very helpful.

Also, what configuration is there on that Calendar to give us the ability to pick a drop down for years? instead of just backing up every month to get back several years(like a birthdate?)

Hi peverheart,

You'd need to copy over the code from ChronoForms to set up the same calendar in ChronoConnectivity.

You can select a short year list (+- 2 years) by clicking on the year.

Bob

Hi,
I am trying to do the same. I want to get the DateTimePicker in CC. I initially generated my form using the wizard. I have tried copying the <div>...</div> which has the DateTimePicker in the form to the Record Edit Template in Connectivity. But it doesn't seem to work. The date shows up like a normal textbox.
Please let me know what is amiss.
Thanks.
Richa

Hi Richa

I think you also need to load the com_chronocontact/js/calendar2.js file into your page

<?php
$doc =& JFactory::getDocument();
$doc->addScript(JURI::Base().'components/com_chronocontact/js/calendar2.js');
?>

Bob

Hi Bob,
I have pasted the code above all the HTMl in the RecordEditTemplate in the Front Permissions tab. My code for DateTime Picker is
<tr>
<td><label
class="cf_label" style="">Course
Date</label></td>
<td><input
class="cf_datetime required" maxlength="524288"
title="Please select the Course Date" size="20"
id="course_date" name="course_date" type="text">
</td>
</tr>

The Date field is still just a textbox.
Thanks
Richa

Richa, you have to do a few more.
First, you have to add not only calendar JS, but CSS too.
And second, you have to grab one huge inline script from any Chronoform where you have an calendar.
Here is an example:

            <script type="text/javascript">
	var ChronoTips = new Class({
		options: {
			onShow: function(tip){
				tip.setStyle('visibility', 'visible');
			},
			onHide: function(tip){
				tip.setStyle('visibility', 'hidden');
			},
			maxTitleChars: 30,
			showDelay: 100,
			hideDelay: 100,
			className: 'tool',
			offsets: {'x': 16, 'y': 16},
			fixed: false
		},
		initialize: function(elements, lasthope,options){
			this.setOptions(options);
			this.lasthope = lasthope;
			this.toolTip = new Element('div', {
				'class': 'cf_'+this.options.className + '-tip',
				'id': this.options.className + '-tip-' + this.options.elementid,
				'styles': {
					'position': 'absolute',
					'top': '0',
					'left': '0',
					'visibility': 'hidden'
				}
			}).inject(document.body);
			this.wrapper = new Element('div').inject(this.toolTip);
			$$(elements).each(this.build, this);
			if (this.options.initialize) this.options.initialize.call(this);
		},
	
		build: function(el){
			el.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
			if (el.title){
				var dual = el.title.split('::');
				if (dual.length > 1){
					el.$tmp.myTitle = dual[0].trim();
					el.$tmp.myText = dual[1].trim();
				} else {
					el.$tmp.myText = el.title;
				}
				el.removeAttribute('title');
			} else {
				var dual = this.lasthope.split('::');
				if (dual.length > 1){
					el.$tmp.myTitle = dual[0].trim();
					el.$tmp.myText = dual[1].trim();
				} else {
					el.$tmp.myText = el.title;
				}
			}
			if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "…";
			el.addEvent('mouseenter', function(event){
				this.start(el);
				if (!this.options.fixed) this.locate(event);
				else this.position(el);
			}.bind(this));
			if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
			var end = this.end.bind(this);
			el.addEvent('mouseleave', end);
			el.addEvent('trash', end);
		},
		start: function(el){
			this.wrapper.empty();
			if (el.$tmp.myTitle){
				this.title = new Element('span').inject(new Element('div', {'class': 'cf_'+this.options.className + '-title'}).inject(this.wrapper)).setHTML(el.$tmp.myTitle);
			}
			if (el.$tmp.myText){
				this.text = new Element('span').inject(new Element('div', {'class': 'cf_'+this.options.className + '-text'}).inject(this.wrapper)).setHTML(el.$tmp.myText);
			}
			$clear(this.timer);
			this.timer = this.show.delay(this.options.showDelay, this);
		},
		end: function(event){
			$clear(this.timer);
			this.timer = this.hide.delay(this.options.hideDelay, this);
		},
	
		position: function(element){
			var pos = element.getPosition();
			this.toolTip.setStyles({
				'left': pos.x + this.options.offsets.x,
				'top': pos.y + this.options.offsets.y
			});
		},
	
		locate: function(event){
			var win = {'x': window.getWidth(), 'y': window.getHeight()};
			var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
			var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
			var prop = {'x': 'left', 'y': 'top'};
			for (var z in prop){
				var pos = event.page[z] + this.options.offsets[z];
				if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
				this.toolTip.setStyle(prop[z], pos);
			};
		},
	
		show: function(){
			if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
			this.fireEvent('onShow', [this.toolTip]);
		},
	
		hide: function(){
			this.fireEvent('onHide', [this.toolTip]);
		}
	});
	ChronoTips.implement(new Options);
	ChronoTips.implement(new Events);
	window.addEvent('domready', function() {
		$ES('.tooltipimg').each(function(ed){
			var Tips2 = new ChronoTips(ed, $E('div.tooltipdiv', ed.getParent().getParent()).getText(), {elementid:ed.getParent().getParent().getFirst().getNext().getProperty('id')+'_s'});
		});
	});
	window.addEvent('domready', function() { 
							myCal_date = new Calendar({ date: 'd/m/Y' }, { classes: ['dashboard'] }); 				
										});
</script>			

<?php
$doc =& JFactory::getDocument();
$doc->addScript(JURI::Base().'components/com_chronocontact/js/calendar2.js');

$doc->addStyleSheet(JURI::Base().'components/com_chronocontact/css/calendar2.css');

?>

<div class="form_item">
  <div class="form_element cf_datetimepicker">
    <label class="cf_label" style="width: 150px;">Date</label>
    <input class="cf_datetime" title="" size="20" id="date" name="date" type="text" />
    
  </div>
  <div class="cfclear"> </div>

</div>