Thanood

<template>
  <div>
    <md-input md-autocomplete="values.bind: values;" md-label="put some text here" md-value.bind="textValue" md-disabled.bind="disabledValue"></md-input><br />
    You entered: ${textValue}<br />
  </div>
  <div>
    Values:
    <pre>
      ${values|stringify}
    </pre>

Thanood

<template>
  <md-card md-title="Basic">
    <div>
      <input md-datepicker="container: body; value.two-way: date & validate:rules;" md-datepicker.ref="datePicker" type="date" placeholder="pick a date">
    </div>
    <div style="margin-top: 15px;">
      <button md-waves md-button click.delegate="validateModel()">validate</button>
      <button md-waves md-button click.delegate="reset()">reset</button>
    </div>
  </md-card>

Thanood

Datepicker icon fixup.

To prevent the datepicker icon from appearing below the datepicker, add the std-icon-fixup class to the datepicker input element.

You can provide an alternative css class by setting the iconClass option. Here's the style used in std-icon-fixup to fix the icon:

[md-datepicker] + i.material-icons.std-icon-fixup {
  margin-left: -24px;
 line-height: 1;

Thanood

<template>
  <div>
    <input md-datepicker="select-months: false; select-years: 5; container: body; value.two-way: selectedDate;" type="date" placeholder="pick a date" />
  </div>
  <div>
    <button md-button click.delegate="setDate()">set date</button>
  </div>
  <div>
    <span if.bind="selectedDate">You selected (UTC time): ${selectedDate | stringify}</span>
  </div>

Thanood

tab targetting

To enable the datepicker to become a valid tab target (as in: responds to the correct tab order), set the container to be the parent of the datepicker input. Like this:

  <div ref="dpWrapper">
    <input md-datepicker="container.bind: dpWrapper; value.two-way: selectedDate;" type="date" placeholder="pick a date" />
  </div>

Thanood

<template>
  <div>
    <md-range
      md-value.bind="rangeValue"
      md-min="0"
      md-max="300000.0"
      md-step="0.1"
      change.delegate="onRangeChange($event)"
    ></md-range>
    <input type="text" value.bind="loanAmount" />

Thanood

<template>
  <require from="./logger"></require>
  <div class="row">
    <div>
      <md-range md-value.bind="rangeValue" change.delegate="onChange($event)"></md-range>
    </div>
    <div>
      Value: ${rangeValue}
    </div>
  </div>

Thanood

<template>
  <div>
    <md-range md-value.bind="rangeValue" md-min.bind="min" md-max.bind="max" md-step.bind="step"></md-range>
  </div>
  <div>
    Value: ${rangeValue}
  </div>
  <div>
    <md-input md-type="number" md-label="min" md-value.bind="min"></md-input>
    <md-input md-type="number" md-label="max" md-value.bind="max"></md-input>

Thanood

<template>
  <div>
    <md-range md-value.bind="rangeValue" md-step="4"></md-range>
  </div>
  <div>
    Value: ${rangeValue}
  </div>
</template>

Thanood

<template>
  <div>
    <md-range md-value.bind="rangeValue"></md-range>
  </div>
  <div>
    Value: ${rangeValue}
  </div>
</template>