Blame view

test/routers/date.vue 3.2 KB
0f677893   梁灏   update DatePicker
1
2
  <template>
      <div style="margin: 50px">
c46f385a   梁灏   update DatePicker
3
4
5
          <br>
          <row>
              <i-col span="4">
2533a192   梁灏   update DatePicker
6
                  <!--<i-button @click="setDate">set date</i-button>-->
e1874103   梁灏   update DatePicker
7
8
9
10
11
12
13
14
                  <date-picker
                          style="width:200px"
                          placeholder="请选择日期"
                          :value.sync="value"
                          :options="options"
                          @on-change="change"
                          :format="format"
                          @on-open-change="change2"></date-picker>
c46f385a   梁灏   update DatePicker
15
16
17
18
19
20
21
22
              </i-col>
              <i-col span="4">
                  <date-picker type="year" style="width:200px" placeholder="请选择日期" :value.sync="value" :options="options"></date-picker>
              </i-col>
              <i-col span="4">
                  <date-picker type="month" style="width:200px" placeholder="请选择日期" :value.sync="value" :options="options"></date-picker>
              </i-col>
          </row>
0f677893   梁灏   update DatePicker
23
24
25
26
      </div>
  </template>
  <script>
      export default {
0f677893   梁灏   update DatePicker
27
          data () {
50637863   梁灏   update DatePicker
28
              return {
2533a192   梁灏   update DatePicker
29
  //                value: new Date(),
e55f00ff   梁灏   update DatePicker
30
                  value: '2016-12-25',
50637863   梁灏   update DatePicker
31
32
                  options: {
                      disabledDate(time) {
13be4434   梁灏   update DatePicker
33
34
  //                        console.log(time)
  //                        return time.getFullYear() < 2016;
50637863   梁灏   update DatePicker
35
36
                          return time.getTime() < Date.now() - 8.64e7;
  //                        return time && time.valueOf() < Date.now();
2533a192   梁灏   update DatePicker
37
38
39
40
41
                      },
                      shortcuts: [
                          {
                              text: '今天',
                              value () {
e55f00ff   梁灏   update DatePicker
42
43
  //                                return new Date();
                                  return '1/2/19'
2533a192   梁灏   update DatePicker
44
                              },
e55f00ff   梁灏   update DatePicker
45
                              onClick (picker) {
2533a192   梁灏   update DatePicker
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
                                  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;
                              },
e55f00ff   梁灏   update DatePicker
67
68
69
                              onClick () {
                                  console.log('点击了一周前');
                              }
2533a192   梁灏   update DatePicker
70
71
                          }
                      ]
c46f385a   梁灏   update DatePicker
72
                  },
2533a192   梁灏   update DatePicker
73
                  format: 'yyyy-MM-dd'
50637863   梁灏   update DatePicker
74
              }
0f677893   梁灏   update DatePicker
75
76
          },
          computed: {},
c46f385a   梁灏   update DatePicker
77
78
          methods: {
              change (date) {
344131a7   梁灏   update DatePicker
79
                  console.log(date)
c46f385a   梁灏   update DatePicker
80
81
82
              },
              change2 (s) {
  //                console.log(s)
2533a192   梁灏   update DatePicker
83
84
85
              },
              setDate () {
                  this.value = '2016-12-24'
c46f385a   梁灏   update DatePicker
86
87
              }
          }
0f677893   梁灏   update DatePicker
88
89
      }
  </script>