Topic: Date type for input field

Chris Tagliaferro pro asked 7 years ago


Is anyone else not getting the floating label on a date Input? I checked the docs and I didn't see anything specific in the input fields for dates. I know you have the datepicker plugin but I'm building a Cordova app and would rather the native date picker. I don't care if the label animates, but it doesn't move out of the input field once I've populated a value.

Chris Tagliaferro pro answered 7 years ago


If you take this working example from the docs -> <div class="md-form"> <input type="text" id="form1" class="form-control"> <label for="form1" class="">Example label</label> </div> Just change type="text" to type="date" and you'll notice that when you use the browsers date picker, the label doesn't float up after selecting a date.

Marta Wierzbicka staff answered 6 years ago


Dear PrescientDev, if other users' answers are not enough for you, could you provide any code or demo to reproduce the problem and describe your issue in more details? Best, Marta

Marta Wierzbicka staff answered 7 years ago


OK, great.

Chris Tagliaferro pro answered 7 years ago


I figured it out. I didn't realize you can add the active class to the label on prefilled data.

 

Start your code here<div class="md-form">    <input value="John Doe" type="text" id="form6" class="form-control">
    <label class="active" for="form6">Example label</label>
</div>

Pauline Mereghetti free commented 6 years ago

Hello, I have the same problem. I did not understand what class you are talking about and about item to put it

Marta Wierzbicka staff commented 6 years ago

Hi, tell me please what version of MDB do you have and provide here your code where is the problem. I'll try to help you. Best, Marta

Chris Tagliaferro pro commented 6 years ago

hi Pauline, with any input field that you prepopulate with data, you can trigger the label floating by adding the class "active" to the label. the following example shows the label prefloated with content set in the input without user interaction. just add class="active" to the label

slawa pro commented 6 years ago

@Pauline If you fill the input value with java script then you also need to add 'active' class to the label to move it up. For Chris example the code would be: $('#form6').val('Pauline'); $('label[for="form6"]').addClass('active');

Marta Wierzbicka staff commented 6 years ago

Pauline Mereghetti, are the answers Chris and Cy fine for you or still need help? Best, Marta

PrescientDev pro commented 6 years ago

Hi, I'm continuing to have this same problem, and the active class add isn't helping.

Marta Wierzbicka staff answered 7 years ago


Dear Chris, Could you send me your file with the code to m.szymanska@mdbootstrap.com and I'll look at this and try to help you. Best, Marta

Chris Tagliaferro pro answered 7 years ago


Sorry for the confusion, I don't need a new component. I'm using a regular input field that is of type date instead of type text and the floating label does not work.

Marta Wierzbicka staff answered 7 years ago


Hi, we don't have other date input than datepicker. Could you specify your issue and tell me how can I help you? Best, Marta

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags