Blame view

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