Hi team,

i have some columns that have been defined as dates, however, we only use the time parts.

So in the panel there are datefields with mask HH24:MI.

This works perfectly, however, everytime the datepicker appears and that is confusing for the users.

How can i hide the datepicker?

Offcourse i know the work-around with a view and a surrogate column and a bunch of triggers... But that's far too much work for only hiding something.

Kind regards, Jan Willem

asked 07 Oct '16, 10:24

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%


Hi Jan Willem,

To hide all date picker icons, add the following custom CSS:

img.x-form-date-trigger {
    display: none;
}

To hide all date picker icons in a panel named panel1, add the following custom CSS:

#panel1 img.x-form-date-trigger {
    display: none;
}

However, if you want to hide a specific date picker component's icon, you have to run the following JS code by using a external methods:

function hideDatePickerIcon(panelName, datePickerName) {
    $('#' + datePickerName + '-' + panelName).parents(':first').children('img.x-form-date-  trigger').css('display', 'none');
}

Hope this helps.

Kind Regards, Serdar

link

answered 12 Oct '16, 11:08

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

Hi Serdar,

The customer CSS is working fine, however, i can not define the time columns (dateformat HH24:MI) smaller.

The html looks like this:

<div id="ext-comp-1300-wrap" class="x-form-field-wrap  x-trigger-wrap-focus"
  style="width: 60px; visibility: visible; height: 20px; left: 0px; top: 0px;">
  <input type="text" size="10" id="ext-comp-1300" name="START_TIME" autocomplete="off" tabindex="undefined"
      class=" x-form-text x-form-field bdf-visual-element bdf-component bdf-datefield  x-grid3-cell-selected"
      style="text-align: left;font-family: Arial;font-size: 11px;font-style: normal;font-weight:
             normal;text-decoration: none;color: green;width: 43px;line-height: 16px;" ext:qtip="">
      <img src="js/ext-2.2/resources/images/default/s.gif" class="x-form-trigger x-form-date-trigger" id="ext-gen1438">
</div>

As you can see, the DIV gets the width specified in the panel (60px), however, the input field gets a mysterious width of 43px. Where does the 43px come from?

I want the DIV set to 50px, because i need the space for other columsn. However, when i specify this in the panel, the input field gets a smaller width. And i can not see the time anymore when i click in it.

Kind regards, Jan Willem

link

answered 04 Jul, 12:35

Jan%20Willem%20Vermeer's gravatar image

Jan Willem V...
1231330
accept rate: 0%

Hi Jan Willem,

The reason of this difference in widths is removing the date picker icon without adjusting widths. To solve this issue you need to adjust the widths too.

For example:

To adjust widths of a datefileds inside panel1

#panel1 input.bdf-datefield {
    width: 100% !important;
}

To adjust width of a specific datefield update the function like this

function hideDatePickerIcon(panelName, datePickerName) {
    var $dateField = $('#' + datePickerName + '-' + panelName);
    $dateField.parents(':first').children('img.x-form-date-  trigger').css('display', 'none');
    $dateField.css('width', '100% !important');
}

or you can add a CSS rule for that too

#datefieldName-panelName {
    width: 100% !important;
}

Kind Regards, Serdar

link

answered 06 Jul, 04:50

Serdar's gravatar image

Serdar ♦♦
100k4
accept rate: 14%

Thanks Serdar. This works perfectly. In my case i can set the width now to 45 and that's exactly what's needed. Kind regards, Jan Willem

(06 Jul, 05:14) Jan Willem V...
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×4
×3

Asked: 07 Oct '16, 10:24

Seen: 386 times

Last updated: 06 Jul, 05:14


© Copyright Gerger 2017