mdl-date-textfield
Advanced tools
An Material Design Lite Date textfield implementation for capturing user entered dates (https://github.com/google/material-design-lite)
A custom textfield implementation of a date component for Material Design Lite
Via npm:
npm install mdl-date-textfield
Then include in your html:
<link rel="stylesheet" href="./bower_components/mdl-date-textfield/dist/mdl-date-textfield.min.css">
...
<script src="./bower_components/mdl-date-textfield/dist/mdl-date-textfield.min.js"></script>
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.
1. Code a <div> element to hold the date text field.
<div>
...
</div>
2. Inside the div, code an <input> element add an id attribute of your choice.
<div>
<input type="text" id="sample3">
</div>
3. Also inside the div, after the <input> field, code a <label> element with a for attribute whose value matches the input element's id value, and a short string to be used as the field's placeholder text.
<div>
<input type="text" id="sample3">
<label for="sample3">Date Example...</label>
</div>
4. Add one or more MDL classes, separated by spaces, to the div container, input field, input label, and error message using the class attribute.
<div class="mdl-date-textfield mdl-js-date-textfield mdl-date-textfield--floating-label">
<input class="mdl-date-textfield__input" type="text" id="sample3">
<label class="mdl-date-textfield__label" for="sample3">Date Example...</label>
</div>
The Date field component is ready for use.
Date field with a standard label.
<div class="mdl-date-textfield mdl-js-date-textfield">
<input class="mdl-date-textfield__input" type="text" id="sample1">
<label class="mdl-date-textfield__label" for="sample1">Date Example...</label>
</div>
Date field with a floating label.
<div class="mdl-date-textfield mdl-js-date-textfield mdl-date-textfield--floating-label">
<input class="mdl-date-textfield__input" type="text" id="sample4">
<label class="mdl-date-textfield__label" for="sample4">Date Example...</label>
</div>
Date field with a standard label, and error message.
<div class="mdl-date-textfield mdl-js-date-textfield">
<input class="mdl-date-textfield__input" type="text" id="sample4">
<label class="mdl-date-textfield__label" for="sample4">Date Example...</label>
<span class="mdl-date-textfield__error">MM/DD/YYYY</span>
</div>
FAQs
mdl-date-textfield for material-design-lite
The npm package mdl-date-textfield receives a total of 14 weekly downloads. As such, mdl-date-textfield popularity was classified as not popular.
We found that mdl-date-textfield demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.