Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Time picker doesnt open inline

Elaheh free asked 3 years ago


hello i need to using time picker inline

please help me


Krzysztof Wilk staff commented 3 years ago

Hi!

Do you have the pro package? If yes - could you share your app code (or at least fragment with the picker)? It'll be very helpful to find the solution :)

Best regards


Elaheh free commented 3 years ago

hi , We bought it from you . Help if possible .I am using the following code


Krzysztof Wilk staff answered 3 years ago


Hi!

You didn't paste your code. I assume that this code will help you.

import React, { Component } from "react";
import { MDBTimePicker, MDBCol, MDBBtn } from "mdbreact";

class TimePickerPage extends Component {

componentDidMount() {
  const pickerInput = document.getElementById('timePicker');
  const pickerLabel = document.querySelector('label[for="timePicker"]');

  pickerLabel.style.transform = 'translateY(-20px) scale(0.8)';
  pickerInput.parentNode.style.display = 'inline';
}

render() {
  return (
      <MDBCol className='mt-5' md="6">
        <MDBBtn style={{ display: 'inline' }}>Test</MDBBtn><MDBTimePicker id="timePicker" label="12hrs format" />
      </MDBCol>
    );
  }
}

export default TimePickerPage;

If not - please, describe precisely your problem or goal you want to achieve and attach your code/images to your topic :)

Best regards


Elaheh free commented 3 years ago

hi , your code in dont working myproject i need inline timepicker in myproject please help me.


Krzysztof Wilk staff commented 3 years ago

Hi!

If you meant an example like this one https://mdbootstrap.com/docs/b5/react/forms/timepicker/#section-inline-12 - I'm afraid there's no inline version of the MDBTimePicker component in the MDB4 package.

Keep coding!



Please insert min. 20 characters.

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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: web
  • Browser: chrome
  • OS: window 10
  • Provided sample code: No
  • Provided link: No
Tags