Vue封装移动端日期选择器组件

npm地址：https://www.npmjs.com/package/vuejs-mobile-datepicker   

Github地址：https://github.com/J1ong/vuejs-mobile-datepicker（欢迎Star）

效果图：

日期选择器组件功能在线演示地址https://1g703.csb.app(为有更好的体验，请在浏览器上切换到手机模式或在手机上体验，如在csdn直接跳转带不开，可复制该地址到地址栏访问即可)

使用：

1、引入日期选择器组件

import DatePicker from '../../../components/DatePicker/DatePicker' //引入日期选择器组件，路径根据文件位置而定

2、注册日期选择器组件

3、使用

<date-picker
     language="en"
     :show-picker-model = "showDatePicker" 
     :default-date = "new Date(birthday)"
     :start-date = "new Date('1968-10-20')"
     :end-date = "new Date()"
     :disable-date="disableDate"
     @cancel = "handleCancel"
     @confirm = "handleConfirm" />

参数说明

参数	说明	类型	默认值	可选
show-picker-model	控制日期选择器显示隐藏	Boolean	false	true | false
mark-weekend	是否标记周末日期	Boolean	false	true | false
language	语言	String	“zh”	“zh” | “en”
default-date	默认选择日期	Date	new Date()	--
start-date	日期选择器可选最小日期	Date	new Date('1900-1-1')	--
end-date	日期选择器可选最大日期	Date	new Date()	--
disable-date	禁用日期，参数为日期字符串，要求返回Boolean，为true禁用	Function	--	--

 

事件

事件名称	说明	回调
cancel	点击取消按钮时触发	--
confirm	点击确认按钮时触发	--

4、日期选择器完整代码

<template>
  <div id="mobile-datepicker" v-show="showPickerModel" @click.self="handleCancel">
    <div class="mdp_container">
      <!-- 组件头部开始 -->
      <div class="mdp_header">
        <div
          class="mdp_current_year"
          :class="{'active':changeContentFlag}"
          @click="showYearPicker()"
        >{
  {currentYear}}{
  {isEnglish?"":"年"}}</div>
        <br />
        <div
          class="mdp_current_date"
          :class="{'active':!changeContentFlag}"
          @click="showDatePicker()"
        >{
  {currentDateText}}</div>
      </div>
      <!-- 组件头部结束 -->
      <!-- 组件主体内容开始 -->
      <div class="mdp_content">
        <!-- 组件日期主体内容开始 -->
        <div class="mdp_date_content" v-show="!changeContentFlag">
          <div class="mdp_switch_month">
            <span
              class="mdp_arrow_action"
              :class="{'mdp_arrow_hide':startDate-new Date(year,month,1)>=0}"
              @click="preMonth"
            >
              <span class="mdp_left mdp_arrow"&