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, biapar, Willr, Ingo, swaiba, simon_w

CMS inline textboxes


Reply


3 Posts   724 Views

Avatar
ambient

Community Member, 123 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, 5513 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, 123 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;
   }
}
?>