Inline version of md-datepicker

docs/app/i18n/en-US/pages.js

@@ -195,6 +195,9 @@ export default {
     title: 'Datepicker',
     nav: 'Date'
   },
+  datepickerInline: {
+    title: 'Datepicker inline',
+  },
   dialog: {
     title: 'Dialog'
   },

docs/app/pages/Components/Datepicker/Datepicker.vue

@@ -8,7 +8,8 @@
 <template>
   <page-container centered :title="$t('pages.datepicker.title')">
     <div class="page-container-section">
-      <p>Datepickers use a dialog window and provide a simple way to select a single value from a pre-determined set. The component can have disabled dates and it's really easy to use.</p>
+      <p>Datepickers use a dialog window and provide a simple way to select a single value from a pre-determined set.
+        The component can have disabled dates and it's really easy to use.</p>
     </div>
 
     <div class="page-container-section">

docs/app/pages/Components/DatepickerInline/DatepickerInline.vue

@@ -0,0 +1,95 @@
+<example src="./examples/BasicDatepicker.vue"/>
+<example src="./examples/DisabledDatesDatepicker.vue"/>
+<example src="./examples/InputAndMenuDatepicker.vue"/>
+
+<template>
+  <page-container centered :title="$t('pages.datepicker.title')">
+    <div class="page-container-section">
+      <p>Datepicker provide a calendar to pick a date from. The component can switch between landscape and vertical mode
+        based on css breakpoints.</p>
+    </div>
+    <div class="page-container-section">
+      <h2>Datepicker</h2>
+      <code-example title="Basic Example" :component="examples['basic-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 want to let the
+        user select only week days:</p>
+      <code-example title="No weekends available" :component="examples['disabled-dates-datepicker']"/>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Datepicker with input and menu</h2>
+      <p>Inline datepickers intergrate well with <code>md-menu</code>. Just add <code>.md-datepicker-popup</code> class.</p>
+      <code-example title="Datepicker inside menu" :component="examples['input-and-menu-datepicker']"/>
+    </div>
+
+    <div class="page-container-section">
+      <api-item title="API - md-datepicker-inline">
+        <p>All the following options can be applied to the md-datepicker-inline component:</p>
+
+        <api-table :headings="props.headings" :props="props.props" slot="props"/>
+        <api-table :headings="events.headings" :props="events.props" slot="events"/>
+        <api-table :headings="classes.headings" :props="classes.props" slot="classes"/>
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+  import examples from 'docs-mixins/docsExample'
+
+  export default {
+    name: 'DocDatepickerInline',
+    mixins: [examples],
+    data: () => ({
+      props: {
+        headings: ['Name', 'Description', 'Default'],
+        props: [
+          {
+            name: 'md-date',
+            type: 'Date',
+            description: 'Selected date',
+            defaults: 'null'
+          },
+          {
+            name: 'md-current-date',
+            type: 'Date',
+            description: 'Default date to show in datepicker',
+            defaults: 'null'
+          },
+          {
+            name: 'md-disabled-dates',
+            type: 'Array|Function',
+            description: 'The optional disabled dates. Can be either Array or Function. <br>- If <code>Array</code>, the Datepicker will disable all days inside. <br>- If <code>Function</code>, the Datepicker will pass the current day as a parameter of this function. If the return false, then the date will be disabled.',
+            defaults: 'null'
+          },
+        ]
+      },
+      events: {
+        headings: ['Name', 'Description', 'Value'],
+        props: [
+          {
+            name: 'md-click:day',
+            description: 'Triggered when day clicked',
+            value: 'null'
+          },
+        ]
+      },
+      classes: {
+        headings: ['Name', 'Description'],
+        props: [
+          {
+            name: 'md-<code>[breakpoint]</code>-vertical',
+            description: 'Activates vertical mode for a particular breakpoint',
+          },
+          {
+            name: 'md-<code>[breakpoint]</code>-landscape',
+            description: 'Activates landscape mode for a particular breakpoint',
+          },
+        ]
+      }
+    })
+  }
+</script>

docs/app/pages/Components/DatepickerInline/examples/BasicDatepicker.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="md-layout md-gutter">
+      <div class="md-layout-item">
+        <md-datepicker-inline :md-date.sync="selectedDate" :class="layout"/>
+      </div>
+      <div class="md-layout-item">
+        Selected date: {{ selectedDate }}
+      </div>
+    </div>
+
+    <md-divider/>
+    <md-field>
+      <label>First day of a week</label>
+      <md-select v-model="firstDayOfAWeek">
+        <md-option value="0">Sunday</md-option>
+        <md-option value="1">Monday</md-option>
+      </md-select>
+      <span class="md-helper-text">This config is global.</span>
+    </md-field>
+    <md-field>
+      <label>Layout</label>
+      <md-select v-model="layout">
+        <md-option value="md-vertical">Vertical</md-option>
+        <md-option value="md-landscape">Landscape</md-option>
+      </md-select>
+    </md-field>
+  </div>
+</template>
+
+<script>
+  import MdDateIcon from 'core/icons/MdDateIcon'
+  import format from 'date-fns/format'
+  import parse from 'date-fns/parse'
+  import isValid from 'date-fns/isValid'
+  import MdDebounce from 'core/utils/MdDebounce';
+
+  export default {
+    name: 'BasicInlineDatepicker',
+    data () {
+      return {
+        selectedDate: null,
+        layout: 'md-landscape'
+      }
+    },
+    computed: {
+      firstDayOfAWeek: {
+        get () {
+          return this.$material.locale.firstDayOfAWeek
+        },
+        set (val) {
+          this.$material.locale.firstDayOfAWeek = val
+        }
+      },
+    }
+  }
+</script>

