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.

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
Reply


3 Posts   947 Views

Avatar
ambient

Community Member, 128 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, 5521 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, 128 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;
	}
}
?>