Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

CMS inline textboxes


Go to End


3 Posts   1081 Views

Avatar
ambient

Community Member, 130 Posts

18 July 2011 at 1:58am

Hi all,

I have a section that displays map coordinates in the degree, minute, second format.

In the cms I have this displaying as 3 seperate textboxes, one for degree, one for minute, one for second.

I'd like these boxes to be beside each other in the cms rather than displaying as 3 long boxes one on top of the other.

I've attached an image file of what I want to achieve if I'm not explaining it right.

Does anyone know how I can do this?
Is it possible to style particular boxes in the cms?

Attached Files
Avatar
Willr

Forum Moderator, 5523 Posts

18 July 2011 at 11:29pm

I know the DatetimeField does this. You may want to check out that field and see how it does it. It probably uses a CompositeField but it (may) have custom css styles for that display.

Avatar
ambient

Community Member, 130 Posts

19 July 2011 at 8:05am

Hey Will,

I took a look at that and I think it's coming from the DMYDateField.php[/] (below).

The thing is I can't decipher whats for styling the cms and whats for the complicated date/javascript bits.

I was playing around with lines 45 - 54 thinking that might make it happen but haven't been able to figure it out.

DMYDateField.php

<?php
/**
 * Displays a date field with day, month and year boxes, with a calendar to select
 * the date.
 * 
 * @todo Add localization support, see http://open.silverstripe.com/ticket/2931
 *
 * @package forms
 * @subpackage fields-datetime
 */
class DMYDateField extends CalendarDateField {
	
	function setValue( $value ) {
		if( is_array( $value ) && $value['Day'] && $value['Month'] && $value['Year'] )
			$this->value = $value['Year'] . '-' . $value['Month'] . '-' . $value['Day'];
		else if(is_array($value)&&(!$value['Day']||!$value['Month']||!$value['Year']))  
 			$this->value = null; 
 		else if(is_string($value)) 
			$this->value = $value;
	}
	
	function Field() {
		Requirements::javascript(SAPPHIRE_DIR . "/javascript/CalendarDateField.js");

		$field = LegacyDateField::Field();

		$id = $this->id();
		$val = $this->attrValue();
		
		if( preg_match( '/^\d{2}\/\d{2}\/\d{4}$/', $val ) ) {
			$dateArray = explode( '/', $val );
			
			$val = $dateArray[2] . '-' . $dateArray[1] . '-' . $dateArray[0];
		}

		$day = $month = $year = null;
		if($val) {
			$dateArray = explode( '-', $val );
		
			$day = $dateArray[2];
			$month = $dateArray[1];
			$year = $dateArray[0];
		}
		
		$fieldName = $this->name;
		
		return <<<HTML
			<div class="dmycalendardate">
				<input type="text" id="$id-day" class="day" name="{$fieldName}[Day]" value="$day" maxlength="2" />/
				<input type="text" id="$id-month" class="month" name="{$fieldName}[Month]" value="$month" maxlength="2" />/
				<input type="text" id="$id-year" class="year" name="{$fieldName}[Year]" value="$year" maxlength="4" />
				<div class="calendarpopup" id="{$id}-calendar"></div>
			</div>
HTML;
	}
	
	function validate($validator) 
 	{ 
 		if(!empty ($this->value) && !preg_match('/^([0-9][0-9]){1,2}\-[0-9]{1,2}\-[0-9]{1,2}$/', $this->value)) 
 		{ 
 			$validator->validationError( 
 				$this->name,  
 				_t('DMYDateField.VALIDDATEFORMAT', "Please enter a valid date format (DD-MM-YYYY)."),  
 				"validation",  
 				false 
 			); 
 			return false; 
 		} 
 	return true; 
 	} 

	function jsValidation() {
		if(Validator::get_javascript_validator_handler() == 'none') {
			return '';
		}
		$formID = $this->form->FormName(); 
		$error = _t('LegacyDateField.VALIDATIONJS', 'Please enter a valid date format (DD/MM/YYYY).');
		$error = 'Please enter a valid date format (DD/MM/YYYY) from dmy.';
		$jsFunc =<<<JS
Behaviour.register({
	"#$formID": {
		validateDMYDate: function(fieldName) {
			var day_value = \$F(_CURRENT_FORM.elements[fieldName+'[Day]']);
			var month_value = \$F(_CURRENT_FORM.elements[fieldName+'[Month]']);
			var year_value = \$F(_CURRENT_FORM.elements[fieldName+'[Year]']);
			var value = day_value + '/' + month_value + '/' + year_value;

			if(value && value.length > 0 && !value.match(/^[0-9]{1,2}\/[0-9]{1,2}\/([0-9][0-9]){1,2}\$/)) {
				validationError(_CURRENT_FORM.elements[fieldName+'[Day]'],"$error","validation",false);
				return false;
			}
			return true;
		}
	}
});
JS;
		Requirements :: customScript($jsFunc, 'func_validateDMYDate_'.$formID);
		
//		return "\$('$formID').validateDate('$this->name');";
		return <<<JS
if(\$('$formID')){
	if(typeof fromAnOnBlur != 'undefined'){
		if(fromAnOnBlur.name == '$this->name')
			\$('$formID').validateDMYDate('$this->name');
	}else{
		\$('$formID').validateDMYDate('$this->name');
	}
}
JS;
	}
}
?>