‚̧Nucleic Photon Magnetizer
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    mdl-date-textfield

    1.0.9¬†‚Äʬ†Public¬†‚Äʬ†Published

    mdl-date-textfield

    An Material Design Lite Date textfield implementation for capturing user entered dates (https://github.com/google/material-design-lite)

    Bower Version NPM Version license

    bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code

    A custom textfield implementation of a date component for Material Design Lite

    Install

    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>
    

    Basic use

    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.

    To include a MDL date textfield component:

     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.

    Examples

    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>

    Install

    npm i mdl-date-textfield

    DownloadsWeekly Downloads

    5

    Version

    1.0.9

    License

    MIT

    Last publish

    Collaborators

    • avatar