Date Picker

        <form class="coral-Form coral-Form--vertical">
          <label id="label1" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label1"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label2" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label2" value="2014-12-31" displayformat="MM-DD-YYYY"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label3" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label3" value="2014-12-31" valueformat="YYYY-MM-DD" displayformat="DD-MM-YYYY"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label4" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label4" type="time" placeholder="Placeholder" value="13:14"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label5" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label5" type="datetime" value="2014-12-31T14:12+00:00"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label6" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label6" type="date" min="2015-04-10" max="2015-04-28" value="2015-04-15"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label7" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label7" value="2014-12-31" displayformat="MM-DD-YYYY" variant="quiet"></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label8" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label8" invalid=""></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label9" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label9" required=""></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label10" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label10" value="2014-12-31" readonly=""></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label11" class="coral-Form-fieldlabel">Label</label>
          <coral-datepicker labelledby="label11" value="2014-12-31" disabled=""></coral-datepicker>
        </form>
      

        <form class="coral-Form coral-Form--vertical" style="max-width:300px;">
          <label id="label12" class="coral-FieldLabel">Label</label>
          <coral-datepicker class="coral-Form-field" labelledby="label12"></coral-datepicker>
        </form>