How to use vue-my-datepicker

This blog describes how to use vue-my-datepicker components.

Install

1
2
3
npm install vue-my-datepicker or 
<script src="vueMyDatepicker.umd.js"></script>
<link rel="stylesheet" type="text/css" href="vueMyDatepicker.css">

Not support yarn add for now.

Use in vue project

1
2
3
4
5
6
7
8
import {vueMyDatepicker} from 'vue-my-datepicker'
import 'vue-my-datepicker/lib/vueMyDatepicker.css'
export default {
  name: 'app',
  components: {
    vueMyDatepicker
  }
}

parameters

Props/methods Type Default Description
timeRange Int 2 The default timerange you want to selected
reloadFlag Boolean false Use to reload the components, only useful for serve mode
dataTimeLabelPosition String right The position of the custom timerange panel, can set to left
initStart String null The default start time, only used for serve mode, the format will be ISO format: "2019-09-18 16:55:12"
initEnd String null The default end time, only used for serve mode, the format will be ISO format: "2019-09-17 16:55:12"
useLocalTime Boolean true Whether use local time, if use local time,the start time and end time will be caculate within components with javascript.
Set it to false to use serve mode, then you need to get start time and end time from backend server.
locale String en_US The language of this component, support en_US/zh_CN/ja_JP
select-time-range function N/A When user change the timerange inside the component, then this function will return start time and end time to user.
change-time-range function N/A Only use for serve mode, if user change time range inside component, this function will return current timerange to user to
get start time and end time from bakend server.

How to use

1.Use local time mode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 1     
			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});



2.Use local time with left panel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 1,
			    dataTimeLabelPosition: 'left',

			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});



3.Use serve time mode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
new Vue({
	el:"#app_serve",
	data:function(){
		return{
			sever_param:{
				timeRange: 3,
				reloadFlag: false,
				initStart:"2019-09-16 01:43:10",
				initEnd:"2019-09-16 05:43:10",
				useLocalTime:false      
			},    				
		}
	},
	methods:{
	    serverSelectTimeRange(time_range){
	      console.log(time_range);//when use select custom timerange will trigger this function
	    },
	    changeTimeRange(time_range_value){
	      /*var _vue = this;
	      	$.get('/API/to/get/datatime/from/backend',data:{timerange:time_range_value},function(data){
		      	_vue.sever_param.initStart = data.start_time;
		        _vue.sever_param.initEnd = data.start_time;
		        _vue.reloadTimeRange();
	      	})*/

	      //this is just fake data for demo, you shound use above code to get datetime from backend server.
	      this.sever_param.timeRange = time_range_value;//update timeRange in param
	      if(time_range_value == 1){
	        this.sever_param.initStart = "2019-09-16 01:43:10";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();
	      }else if(time_range_value == 2){
	        this.sever_param.initStart = "2019-09-15 05:43:10";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();
	      }else if(time_range_value == 3){
	        this.sever_param.initStart = "2019-09-19 00:00:00";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();        
	      }else if(time_range_value == 4){
	        this.sever_param.initStart = "2019-08-16 00:00:00";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();        
	      }else if(time_range_value == 5){
	        this.sever_param.initStart = "2019-06-16 00:00:00";
	        this.sever_param.initEnd = "2019-09-16 05:43:10";
	        this.reloadTimeRange();        
	      }
	    },
	    reloadTimeRange(){
	    	this.sever_param.reloadFlag = !this.sever_param.reloadFlag;
	    }   			
	}
});




4.Use zh_CN locale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 2,
			    locale:"zh_CN"     
			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});




5.Use ja_JP locale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
	el:"#app_local",
	data:function(){
		return{
			local_param:{
			    timeRange: 4.
			    locale:"ja_JP"     
			}    				
		}
	},
	methods:{
	    customerSelectTimeRange(time_range){
	      console.log(time_range);//{start: "2019-09-17 10:26:18", end: "2019-09-18 10:26:18"}
	      //do whatever you want here when you get the start_time and end_time here
	    },    			
	}
});