Blame view

test/routers/date.vue 4.69 KB
0f677893   梁灏   update DatePicker
1
  <template>
3cf7cfd1   梁灏   update DatePicker
2
      <div style="margin: 50px">
c46f385a   梁灏   update DatePicker
3
4
          <br>
          <row>
336b4f46   梁灏   fixed #132
5
              <i-col span="8">
2533a192   梁灏   update DatePicker
6
                  <!--<i-button @click="setDate">set date</i-button>-->
e1874103   梁灏   update DatePicker
7
8
9
10
11
12
13
                  <date-picker
                          style="width:200px"
                          placeholder="请选择日期"
                          :value.sync="value"
                          :options="options"
                          @on-change="change"
                          :format="format"
e1874103   梁灏   update DatePicker
14
                          @on-open-change="change2"></date-picker>
c46f385a   梁灏   update DatePicker
15
              </i-col>
336b4f46   梁灏   fixed #132
16
              <i-col span="8">
3cf7cfd1   梁灏   update DatePicker
17
18
19
20
21
22
23
                  <date-picker
                          type="daterange"
                          style="width:200px"
                          placeholder="请选择日期"
                          :value.sync="value2"
                          align="right"
                          :options="options2"></date-picker>
c46f385a   梁灏   update DatePicker
24
25
              </i-col>
          </row>
0f677893   梁灏   update DatePicker
26
27
28
29
      </div>
  </template>
  <script>
      export default {
0f677893   梁灏   update DatePicker
30
          data () {
50637863   梁灏   update DatePicker
31
              return {
2533a192   梁灏   update DatePicker
32
  //                value: new Date(),
e55f00ff   梁灏   update DatePicker
33
                  value: '2016-12-25',
3cf7cfd1   梁灏   update DatePicker
34
                  value2: ['2016-12-17', '2017-01-05'],
e0cd7f90   梁灏   fixed #134
35
                  options2: {
3cf7cfd1   梁灏   update DatePicker
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
                      shortcuts: [
                          {
                              text: '今天',
                              value () {
  //                                return new Date();
                                  return '1/2/19'
                              },
                              onClick (picker) {
                                  console.log('点击了今天');
                              }
                          },
                          {
                              text: '昨天',
                              value () {
                                  const date = new Date();
                                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                                  return date;
                              },
                              onClick () {
                                  console.log('点击了昨天');
                              }
                          },
                          {
                              text: '最近三个月',
                              value () {
                                  const date = new Date();
                                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                  return date;
                              },
                              onClick () {
                                  console.log('点击了一周前');
                              }
                          }
                      ]
e0cd7f90   梁灏   fixed #134
70
                  },
50637863   梁灏   update DatePicker
71
72
                  options: {
                      disabledDate(time) {
13be4434   梁灏   update DatePicker
73
74
  //                        console.log(time)
  //                        return time.getFullYear() < 2016;
50637863   梁灏   update DatePicker
75
76
                          return time.getTime() < Date.now() - 8.64e7;
  //                        return time && time.valueOf() < Date.now();
2533a192   梁灏   update DatePicker
77
78
79
80
81
                      },
                      shortcuts: [
                          {
                              text: '今天',
                              value () {
e55f00ff   梁灏   update DatePicker
82
83
  //                                return new Date();
                                  return '1/2/19'
2533a192   梁灏   update DatePicker
84
                              },
e55f00ff   梁灏   update DatePicker
85
                              onClick (picker) {
2533a192   梁灏   update DatePicker
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
                                  console.log('点击了今天');
                              }
                          },
                          {
                              text: '昨天',
                              value () {
                                  const date = new Date();
                                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                                  return date;
                              },
                              onClick () {
                                  console.log('点击了昨天');
                              }
                          },
                          {
6e572d44   梁灏   fixed #133
101
                              text: '最近三个月',
2533a192   梁灏   update DatePicker
102
103
104
105
106
                              value () {
                                  const date = new Date();
                                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                  return date;
                              },
e55f00ff   梁灏   update DatePicker
107
108
109
                              onClick () {
                                  console.log('点击了一周前');
                              }
2533a192   梁灏   update DatePicker
110
111
                          }
                      ]
c46f385a   梁灏   update DatePicker
112
                  },
2533a192   梁灏   update DatePicker
113
                  format: 'yyyy-MM-dd'
50637863   梁灏   update DatePicker
114
              }
0f677893   梁灏   update DatePicker
115
116
          },
          computed: {},
c46f385a   梁灏   update DatePicker
117
118
          methods: {
              change (date) {
344131a7   梁灏   update DatePicker
119
                  console.log(date)
c46f385a   梁灏   update DatePicker
120
121
122
              },
              change2 (s) {
  //                console.log(s)
2533a192   梁灏   update DatePicker
123
124
125
              },
              setDate () {
                  this.value = '2016-12-24'
c46f385a   梁灏   update DatePicker
126
127
              }
          }
0f677893   梁灏   update DatePicker
128
129
      }
  </script>