Jump to:

23368 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » CMS inline textboxes

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

Page: 1
Go to End
Author Topic: 633 Views
  • ambient
    Avatar
    Community Member
    123 Posts

    CMS inline textboxes Link to this post

    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
  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: CMS inline textboxes Link to this post

    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.

  • ambient
    Avatar
    Community Member
    123 Posts

    Re: CMS inline textboxes Link to this post

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

    633 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.