Date type for input field

Topic: Date type for input field

Chris Tagliaferro pro asked 6 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.

Add comment

Chris Tagliaferro pro answered 6 years ago

2 0 Best answer

If you take this working example from the docs ->

<code class=" language-markup"><div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Example label</label>
</div>
</code>
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.

Please insert min. 20 characters.

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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

OK, great.

Add comment

Chris Tagliaferro pro answered 6 years ago

0 0 Best answer

I figured it out. I didn't realize you can add the active class to the label on prefilled data.
 
<pre>Start your code here<code class=" language-markup"><div class="md-form"></code><code class=" language-markup"> <input value="John Doe" type="text" id="form6" class="form-control">
 <label class="active" for="form6">Example label</label>
</div></code></pre>

Please insert min. 20 characters.

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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Chris Tagliaferro pro answered 6 years ago

0 0 Best answer

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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

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 jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Chris Tagliaferro

Pro User 19Support score
1Questions 3Answers 0Snippets