Blame view

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