<example src="./examples/BasicDatepicker.vue" />

<example src="./examples/LabeledDatepicker.vue" />

<example src="./examples/CancelOpenDatepicker.vue" />

<example src="./examples/DisabledDatesDatepicker.vue" />

<template>

<code-example title="With initial date selected" :component="examples['cancel-open-datepicker']" />

</div>

<div class="page-container-section">

<h2>Disabled dates</h2>

<p>Sometimes you may need to disable certain dates from being selected. Let's suppose that you only want to let user to select work days:</p>

<slot />

<keep-alive>

</keep-alive>

<md-overlay class="md-datepicker-overlay" md-fixed :md-active="showDialog" @click="toggleDialog" />

<template>

<md-popover :md-settings="popperSettings" md-active>

<div class="md-datepicker-dialog" :class="[$mdActiveTheme]">

<div class="md-datepicker-header">

<span class="md-datepicker-year-select" :class="{ 'md-selected': currentView === 'year' }" @click="currentView = 'year'">{{ selectedYear }}</span>

<md-dialog-actions class="md-datepicker-body-footer">

<md-button class="md-primary" @click="onCancel">Cancel</md-button>

</md-dialog-actions>

</div>

</div>

</script>