Remove the default placeholder dd/mm/yyyy in Next Ui/tailwind input element of type=date

Question

Using Next js and Next Ui input element with type="date" the way I'm using, it will result a text/placeholder of dd/mm/yyyy over the label! as shown below:

My component code is simple and straightforward like this:

    <Input                
        isRequired
        type="date"
        label="Date of Birth"  
        className=""
        variant="bordered"  
        size="md"  
        radius="sm"   
        description=""      
        placeholder=""
    />

I've tried to remove it by adding placeholder="" or trying some classes in ClassName but it never worked.

any idea how to remove/hide dd/mm/yyyy placeholder?

Answer 1

I haven't found a way to fix this component the way you want it to be. But this is another idea: Start with a text input field, then change the type to a date input when the input is in focus.

See https://stackoverflow.com/a/20343152/16477430

Answer 2

I have found a workaround. If you give the label a negative margin-top, it should fit fine:

<Input                
  type="date"
  label="Date of Birth"  
  classNames={{
    label: "-mt-6"
  }}
  variant="bordered"  
/>

This is not the best solution, but I hope this helps you as helped me =)