Input labels and Timepicker

Topic: Input labels and Timepicker

Youcef pro asked 5 years ago

Hi,

We want to customize the style of the date and time picker as shown in attachment. We manage to customize the input field, but when we open the date or time picker, the input label is displayed on top of the time picker (see Attachment 1 and Attachment 2).

We tried to change the timepicker z-index, but the input field z-index changed as well. Is there a way to change the z-index of the time and date picker componant without changing the z-index of the input field ?

Have you another idea on how to do this ?

Thanks.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Youcef, Unfortunately, for now, there is no way to fix this problem on your side. We have to fix this problem in the source code. I'm adding this to our bugs list, and we'll fix it in the future. Best Regards, Damian

Add comment

Youcef pro answered 5 years ago

0 0 Best answer

Hi,

Here’s the code we used to modified the date & time picker input field.

Best

<pre class="code-toolbar grey lighten-2 p-3 mb-3">// styles.scss

@import "variables";

.picker .form-control {

border: solid;

border-width: 2px;

border-radius: 4px;

border-color: $gray-transparent;

color: $blue;

padding: 16px 0px 16px 14px;

font-family: $font-family;

font-size: $font-size-basic !important;

font-style: $font-style-basic;

width: 82px !important;

height: 20px !important;

margin-right: 20px;

position: relative;

z-index: 0;

&:focus {

border-color: $blue !important;

}

.md-form input[type=text] {

border: solid;

border-width: 1px;

border-radius: 4px;

border-color: $gray-transparent;

color: $blue;

padding: 16px 0px 16px 14px;

font-family: $font-family;

font-size: $font-size-basic !important;

font-style: $font-style-basic;

height: 20px !important;

&:focus {

border-color: $blue !important;

}

.pickerTime .md-form input[type=text] {

width: 46px !important;

padding: 16px 0px 16px 10px !important;

}

.date-time-error .md-form input[type=text] {

border-color: $red;

border-width: 2px;

}

.date-time-error .form-control {

border-color: $red;

border-width: 2px;

}

.legend {

margin-top: -87px;

margin-left: 5px;

padding: 0 4px 0 4px;

font-family: $font-family;

font-size: 12px;

color: $gray-transparent;

background-color: $white;

position: absolute;

z-index: 10001;

}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

#datePickerLegend {

margin-top: -93px;

}

.container {

&:focus-within {

.legend {

z-index: 0;

}

.selector .picker__holder {

position: relative;

z-index: 10002;

height: 100%;

}

// component.html

<mdb-date-picker class="pickerDate" [(ngModel)]="dateSelected" name="mydate"

[options]="datePickerOptions" [placeholder]="'Selected date'"

[locale]="'en'">

</mdb-date-picker>

<div class="legend" id="datePickerLegend">{{'datepicker.label' | translate}}</div>

</div>

<mdb-time-picker class="pickerTime" name="mytime" [buttonLabel]="'Done'" [twelvehour]="false"

[darktheme]="false" [placeholder]="timeSelected" [(ngModel)]="timeSelected">

</mdb-time-picker>

<div class="legend">{{'timepicker.label' | translate}}</div>

</div>

</div></pre>

Please insert min. 20 characters.

Hi, Here’s the code we used to modified the date & time picker input field. Best

// styles.scss

@import "variables";




.picker .form-control {

  border: solid;

  border-width: 2px;

  border-radius: 4px;

  border-color: $gray-transparent;

  color: $blue;

  padding: 16px 0px 16px 14px;

  font-family: $font-family;

  font-size: $font-size-basic !important;

  font-style: $font-style-basic;

  width: 82px !important;

  height: 20px !important;

  margin-right: 20px;

  position: relative;

  z-index: 0;




  &:focus {

    border-color: $blue !important;

  }

}




.md-form input[type=text] {

  border: solid;

  border-width: 1px;

  border-radius: 4px;

 border-color: $gray-transparent;

  color: $blue;

  padding: 16px 0px 16px 14px;

  font-family: $font-family;

  font-size: $font-size-basic !important;

  font-style: $font-style-basic;

  height: 20px !important;




  &:focus {

    border-color: $blue !important;

  }

}




.pickerTime .md-form input[type=text] {

  width: 46px !important;

  padding: 16px 0px 16px 10px !important;

}




.date-time-error .md-form input[type=text] {

  border-color: $red;

  border-width: 2px;

}




.date-time-error .form-control {

  border-color: $red;

  border-width: 2px;

}




.legend {

  margin-top: -87px;

  margin-left: 5px;

  padding: 0 4px 0 4px;

  font-family: $font-family;

  font-size: 12px;

  color: $gray-transparent;

  background-color: $white;

  position: absolute;

  z-index: 10001;

}




@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

  #datePickerLegend {

    margin-top: -93px;

  }

}




.container {

  &:focus-within {

    .legend {

      z-index: 0;

    }

  }

}




.selector .picker__holder {

  position: relative;

  z-index: 10002;

  height: 100%;

}







// component.html

<div id="date-time-box" class="container ">

  <!-- Date picker | MDB Angular Pro -->

  <div class="mdbPicker datePickerr" id="date">

    <mdb-date-picker class="pickerDate" [(ngModel)]="dateSelected" name="mydate"

                    [options]="datePickerOptions" [placeholder]="'Selected date'"

                    [locale]="'en'">

    </mdb-date-picker>

    <div class="legend" id="datePickerLegend">{{'datepicker.label' | translate}}</div>




  </div>




  <!-- Time picker | MDB Angular Pro -->

  <div class="mdbPicker timePickerr" id="time">

    <mdb-time-picker class="pickerTime" name="mytime" [buttonLabel]="'Done'" [twelvehour]="false"

                    [darktheme]="false" [placeholder]="timeSelected" [(ngModel)]="timeSelected">

    </mdb-time-picker>

    <div class="legend">{{'timepicker.label' | translate}}</div>

  </div>

</div>

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Youcef, There is no possibility to change the z-index of the timepicker's input field without affecting the timepicker's plate. Could you please provide me the code with which you have modified the appearance of the timepicker? I would like to try to debug your problem. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

Youcef

Pro User 30Support score
4Questions 1Answers 0Snippets