bulma-calendar/src/demo/demonstration/time.html

Display a calendar for date/time selection, in different colors and sizes

---
layout: default
route: demonstration
title: Demonstration
---

{% capture calendar_datepicker_example %}
<input class="input bulmaCalendar" type="time">
{% endcapture %}

{% capture calendar_datepicker_example_dialog %}
<input class="input bulmaCalendar" type="time" data-display-mode="dialog">
{% endcapture %}

{% capture calendar_datepicker_example_inline %}
<input class="input bulmaCalendar" type="time" data-display-mode="inline">
{% endcapture %}


{% capture calendar_datepicker_example_range %}
<input class="input bulmaCalendarRange" type="time">
{% endcapture %}

{% capture calendar_datepicker_example_inline_range %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline">
{% endcapture %}

{% capture calendar_datepicker_example_range_labels %}
<input class="input bulmaCalendarRangeLabels" type="time">
{% endcapture %}

{% capture calendar_datepicker_example_labels %}
<input class="input bulmaCalendarRangeLabels" type="time" data-display-mode="inline">
{% endcapture %}


{% capture calendar_datepicker_example_inline_info %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="info">
{% endcapture %}

{% capture calendar_datepicker_example_inline_success %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="success">
{% endcapture %}

{% capture calendar_datepicker_example_inline_warning %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="warning">
{% endcapture %}

{% capture calendar_datepicker_example_inline_danger %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="danger">
{% endcapture %}

{% capture calendar_datepicker_example_inline_grey %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="grey">
{% endcapture %}

{% capture calendar_datepicker_example_inline_dark %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="dark">
{% endcapture %}

{% capture calendar_datepicker_example_inline_black %}
<input class="input bulmaCalendarRange" type="time" data-display-mode="inline" data-color="black">
{% endcapture %}

{% include anchor.html name="Display styles" %}
<p>Calendar component comes with multiple display styles. The default style will show the datePicker as a popover
  under the input element on desktop and as a dialog modaal on mobile.</p>
<div class="tabs">
  <ul>
    <li class="is-active"><a href="#display-default">Default</a></li>
    <li><a href="#display-dialog">Dialog</a></li>
    <li><a href="#display-inline">Inline</a> </li>
  </ul>
</div>

<div class="tab-contents">
  <div id="display-default" class="tab-content is-active">
    {{calendar_datepicker_example}}
    <p class="help">To view a demo just click into the input above.</p>
  </div>

  <div id="display-dialog" class="tab-content">
    <p>"Dialog" style displays the DatePicker as a dialog modal</p>
    {{calendar_datepicker_example_dialog}}
    <p class="help">To view a demo just click into the input above.</p>
  </div>
  <div id="display-inline" class="tab-content">
    <p>"Inline" style visually replaces the input element by the datepicker</p>
    {{calendar_datepicker_example_inline}}
  </div>

</div>

{% include anchor.html name="Range selection" %}
<p>Use the component to let user select a date range.</p>
<div class="tabs">
  <ul>
    <li class="is-active"><a href="#range">Default</a></li>
    <li><a href="#range-inline">Inline</a></li>
    <li><a href="#range-labels">Custom labels</a></li>
    <li><a href="#range-labels-inline">Custom labels - Inline</a></li>
  </ul>
</div>

<div class="tab-contents">
  <div id="range" class="tab-content is-active">
    {{calendar_datepicker_example_range}}
  </div>

  <div id="range-inline" class="tab-content">
    {{calendar_datepicker_example_inline_range}}
  </div>

  <div id="range-labels" class="tab-content">
    <p>You can easily customize labels.</p>
    {{calendar_datepicker_example_range_labels}}
  </div>

  <div id="range-labels-inline" class="tab-content">
    <p>You can easily customize from and to selection labels.</p>
    {{calendar_datepicker_example_labels}}
  </div>
</div>

{% include anchor.html name="Colors" %}
<div class="columns is-multiline">
  <div class="column is-half">
    {{calendar_datepicker_example_inline_range}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_info}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_success}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_warning}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_danger}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_grey}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_dark}}
  </div>
  <div class="column is-half">
    {{calendar_datepicker_example_inline_black}}
  </div>
</div>