How can i hide the datepicker in a date field?

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

How can i hide the datepicker in a date field?

Follow this question

Related questions