Datepicker #

<template>
  <section>
    <o-field grouped group-multiline>
      <o-field>
        <o-select v-model="locale" placeholder="Locale">
          <option :value="undefined"></option>
          <option value="de-DE">de-DE</option>
          <option value="en-CA">en-CA</option>
          <option value="en-GB">en-GB</option>
          <option value="en-US">en-US</option>
          <option value="es-ES">es-ES</option>
          <option value="es-MX">es-MX</option>
          <option value="fr-CA">fr-CA</option>
          <option value="fr-FR">fr-FR</option>
          <option value="it-IT">it-IT</option>
          <option value="ja-JP">ja-JP</option>
          <option value="pt-BR">pt-BR</option>
          <option value="ru-RU">ru-RU</option>
        </o-select>
      </o-field>
      <o-field>
        <o-switch v-model="showWeekNumber">Show week number</o-switch>
      </o-field>
    </o-field>
    <o-field label="Select a date">
      <o-datepicker
        v-model="selected"
        :show-week-number="showWeekNumber"
        :locale="locale"
        placeholder="Click to select..."
        icon="calendar"
        trap-focus
      >
      </o-datepicker>
    </o-field>
  </section>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const selected = ref(new Date());
    const showWeekNumber = ref(false);
    const locale = ref(); // Browser locale

    return {
      selected,
      showWeekNumber,
      locale,
    };
  },
});
</script>

<template>
  <o-field label="Select a date">
    <o-datepicker
      placeholder="Click to select..."
      icon="calendar"
      :min-date="minDate"
      :max-date="maxDate"
    >
    </o-datepicker>
  </o-field>
</template>
<script>
import { defineComponent } from 'vue';

const today = new Date();
const minDate = new Date(
  today.getFullYear(),
  today.getMonth(),
  today.getDate() - 7,
);
const maxDate = new Date(
  today.getFullYear(),
  today.getMonth(),
  today.getDate() + 7,
);

export default defineComponent({
  setup() {
    return {
      minDate,
      maxDate,
    };
  },
});
</script>

<template>
  <o-field label="Select a date">
    <o-datepicker
      placeholder="Click to select..."
      icon="calendar"
      range
    >
    </o-datepicker>
  </o-field>
</template>

<template>
  <o-field label="Select a date">
    <o-datepicker
      v-model="dates"
      multiple
      placeholder="Click to select..."
    >
    </o-datepicker>
  </o-field>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const dates = ref([]);

    return {
      dates,
    };
  },
});
</script>

<template>
  <section>
    <o-field label="Select a date" grouped>
      <o-datepicker v-model="selected">
        <template #trigger>
          <o-button icon-left="calendar" type="primary" />
        </template>
      </o-datepicker>
      <o-input readonly :value="selectedString" />
    </o-field>
  </section>
</template>
<script>
import { defineComponent, computed, ref } from 'vue';

export default defineComponent({
  setup() {
    const selected = ref(null);
    const selectedString = computed(
      () => 
        selected.value
          ? selected.value.toDateString()
          : ''
    );
    
    return {
      selected,
      selectedString,
    };
  },
});
</script>

<template>
  <section>
    <o-field>
      <o-datepicker ref="datepicker" expanded placeholder="Select a date">
      </o-datepicker>
      <o-button
        @click="$refs.datepicker.toggle()"
        icon-left="calendar"
        type="primary"
      />
    </o-field>
  </section>
</template>

<template>
  <o-field label="Select a date">
    <o-datepicker
      v-model="date"
      :first-day-of-week="1"
      placeholder="Click to select..."
    >
      <o-button variant="primary" @click="date = new Date()">
        <o-icon icon="calendar"></o-icon>
        <span>Today</span>
      </o-button>

      <o-button variant="danger" @click="date = null">
        <o-icon icon="times"></o-icon>
        <span>Clear</span>
      </o-button>
    </o-datepicker>
  </o-field>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const date = ref(new Date());

    return {
      date,
    };
  },
});
</script>

<template>
  <o-field label="Select a date">
    <o-datepicker
      :focused-date="date"
      :first-day-of-week="1"
      placeholder="Click to select..."
    >
      <template slot="header">
        <o-field>
          <o-autocomplete
            open-on-focus
            readonly
            v-model="month"
            :data="months"
            field="name"
            @select="selectMonth"
          >
          </o-autocomplete>
          <o-button disabled>{{ date.getFullYear() }}</o-button>
        </o-field>
      </template>
    </o-datepicker>
  </o-field>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';

const months = [
  { name: 'January', value: 0 },
  { name: 'February', value: 1 },
  { name: 'March', value: 2 },
  { name: 'April', value: 3 },
  { name: 'May', value: 4 },
  { name: 'June', value: 5 },
  { name: 'July', value: 6 },
  { name: 'August', value: 7 },
  { name: 'September', value: 8 },
  { name: 'October', value: 9 },
  { name: 'November', value: 10 },
  { name: 'December', value: 11 },
];

export default defineComponent({
  setup() {
    const date = ref(new Date());
    const month = ref(null);

    function selectMonth(option) {
      if (!option) {
        return;
      }

      date.value = new Date(date.value);
      date.value.setMonth(option.value);
    }

    onMounted(() => {
      month.value = months.filter(
        (item) => item.value == date.value.getMonth(),
      )[0].name;
    });

    return {
      date,
      month,
      months,
      selectMonth,
    };
  },
});
</script>

<template>
  <span>
    <o-field>
      <o-switch v-model="bars">Bars</o-switch>
    </o-field>
    <o-datepicker
      inline
      v-model="date"
      :events="events"
      :indicators="indicators"
    >
    </o-datepicker>
  </span>
</template>
<script>
import { defineComponent, ref, computed } from 'vue';

const thisMonth = new Date().getMonth();


export default defineComponent({
  setup() {
    const bars = ref(false);
    const date = ref(new Date(2017, thisMonth, 1));
    const indicators = computed(() => bars ? 'bars' : 'dots'); 

    return {
      bars,
      date,
      indicators,
      events: [
        new Date(2017, thisMonth, 2),
        new Date(2017, thisMonth, 6),
        {
          date: new Date(2017, thisMonth, 6),
          type: 'info',
        },
        {
          date: new Date(2017, thisMonth, 8),
          type: 'danger',
        },
        {
          date: new Date(2017, thisMonth, 10),
          type: 'success',
        },
        {
          date: new Date(2017, thisMonth, 10),
          type: 'link',
        },
        new Date(2017, thisMonth, 12),
        {
          date: new Date(2017, thisMonth, 12),
          type: 'warning',
        },
        {
          date: new Date(2017, thisMonth, 16),
          type: 'danger',
        },
        new Date(2017, thisMonth, 20),
        {
          date: new Date(2017, thisMonth, 29),
          type: 'success',
        },
        {
          date: new Date(2017, thisMonth, 29),
          type: 'warning',
        },
        {
          date: new Date(2017, thisMonth, 29),
          type: 'info',
        },
      ],
    };
  },
});
</script>

<template>
  <o-field label="Select a month">
    <o-datepicker
      placeholder="Click to select..."
      icon="calendar"
      type="month"
    >
    </o-datepicker>
  </o-field>
</template>