mint-ui Datetime picker组件 / 时间选择器
vue 2017-11-09 17:23:06

endData 属性怎么表示当前时间7天后

JavaScript Code复制内容到剪贴板
  1. endDate: new Date(Date.parse(new Date) + 1000 * 60 * 60 * 24 * 7)  

 

 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="main">  
  3.         <label>  
  4.             <h3>开始时间</h3>  
  5.             <input type="text" id="publish_start_time" @click="openPicker($event)" v-text="publish_start_time">  
  6.             <span>至</span>  
  7.             <input type="text" id="publish_end_time" @click="openPicker" v-text="publish_end_time">  
  8.         </label>  
  9.   
  10.         <!--  
  11.             v-model 属性为组件的绑定值  
  12.             type 属性表示 datetime-picker 组件的类型，它有三个可能的值：  
  13.                 datetime: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象  
  14.                 date: 日期选择器，可选择年、月、日，value 值为一个 Date 对象  
  15.                 time: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串  
  16.               
  17.             @confirm 回调绑定事件，还有一个取消的事件，api并没有注明，可以用@cancle="取消后的事件名"  
  18.         -->  
  19.         <mt-datetime-picker ref="picker" v-model="pickerValue" type="datetime" @confirm="handleConfirm" ></mt-datetime-picker>  
  20.           
  21.     </div>  
  22. </template>  
  23.   
  24. <script>  
  25.     import { DatetimePicker } from 'mint-ui'  
  26.     export default {  
  27.         name: 'publishBaseForm',  
  28.         data: function() {  
  29.             return {  
  30.                 pickObj: "", //当前选择时间的对象  
  31.                 pickerValue: new Date(), // 选择时间的值  
  32.                 publish_start_time: "", //绑定表单的开始时间的值  
  33.                 publish_end_time: "", //绑定表单的结束时间的值  
  34.             }  
  35.         },  
  36.         methods: {  
  37.             openPicker(event) {  
  38.                 // 打开时间选择器  
  39.                 this.$refs.picker.open();  
  40.                 this.pickObj = event.target; //使用当前对象赋值，以便于在回调中将值传输进去  
  41.             },  
  42.             handleConfirm() {  
  43.                 //选择时间后的回调  
  44.                 let data = this.formatDate(this.pickerValue); //使用formatDate格式化输出  
  45.                 this.pickObj.value = data; //将选择的value值，传进表单中  
  46.             },  
  47.             formatDate(date) {  
  48.                 // 格式化日期为 y-m-d H:i:s  
  49.                 var y = date.getFullYear();  
  50.                 var m = date.getMonth() + 1;  
  51.                 mm = m < 10 ? ('0' + m) : m;  
  52.                 var d = date.getDate();  
  53.                 dd = d < 10 ? ('0' + d) : d;  
  54.                 var h = date.getHours();  
  55.                 hh = h < 10 ? ('0' + h) : h;  
  56.                 var minute = date.getMinutes();  
  57.                 minuteminute = minute < 10 ? ('0' + minute) : minute;  
  58.                 var second = date.getSeconds();  
  59.                 secondsecond = second < 10 ? ('0' + second) : second;  
  60.                 return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;  
  61.             },  
  62.         },  
  63.     }  
  64. </script>  

 

时间转换：

JavaScript Code复制内容到剪贴板
  1. formatDate(date, format = "yyyy-mm-dd H:i:s") {  
  2.     if(!date) {  
  3.         return "";  
  4.     }  
  5.     date = new Date(date);  
  6.     // 将接口返的时间格式转为 y-m-d H:i:s  
  7.     var y = date.getFullYear();  
  8.     var m = date.getMonth() + 1;  
  9.     m = m < 10 ? ('0' + m) : m;  
  10.     var d = date.getDate();  
  11.     d = d < 10 ? ('0' + d) : d;  
  12.     var h = date.getHours();  
  13.     h = h < 10 ? ('0' + h) : h;  
  14.     var minute = date.getMinutes();  
  15.     minute = minute < 10 ? ('0' + minute) : minute;  
  16.     var second = date.getSeconds();  
  17.     second = second < 10 ? ('0' + second) : second;  
  18.     var result;  
  19.     switch(format) {  
  20.         case 'yyyy-mm-dd':  
  21.             result = y + '-' + m + '-' + d;  
  22.             break;  
  23.         case 'yyyy/mm/dd':  
  24.             result = y + '/' + m + '/' + d;  
  25.             break;  
  26.         case 'yyyy/mm':  
  27.             result = y + '/' + m;  
  28.             break;  
  29.         case 'yyyy年mm月dd日 H:i:s':  
  30.             result = y + '年' + m + '月' + d + '日' + ' ' + h + ':' + minute + ':' + second;  
  31.             break;  
  32.         case 'yyyy/mm/dd H:i:s':  
  33.             result = y + '/' + m + '/' + d + ' ' + h + ':' + minute + ':' + second;  
  34.             break;  
  35.         default:  
  36.             result = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;  
  37.             break;  
  38.     }  
  39.     return result  
  40. },  

 

 

 

自定义时间模板：

1.jpg

XML/HTML Code复制内容到剪贴板
  1. <mt-datetime-picker  
  2.   v-model="pickerVisible"  
  3.   type="date"  
  4.   year-format="{value} 年"  
  5.   month-format="{value} 月"  
  6.   date-format="{value} 日">  
  7. </mt-datetime-picker>  

 

关于时间选择器中最小可选值 ，如果type是datetime，那么默认时间一定要Y-m-d H:i:s的格式

例：

JavaScript Code复制内容到剪贴板
  1. <mt-datetime-picker ref="applyEndTimePicker" type="datetime" :startDate="applyEndTimeStartTime" month-format="{value}月" date-format="{value}日" v-model="applyEndTimePickerValue" @confirm="applyEndTimeHandleConfirm"></mt-datetime-picker>  
  2.   
  3.   
  4. data: function() {  
  5.     return {  
  6.         applyEndTimeStartTime:new Date("2015/12/1 1:04:03"),  
  7.     }  

 关于时间转换，IOS中不支持 Y-m-d H:i:s这种格式的，必须转为 Y/m/d H:i:s就可以正常了！

 

设置开始时间为10年前，结束时间为10年后：

JavaScript Code复制内容到剪贴板
  1. startDatenew Date(new Date().getFullYear() - 10, 0, 1),  
  2.   
  3. endDate:new Date(new Date().getFullYear() + 10, 0, 1),  

 

获取当前时间的七天后：

JavaScript Code复制内容到剪贴板
  1. endDate: new Date(Date.parse(new Date) + 1000 * 60 * 60 * 24 * 7)  

 

 

API

参数 说明 类型 可选值 默认值
type 组件的类型 String 'datetime', 'date', 'time' 'datetime'
cancelText 取消按钮文本 String   '取消'
confirmText 确定按钮文本 String   '确定'
startDate 日期的最小可选值 Date   十年前的 1 月 1 日
endDate 日期的最大可选值 Date   十年后的 12 月 31 日
startHour 小时的最小可选值 Number   0
endHour 小时的最大可选值 Number   23
yearFormat 年份模板 String   '{value}'
monthFormat 月份模板 String   '{value}'
dateFormat 日期模板 String   '{value}'
hourFormat 小时模板 String   '{value}'
minuteFormat 分钟模板 String   '{value}'

Events

事件名称 说明 回调参数
confirm 点击确认按钮时的回调函数 目前的选择值

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/196.html

上一篇 vue引入jquery及第三方插件
下一篇 mint-ui MessageBox
相关的文章
Powered by yoyo苏ICP备15045725号