diff --git a/docs/app/i18n/en-US/pages.js b/docs/app/i18n/en-US/pages.js
index 20236f671..de2472d8a 100644
--- a/docs/app/i18n/en-US/pages.js
+++ b/docs/app/i18n/en-US/pages.js
@@ -195,6 +195,9 @@ export default {
     title: 'Datepicker',
     nav: 'Date'
   },
+  datepickerInline: {
+    title: 'Datepicker inline',
+  },
   dialog: {
     title: 'Dialog'
   },
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
index b24886029..cac790e7f 100644
--- a/docs/app/pages/Components/Datepicker/Datepicker.vue
+++ b/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">
diff --git a/docs/app/pages/Components/DatepickerInline/DatepickerInline.vue b/docs/app/pages/Components/DatepickerInline/DatepickerInline.vue
new file mode 100644
index 000000000..1a26d0606
--- /dev/null
+++ b/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>
diff --git a/docs/app/pages/Components/DatepickerInline/examples/BasicDatepicker.vue b/docs/app/pages/Components/DatepickerInline/examples/BasicDatepicker.vue
new file mode 100644
index 000000000..4d17a7977
--- /dev/null
+++ b/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>
diff --git a/docs/app/pages/Components/DatepickerInline/examples/DisabledDatesDatepicker.vue b/docs/app/pages/Components/DatepickerInline/examples/DisabledDatesDatepicker.vue
new file mode 100644
index 000000000..acc6a2a54
--- /dev/null
+++ b/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>
diff --git a/docs/app/pages/Components/DatepickerInline/examples/InputAndMenuDatepicker.vue b/docs/app/pages/Components/DatepickerInline/examples/InputAndMenuDatepicker.vue
new file mode 100644
index 000000000..b1d19e17d
--- /dev/null
+++ b/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>
diff --git a/docs/app/routes.js b/docs/app/routes.js
index 3897cfc90..9650970d6 100644
--- a/docs/app/routes.js
+++ b/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',
diff --git a/docs/app/template/MainNavContent.vue b/docs/app/template/MainNavContent.vue
index 62f04f05c..ac6268252 100644
--- a/docs/app/template/MainNavContent.vue
+++ b/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>
diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
index 237d23197..349c28b24 100644
--- a/src/components/MdDatepicker/MdDatepickerDialog.vue
+++ b/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;
diff --git a/src/components/MdDatepicker/MdDatepickerInline.vue b/src/components/MdDatepicker/MdDatepickerInline.vue
new file mode 100644
index 000000000..97e11bc52
--- /dev/null
+++ b/src/components/MdDatepicker/MdDatepickerInline.vue
@@ -0,0 +1,662 @@
+<template>
+  <div class="md-datepicker-inline" :class="[$mdActiveTheme]">
+    <div class="md-datepicker-header">
+      <span class="md-datepicker-year-select" :class="{ 'md-selected': currentView === 'year' }"
+            @click="setView('year')">{{ selectedYear }}</span>
+      <div class="md-datepicker-date-select" :class="{ 'md-selected': currentView !== 'year' }"
+           @click="setView('day')">
+        <strong class="md-datepicker-dayname">{{ shortDayName }}, </strong>
+        <strong class="md-datepicker-monthname">{{ shortMonthName }}</strong>
+        <strong class="md-datepicker-day">{{ currentDay }}</strong>
+      </div>
+    </div>
+    <div class="md-datepicker-body">
+      <transition name="md-datepicker-body-header">
+        <div class="md-datepicker-body-header" v-if="currentView === 'day'">
+          <md-button class="md-dense md-icon-button" @click="previousMonth">
+            <md-arrow-left-icon/>
+          </md-button>
+
+          <md-button class="md-dense md-icon-button" @click="nextMonth">
+            <md-arrow-right-icon/>
+          </md-button>
+        </div>
+      </transition>
+
+      <div class="md-datepicker-body-content" :style="contentStyles">
+        <transition :name="`md-datepicker-view-${transitionDirection}`">
+          <transition-group class="md-datepicker-view md-datepicker-panel md-datepicker-calendar"
+                            :class="calendarClasses" tag="div"
+                            name="md-datepicker-month" v-if="currentView === 'day'">
+            <div class="md-datepicker-panel md-datepicker-month" v-for="month in [currentDate]" :key="month.getMonth()">
+              <md-button class="md-dense md-datepicker-month-trigger" @click="setView('month')">
+                {{ currentMonthName }} {{ currentYear }}
+              </md-button>
+
+              <div class="md-datepicker-week">
+                <span v-for="(day, index) in locale.shorterDays" :key="index"
+                      v-if="index >= firstDayOfAWeek">{{ day }}</span>
+                <span v-for="(day, index) in locale.shorterDays" :key="index"
+                      v-if="index < firstDayOfAWeek">{{ day }}</span>
+              </div>
+
+              <div class="md-datepicker-days">
+                <span class="md-datepicker-empty" v-for="day in prefixEmptyDays" :key="'day-empty-'+day"></span>
+                <div class="md-datepicker-day" v-for="day in daysInMonth" :key="'day-'+day">
+                      <span
+                        class="md-datepicker-day-button"
+                        :class="{
+                          'md-datepicker-selected': isSelectedDay(day),
+                          'md-datepicker-today': isToday(day),
+                          'md-datepicker-disabled': isDisabled(day)
+                        }"
+                        @click="onClickDay($event, day)">{{ day }}</span>
+                </div>
+              </div>
+            </div>
+          </transition-group>
+
+          <div class="md-datepicker-view md-datepicker-panel md-datepicker-month-selector"
+               v-else-if="currentView === 'month'">
+            <md-button class="md-datepicker-year-trigger" @click="setView('year')">{{ currentYear }}</md-button>
+            <span
+              class="md-datepicker-month-button"
+              v-for="(month, index) in locale.months"
+              :class="{
+                    'md-datepicker-selected': currentMonthName === month
+                  }"
+              :key="month"
+              @click="switchMonth(index)">{{ month }}</span>
+          </div>
+
+          <keep-alive v-else-if="currentView === 'year'">
+            <md-content class="md-datepicker-view md-datepicker-panel md-datepicker-year-selector md-scrollbar">
+                  <span
+                    class="md-datepicker-year-button"
+                    v-for="year in availableYears"
+                    :class="{
+                      'md-datepicker-selected': currentYear === year
+                    }"
+                    :key="year"
+                    @click="switchYear(year)">{{ year }}</span>
+            </md-content>
+          </keep-alive>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import addMonths from 'date-fns/addMonths'
+  import startOfMonth from 'date-fns/startOfMonth'
+  import subMonths from 'date-fns/subMonths'
+  import getDate from 'date-fns/getDate'
+  import getDay from 'date-fns/getDay'
+  import getDaysInMonth from 'date-fns/getDaysInMonth'
+  import getMonth from 'date-fns/getMonth'
+  import getYear from 'date-fns/getYear'
+  import isEqual from 'date-fns/isEqual'
+  import isSameDay from 'date-fns/isSameDay'
+  import setDate from 'date-fns/setDate'
+  import setMonth from 'date-fns/setMonth'
+  import setYear from 'date-fns/setYear'
+
+  import MdComponent from 'core/MdComponent'
+  import MdArrowRightIcon from 'core/icons/MdArrowRightIcon'
+  import MdArrowLeftIcon from 'core/icons/MdArrowLeftIcon'
+
+  const daysInAWeek = 7
+
+  const viewsOrder = ['day', 'month', 'year']
+
+  const getElements = (el, selector) => {
+    if (el && el.querySelector) {
+      return el.querySelectorAll(selector)
+    }
+
+    return false
+  }
+
+  export default new MdComponent({
+    name: 'MdDatepickerInline',
+    components: {
+      MdArrowRightIcon,
+      MdArrowLeftIcon,
+    },
+    props: {
+      mdDate: Date,
+      mdCurrentDate: Date,
+      mdDisabledDates: [Array, Function],
+    },
+    data: () => ({
+      currentDate: null,
+      monthAction: null,
+      currentView: 'day',
+      contentStyles: {},
+      transitionDirection: 'to-bottom',
+      availableYears: null
+    }),
+    computed: {
+      firstDayOfAWeek () {
+        // normalize
+        let firstDayOfAWeek = Number(this.locale.firstDayOfAWeek)
+        if (Number.isNaN(firstDayOfAWeek) || !Number.isFinite(firstDayOfAWeek)) {
+          return 0
+        }
+        firstDayOfAWeek = Math.floor(firstDayOfAWeek) % daysInAWeek
+        firstDayOfAWeek += firstDayOfAWeek < 0 ? daysInAWeek : 0
+        return firstDayOfAWeek
+      },
+      locale () {
+        return this.$material.locale
+      },
+      calendarClasses () {
+        if (this.monthAction === 'next') {
+          return 'md-next'
+        }
+
+        return 'md-previous'
+      },
+      firstDayOfMonth () {
+        return startOfMonth(this.currentDate).getDay()
+      },
+      prefixEmptyDays () {
+        let prefixEmptyDays = this.firstDayOfMonth - this.firstDayOfAWeek
+        prefixEmptyDays += prefixEmptyDays < 0 ? daysInAWeek : 0
+        return prefixEmptyDays
+      },
+      daysInMonth () {
+        return getDaysInMonth(this.currentDate)
+      },
+      currentDay () {
+        if (this.mdDate) {
+          return getDate(this.mdDate)
+        }
+
+        return getDate(this.currentDate)
+      },
+      currentMonth () {
+        return getMonth(this.currentDate)
+      },
+      currentMonthName () {
+        return this.locale.months[this.currentMonth]
+      },
+      currentYear () {
+        return getYear(this.currentDate)
+      },
+      selectedYear () {
+        if (this.mdDate) {
+          return getYear(this.mdDate)
+        }
+
+        return getYear(this.currentDate)
+      },
+      shortDayName () {
+        if (this.mdDate) {
+          return this.locale.shortDays[getDay(this.mdDate)]
+        }
+
+        return this.locale.shortDays[getDay(this.currentDate)]
+      },
+      shortMonthName () {
+        if (this.mdDate) {
+          return this.locale.shortMonths[getMonth(this.mdDate)]
+        }
+
+        return this.locale.shortMonths[getMonth(this.currentDate)]
+      },
+    },
+    watch: {
+      mdDate () {
+        this.resetDate();
+      }
+    },
+    methods: {
+      setView (view) {
+        if (this.currentView !== view) {
+          this.transitionDirection = viewsOrder.indexOf(this.currentView) - viewsOrder.indexOf(view) > 0
+            ? 'to-top'
+            : 'to-bottom'
+
+          this.currentView = view
+        }
+      },
+      setContentStyles () {
+        const months = getElements(this.$el, '.md-datepicker-month')
+        if (months.length) {
+          const nextMonth = months[months.length - 1]
+
+          this.contentStyles = {
+            height: nextMonth.offsetHeight + 10 + 'px'
+          }
+        }
+      },
+      setAvailableYears () {
+        const {startYear, endYear} = this.locale
+        let counter = startYear
+        let years = []
+
+        while (counter <= endYear) {
+          years.push(counter++)
+        }
+
+        this.availableYears = years
+      },
+      handleDisabledDateByArray (date) {
+        return this.mdDisabledDates.some(disabledDate => isSameDay(disabledDate, date))
+      },
+      isDisabled (day) {
+        if (this.mdDisabledDates) {
+          const targetDate = setDate(this.currentDate, day)
+
+          if (Array.isArray(this.mdDisabledDates)) {
+            return this.handleDisabledDateByArray(targetDate)
+          } else if (typeof this.mdDisabledDates === 'function') {
+            return this.mdDisabledDates(targetDate)
+          }
+        }
+      },
+      isSelectedDay (day) {
+        return isSameDay(this.mdDate, setDate(this.currentDate, day))
+      },
+      isToday (day) {
+        return isSameDay(new Date(), setDate(this.currentDate, day))
+      },
+      previousMonth () {
+        this.monthAction = 'previous'
+        this.currentDate = subMonths(this.currentDate, 1)
+      },
+      nextMonth () {
+        this.monthAction = 'next'
+        this.currentDate = addMonths(this.currentDate, 1)
+      },
+      switchMonth (index) {
+        this.currentDate = setMonth(this.currentDate, index)
+        this.setView('day')
+      },
+      switchYear (year) {
+        this.currentDate = setYear(this.currentDate, year)
+        this.setView('month')
+      },
+      onClickDay ($event, day) {
+        this.$emit('md-click:day', $event)
+        this.selectDate(day)
+      },
+      selectDate (day) {
+        this.currentDate = setDate(this.currentDate, day)
+        this.$emit('update:mdDate', new Date(this.currentDate.getTime()))
+      },
+      resetDate () {
+        this.currentDate = this.mdDate || this.mdCurrentDate || new Date()
+        this.setView('day')
+      }
+    },
+    created () {
+      this.setAvailableYears()
+      this.resetDate()
+    },
+    mounted () {
+      this.setContentStyles()
+    }
+  })
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+  @import "~components/MdElevation/mixins";
+  @import "./mixins";
+
+  .md-datepicker-inline {
+    display: flex;
+    overflow: hidden;
+    z-index: 110;
+    border-radius: 2px;
+    backface-visibility: hidden;
+    pointer-events: auto;
+    transform-origin: top left;
+    flex-shrink: 0;
+    transition: opacity .2s $md-transition-stand-timing,
+    transform .35s $md-transition-stand-timing;
+    will-change: opacity, transform, left, top;
+    @include md-datepicker-layout;
+  }
+
+  .md-datepicker-header {
+    min-width: 150px;
+    padding: 16px;
+
+    .md-datepicker-year-select {
+      cursor: pointer;
+      opacity: .54;
+      transition: opacity .3s $md-transition-default-timing;
+      font-size: 16px;
+      font-weight: 700;
+      letter-spacing: .01em;
+      line-height: 24px;
+    }
+
+    .md-datepicker-date-select {
+      cursor: pointer;
+      opacity: .54;
+      transition: opacity .3s $md-transition-default-timing;
+      font-size: 32px;
+      font-weight: 900;
+      letter-spacing: 0;
+      line-height: 1.2em;
+    }
+
+    .md-datepicker-dayname {
+      display: block;
+    }
+
+    .md-selected {
+      opacity: 1;
+    }
+  }
+
+  .md-datepicker-body {
+    position: relative;
+    overflow: hidden;
+    transition: width .3s $md-transition-stand-timing;
+    will-change: width;
+
+    .md-button {
+      margin: 0;
+    }
+  }
+
+  .md-datepicker-body-header {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    pointer-events: none;
+
+    &:before,
+    &:after {
+      width: 48px;
+      height: 48px;
+      position: absolute;
+      top: 0;
+      z-index: 2;
+      pointer-events: none;
+      content: " ";
+    }
+
+    &:after {
+      left: 0;
+    }
+
+    &:before {
+      right: 0;
+    }
+
+    .md-button {
+      pointer-events: auto;
+      z-index: 3;
+    }
+  }
+
+  .md-datepicker-body-header-enter,
+  .md-datepicker-body-header-leave-active {
+    .md-button:first-child {
+      transform: translate3d(-150%, 0, 0);
+    }
+
+    .md-button:last-child {
+      transform: translate3d(150%, 0, 0);
+    }
+  }
+
+  .md-datepicker-body-content {
+    overflow: hidden;
+    transition: height .35s $md-transition-default-timing;
+    will-change: height;
+  }
+
+  .md-datepicker-panel {
+    display: flex;
+  }
+
+  .md-datepicker-view {
+    transition: 0.35s $md-transition-default-timing;
+    transition-property: transform;
+    will-change: transform;
+    width: 100%;
+
+    transform: translate3d(0, 0, 0);
+
+    &.md-datepicker-view-to-top-enter-active,
+    &.md-datepicker-view-to-top-leave-active,
+    &.md-datepicker-view-to-bottom-enter-active,
+    &.md-datepicker-view-to-bottom-leave-active {
+      position: absolute;
+      top: 0;
+    }
+
+    &.md-datepicker-view-to-top-enter {
+      transform: translate3d(0, 100%, 0);
+    }
+
+    &.md-datepicker-view-to-top-leave-to {
+      transform: translate3d(0, -100%, 0);
+    }
+
+    &.md-datepicker-view-to-top-enter-to,
+    &.md-datepicker-view-to-top-leave {
+      transform: translate3d(0, 0, 0);
+    }
+
+    &.md-datepicker-view-to-bottom-enter {
+      transform: translate3d(0, -100%, 0);
+    }
+
+    &.md-datepicker-view-to-bottom-leave-to {
+      transform: translate3d(0, 100%, 0);
+    }
+
+    &.md-datepicker-view-to-bottom-enter-to,
+    &.md-datepicker-view-to-bottom-leave {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .md-datepicker-calendar {
+
+    .md-datepicker-month-enter-active,
+    .md-datepicker-month-leave-active {
+      position: absolute;
+    }
+
+    &.md-previous {
+      .md-datepicker-month-enter {
+        transform: translate3D(-100%, 0, 0);
+
+        .md-datepicker-month-trigger {
+          transform: translate3D(-30%, 0, 0);
+        }
+      }
+
+      .md-datepicker-month-leave-active {
+        transform: translate3D(100%, 0, 0);
+      }
+    }
+
+    &.md-next {
+      .md-datepicker-month-enter {
+        transform: translate3D(100%, 0, 0);
+
+        .md-datepicker-month-trigger {
+          transform: translate3D(30%, 0, 0);
+        }
+      }
+
+      .md-datepicker-month-leave-active {
+        transform: translate3D(-100%, 0, 0);
+      }
+    }
+  }
+
+  .md-datepicker-month {
+    bottom: auto;
+    flex-direction: column;
+    transition: 0.35s $md-transition-default-timing;
+    transition-property: transform, opacity;
+    will-change: transform, opacity;
+
+    .md-datepicker-month-trigger {
+      min-height: 48px;
+      flex: 1;
+      border-radius: 0;
+      transition: transform .45s $md-transition-default-timing;
+      will-change: transform;
+    }
+  }
+
+  .md-datepicker-week {
+    display: flex;
+    align-items: center;
+
+    span {
+      flex: 1;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+
+  .md-datepicker-days {
+    $md-day-width: 100%;
+
+    display: flex;
+    flex-wrap: wrap;
+
+    .md-datepicker-empty,
+    .md-datepicker-day {
+      margin: 1px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 1 $md-day-width / 7;
+    }
+
+    .md-datepicker-day-button {
+      $width: 30px;
+
+      width: $width;
+      min-width: $width;
+      height: $width;
+      cursor: pointer;
+      border-radius: $width;
+      transition: .3s $md-transition-default-timing;
+      line-height: $width;
+      text-align: center;
+    }
+
+    .md-datepicker-selected {
+      font-weight: 700;
+    }
+
+    .md-datepicker-today {
+      font-weight: 700;
+    }
+
+    .md-datepicker-disabled {
+      pointer-events: none;
+    }
+  }
+
+  .md-datepicker-month-selector {
+    padding: 6px 8px 10px;
+    flex-wrap: wrap;
+    bottom: auto;
+
+    .md-datepicker-year-trigger {
+      width: 100%;
+      margin: 0 0 8px;
+      flex: 1 1 100%;
+    }
+  }
+
+  .md-datepicker-month-button,
+  .md-datepicker-year-button {
+    height: 36px;
+    margin: 3px 0;
+    cursor: pointer;
+    transition: .3s $md-transition-default-timing;
+    line-height: 36px;
+    font-weight: 500;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .md-datepicker-month-button {
+    flex: 1 1 33.3333%;
+    border-radius: 2px;
+    font-size: 13px;
+  }
+
+  .md-datepicker-year-selector {
+    flex-direction: column;
+    overflow: auto;
+    bottom: 52px;
+    border-bottom: 1px solid;
+
+    .md-button {
+      min-height: 36px;
+    }
+  }
+
+  .md-content.md-datepicker-year-selector {
+    background-color: transparent;
+    border-bottom: none;
+    height: 100%;
+  }
+
+  .md-datepicker-year-button {
+    font-size: 16px;
+
+    &.md-datepicker-selected {
+      font-size: 24px;
+    }
+  }
+
+  .md-field.md-has-datepicker {
+    .md-menu {
+      width: 100%;
+      display: flex;
+    }
+  }
+
+  .md-menu-content.md-datepicker-popup {
+    min-width: unset;
+    max-width: unset;
+    max-height: unset;
+    background-color: transparent;
+    overflow: hidden;
+
+    @include md-layout-xsmall {
+
+      &.md-menu-content-enter {
+        opacity: 0;
+        transform: translate3D(-50%, -50%, 0) scale(.9);
+      }
+      background-color: unset;
+      flex-direction: column;
+      top: 50% !important;
+      left: 50% !important;
+      transform: translate3D(-50%, -50%, 0);
+      transform-origin: center center;
+      position: fixed !important;
+      transition: opacity .2s $md-transition-stand-timing, transform .35s $md-transition-stand-timing;
+    }
+
+    .md-list {
+      padding: 0;
+    }
+  }
+</style>
diff --git a/src/components/MdDatepicker/index.js b/src/components/MdDatepicker/index.js
index fc11c5e74..7595a87c8 100644
--- a/src/components/MdDatepicker/index.js
+++ b/src/components/MdDatepicker/index.js
@@ -1,7 +1,9 @@
 import material from 'vue-material/material'
 import MdDatepicker from './MdDatepicker'
+import MdDatepickerInline from "./MdDatepickerInline";
 
 export default Vue => {
   material(Vue)
   Vue.component(MdDatepicker.name, MdDatepicker)
-}
\ No newline at end of file
+  Vue.component(MdDatepickerInline.name, MdDatepickerInline)
+}
diff --git a/src/components/MdDatepicker/mixins.scss b/src/components/MdDatepicker/mixins.scss
new file mode 100644
index 000000000..0cf38a210
--- /dev/null
+++ b/src/components/MdDatepicker/mixins.scss
@@ -0,0 +1,100 @@
+@import "~components/MdLayout/mixins";
+
+$md-calendar-width: 320px;
+
+@mixin md-vertical-layout {
+  flex-direction: column;
+  width: $md-calendar-width;
+
+  .md-datepicker-dayname {
+    display: inline;
+  }
+}
+
+@mixin md-landscape-layout {
+  flex-direction: row;
+  width: auto;
+
+  .md-datepicker-body {
+    width: $md-calendar-width;
+    flex: 0 0 $md-calendar-width;
+  }
+
+  .md-datepicker-dayname {
+    display: block;
+  }
+}
+
+@mixin md-datepicker-layout {
+
+  @include md-landscape-layout;
+
+  &.md-landscape {
+    @include md-landscape-layout;
+  }
+
+  &.md-vertical {
+    @include md-vertical-layout;
+  }
+
+  &.md-landscape-xsmall {
+    @include md-layout-xsmall {
+      @include md-landscape-layout;
+    }
+  }
+
+  &.md-landscape-small {
+    @include md-layout-small {
+      @include md-landscape-layout;
+    }
+  }
+
+  &.md-landscape-medium {
+    @include md-layout-medium {
+      @include md-landscape-layout;
+    }
+  }
+
+  &.md-landscape-large {
+    @include md-layout-large {
+      @include md-landscape-layout;
+    }
+  }
+
+  &.md-landscape-xlarge {
+    @include md-layout-xlarge {
+      @include md-landscape-layout;
+    }
+  }
+
+  &.md-vertical-xsmall {
+    @include md-layout-xsmall {
+      @include md-vertical-layout;
+    }
+  }
+
+  &.md-vertical-small {
+    @include md-layout-small {
+      @include md-vertical-layout;
+    }
+  }
+
+  &.md-vertical-medium {
+    @include md-layout-medium {
+      @include md-vertical-layout;
+    }
+  }
+
+  &.md-vertical-large {
+    @include md-layout-large {
+      @include md-vertical-layout;
+    }
+  }
+
+  &.md-vertical-xlarge {
+    @include md-layout-xlarge {
+      @include md-vertical-layout;
+    }
+  }
+
+}
diff --git a/src/components/MdDatepicker/theme.scss b/src/components/MdDatepicker/theme.scss
index 1ca143861..f9f880ad8 100644
--- a/src/components/MdDatepicker/theme.scss
+++ b/src/components/MdDatepicker/theme.scss
@@ -64,3 +64,58 @@
     }
   }
 }
+
+.md-datepicker-inline {
+  @include md-theme-component() {
+    @include md-theme-property(color, text-primary, background);
+
+    .md-datepicker-header {
+      @if md-get-theme-mode() == light {
+        @include md-theme-property(background-color, primary);
+        @include md-theme-property(color, text-primary, primary);
+      } @else {
+        @include md-theme-property(background-color, text-primary, '', .06);
+        @include md-theme-property(color, text-primary, background);
+      }
+    }
+
+    .md-datepicker-week {
+      @include md-theme-property(color, text-accent, background);
+    }
+
+    .md-datepicker-disabled {
+      @include md-theme-property(color, disabled, background);
+    }
+
+    .md-datepicker-today {
+      @include md-theme-property(color, primary, background);
+    }
+
+    .md-datepicker-day-button,
+    .md-datepicker-month-button,
+    .md-datepicker-year-button {
+      &:hover {
+        @include md-theme-property(background-color, divider);
+      }
+    }
+
+    .md-datepicker-day-button {
+      &.md-datepicker-selected {
+        @include md-theme-property(background-color, primary);
+        @include md-theme-property(color, text-primary, primary);
+      }
+    }
+
+    .md-datepicker-month-button,
+    .md-datepicker-year-button {
+      &.md-datepicker-selected {
+        @include md-theme-property(color, primary, background);
+      }
+    }
+
+    .md-datepicker-year-selector {
+      @include md-theme-property(border-bottom-color, divider, background);
+    }
+  }
+}
+
diff --git a/src/components/MdField/MdField.vue b/src/components/MdField/MdField.vue
index 684e13b71..675adc230 100644
--- a/src/components/MdField/MdField.vue
+++ b/src/components/MdField/MdField.vue
@@ -304,6 +304,7 @@
           left: 36px;
         }
 
+        .md-menu,
         .md-input,
         .md-textarea,
         .md-file {
diff --git a/src/components/MdMenu/MdMenuContent.vue b/src/components/MdMenu/MdMenuContent.vue
index 347a94d07..6da1a64ae 100644
--- a/src/components/MdMenu/MdMenuContent.vue
+++ b/src/components/MdMenu/MdMenuContent.vue
@@ -208,7 +208,7 @@
           this.MdMenu.bodyClickObserver = new MdObserveEvent(document.body, 'click', $event => {
             $event.stopPropagation()
 
-            if (!this.isMenu($event) && (this.MdMenu.closeOnClick || this.isBackdropExpectMenu($event))) {
+            if (!this.isMenuContentEl($event) && (this.MdMenu.closeOnClick || this.isBackdropExpectMenu($event))) {
               this.MdMenu.active = false
               this.MdMenu.bodyClickObserver.destroy()
               this.MdMenu.windowResizeObserver.destroy()