Blame view

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