mint-ui的mt-datetime-picker日期/時間選擇器的問題,??

vue.js mint 日期選擇器時間選擇器 javascript

eric19740521 2019-11-11 23:01:07 ‧ 1385 瀏覽

分享至

mint-ui的mt-datetime-picker日期/時間選擇器的問題,??
每次挑選完日期或是時間!!
再去挑選的時候,竟然不是原來得日期/時間

或者是推薦的手機用的日期/時間挑選器...
感謝大家回復

問題如下圖所示

<!DOCTYPE html>
<html lang=zh-CN>
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VUE</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">



	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/vue-router.js"></script>

	<!-- jquery.min.js 要載入,不然Collapsible Navbar 不會生效的!! -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/mint-ui/lib/index.js"></script>





</head>
 
<body>
<div id="app">


<BR>



<button class="selectTime" @click="uf_picker1">選擇日期</button>
<button class="selectTime" @click="uf_picker2">選擇時間</button>

<p class="timeDes">當前日期是：{{this.pickerValue1}}</p>
<p class="timeDes">當前時間是：{{this.pickerValue2}}</p>

 			  <mt-datetime-picker
				ref="picker1"
				type="date"
				v-model="dateValue1"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
				@confirm="uf_handleConfirm1">
			  </mt-datetime-picker>
			  
			  <mt-datetime-picker
				ref="picker2"
				type="time"
				v-model="dateValue2"
				@confirm="uf_handleConfirm2">
			  </mt-datetime-picker>	

</div>


<script>
new Vue({
	el: '#app',
	data: {
		show_103:false,
		class1:'nav-item nav-link active',
		 radio: 3,
		pickerValue1:"",
		pickerValue2:"",
		dateValue1:"",
		dateValue2:""
	},
mounted: function () {
	var dataURL ="";
	var res="";
	var self = this;			
					
		
	
	var TimeNow=new Date();
	var yyyy = TimeNow.getFullYear();
	var MM = (TimeNow.getMonth()+1<10 ? '0' : '')+(TimeNow.getMonth()+1);
	var dd = (TimeNow.getDate()<10 ? '0' : '')+TimeNow.getDate();
	var h = (TimeNow.getHours()<10 ? '0' : '')+TimeNow.getHours();
	var m = (TimeNow.getMinutes()<10 ? '0' : '')+TimeNow.getMinutes();
	var s = (TimeNow.getSeconds()<10 ? '0' : '')+TimeNow.getSeconds();
	this.pickerValue1 = yyyy+ "-" + MM + "-" + dd ;	
	
	this.pickerValue2 = "00:00";
	
},	
//https://blog.csdn.net/qq_35430000/article/details/82183079
methods: {
	
//日期選擇器
uf_picker1: function () {
	var yy,mm,dd;
	
	
	console.log("this.pickerValue1=>"+this.pickerValue1);
	if (this.dateValue1) {
		
		yy=this.pickerValue1.substring(0,4);
		mm=this.pickerValue1.substring(6,2);
		dd=this.pickerValue1.substring(9,2);
		
		this.dateValue1 = new Date(yy,mm,dd);
	} else {
		this.dateValue1 = new Date();
	}


	this.$refs.picker1.open();
	
},	
//日期選擇器
uf_picker2: function () {

	console.log("this.pickerValue2=>"+this.pickerValue2);	
	if (this.dateValue2) {
		this.dateValue2 = this.pickerValue2.substring(0,2)+":"+this.pickerValue2.substring(4,2);
	} else {
		this.dateValue2 = "00:00";
	}
	
	this.$refs.picker2.open();
	
},	
uf_handleConfirm1: function () {
	
	
	var TimeNow=new Date(this.dateValue1);
	var yyyy = TimeNow.getFullYear();
	var MM = (TimeNow.getMonth()+1<10 ? '0' : '')+(TimeNow.getMonth()+1);
	var dd = (TimeNow.getDate()<10 ? '0' : '')+TimeNow.getDate();
	var h = (TimeNow.getHours()<10 ? '0' : '')+TimeNow.getHours();
	var m = (TimeNow.getMinutes()<10 ? '0' : '')+TimeNow.getMinutes();
	var s = (TimeNow.getSeconds()<10 ? '0' : '')+TimeNow.getSeconds();
	this.pickerValue1 = yyyy+ "-" + MM + "-" + dd ;	
	
	console.log("選取後this.pickerValue1=>"+this.pickerValue1);	
	
	
},
uf_handleConfirm2: function () {
	this.pickerValue2 = this.dateValue2;
	
	console.log("選取後this.pickerValue2=>"+this.pickerValue2);		
},


}
});
</script>

</body>
 
</html>

eric19740521 iT邦新手 1 級 ‧ 2019-11-12 02:36:20 檢舉

找到問題了
原來是初始值錯誤

var yy,mm,dd;

console.log("this.pickerValue1=>"+this.pickerValue1);

yy=this.pickerValue1.substr(0,4);
mm=this.pickerValue1.substr(5,2);
dd=this.pickerValue1.substr(8,2);

console.log("this.pickerValue1=>"+yy+" - "+mm+" - "+dd);

this.dateValue1 = new Date(yy, mm -1 , dd, 1, 30, 15);

console.log(this.dateValue1);

this.$refs.picker1.open();

登入發表討論