docs/app/pages/Components/DatepickerInline/examples/DisabledDatesDatepicker.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <md-datepicker-inline :md-date.sync="selectedDate" :md-disabled-dates="disabledDates" />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DisabledDatesDatepicker',
+    data: () => ({
+      selectedDate: null,
+      disabledDates: date => {
+        const day = date.getDay()
+
+        return day === 6 || day === 0
+      }
+    })
+  }
+</script>

docs/app/pages/Components/DatepickerInline/examples/InputAndMenuDatepicker.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div>
+      <div class="md-caption">Open by button</div>
+      <md-menu md-direction="bottom-start">
+        <md-button class="md-primary md-raised" md-menu-trigger>Open datepicker</md-button>
+        <md-menu-content class="md-datepicker-popup">
+          <md-datepicker-inline :md-date.sync="selectedDate"/>
+        </md-menu-content>
+      </md-menu>
+    </div>
+    <br/>
+    <div>
+      <div class="md-caption">Open on input focus</div>
+      <md-field class="md-has-datepicker" @click.native.stop>
+        <md-icon @click.native="showMenu">
+          date_range
+        </md-icon>
+        <label>Date</label>
+        <md-menu md-direction="bottom-start" md-align-trigger :md-active.sync="menuActive">
+          <md-input v-model="inputValue" @focus="showMenu"></md-input>
+          <md-menu-content class="md-datepicker-popup">
+            <md-datepicker-inline :md-date.sync="selectedDate" @md-click:day="hideMenu"/>
+          </md-menu-content>
+        </md-menu>
+      </md-field>
+    </div>
+  </div>
+</template>
+
+<script>
+  import format from 'date-fns/format'
+  import parse from 'date-fns/parse'
+  import isValid from 'date-fns/isValid'
+  import MdDebounce from 'core/utils/MdDebounce';
+
+  export default {
+    name: 'InputAndMenuDatepicker',
+    data () {
+      return {
+        selectedDate: null,
+        menuActive: false,
+      }
+    },
+    computed: {
+      inputValue: {
+        get () {
+          if (!this.selectedDate) {
+            return ''
+          }
+          return format(this.selectedDate, 'dd.MM.yyyy')
+        },
+        set: MdDebounce(function (value) {
+          if (value === '') {
+            this.selectedDate = null;
+            return;
+          }
+          const date = parse(value, 'dd.MM.yyyy', new Date())
+          if (isValid(date)) {
+            this.selectedDate = date
+          }
+        }, 500)
+      },
+    },
+    methods: {
+      showMenu () {
+        this.menuActive = true
+      },
+      hideMenu () {
+        this.menuActive = false
+      }
+    }
+  }
+</script>

docs/app/routes.js

@@ -44,6 +44,11 @@ export const routes = [
     name: 'components/datepicker',
     page: 'Components/Datepicker/Datepicker.vue'
   },
+  {
+    path: '/components/datepicker-inline',
+    name: 'components/datepicker-inline',
+    page: 'Components/DatepickerInline/DatepickerInline.vue'
+  },
   {
     path: '/components/steppers/:optional?/:sub?',
     name: 'components/steppers',

docs/app/template/MainNavContent.vue

@@ -37,6 +37,7 @@
       <router-link to="/components/content">{{ $t('pages.content.title') }}</router-link>
 
       <router-link to="/components/datepicker">{{ $t('pages.datepicker.title') }}</router-link>
+      <router-link to="/components/datepicker-inline">{{ $t('pages.datepickerInline.title') }}</router-link>
       <router-link to="/components/dialog">{{ $t('pages.dialog.title') }}</router-link>
       <router-link to="/components/divider">{{ $t('pages.divider.title') }}</router-link>
       <router-link to="/components/drawer">{{ $t('pages.drawer.title') }}</router-link>

src/components/MdDatepicker/MdDatepickerDialog.vue

@@ -379,6 +379,28 @@
       transform-origin: center center;
       position: fixed !important;
     }
+
+    .md-datepicker-month {
+      top: 8px;
+      bottom: auto;
+      flex-direction: column;
+      transition: .35s $md-transition-default-timing;
+      transition-property: transform, opacity;
+      will-change: transform, opacity;
+
+      @include md-layout-xsmall {
+        padding: 0 6px;
+      }
+
+      .md-datepicker-month-trigger {
+        min-height: 32px;
+        margin: 0 46px 10px;
+        flex: 1;
+        border-radius: 0;
+        transition: transform .45s $md-transition-default-timing;
+        will-change: transform;
+      }
+    }
   }
 
   .md-datepicker-dialog-leave-active {
@@ -559,28 +581,6 @@
     }
   }
 
-  .md-datepicker-month {
-    top: 8px;
-    bottom: auto;
-    flex-direction: column;
-    transition: .35s $md-transition-default-timing;
-    transition-property: transform, opacity;
-    will-change: transform, opacity;
-
-    @include md-layout-xsmall {
-      padding: 0 6px;
-    }
-
-    .md-datepicker-month-trigger {
-      min-height: 32px;
-      margin: 0 46px 10px;
-      flex: 1;
-      border-radius: 0;
-      transition: transform .45s $md-transition-default-timing;
-      will-change: transform;
-    }
-  }
-
   .md-datepicker-week {
     display: flex;
     align-items: center;