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   659 Views

Avatar
ambient

18 July 2011 at 1:58am Community Member, 123 Posts

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

18 July 2011 at 11:29pm Forum Moderator, 5511 Posts

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

19 July 2011 at 8:05am Community Member, 123 Posts

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;
   }
}
?>