给日历组件增加了disable功能

ecomfe · Mar 6, 2018 · b1ac937 · b1ac937
1 parent 73eda62
commit b1ac937
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 8 deletions.
diff --git a/example/DatePicker.md b/example/DatePicker.md
@@ -8,7 +8,7 @@
 <template>
     <div>
         <div class="date-picker-demo-row">
-            <san-date-picker value="{=date=}" />
+            <san-date-picker value="{=date=}" isDisabled="{{isDisabled}}"/>
         </div>
         <div class="date-picker-demo-row">
             <san-date-picker value="{=date=}" disabled />
@@ -18,13 +18,23 @@
 <script>
 import DatePicker from '../src/DatePicker';
 import '../src/DatePicker/DatePicker.styl';
+import moment from 'moment';
 export default {
     components: {
         'san-date-picker': DatePicker
     },
     initData() {
         return {
-            date: ''
+            date: '',
+            isDisabled(date) {
+                let startTime = moment('20180301', 'YYYYMMDD').unix();
+                let endTime = moment('20180306', 'YYYYMMDD').unix();
+                if (date > startTime && date < endTime) {
+                    console.log(123);
+                    return true;
+                }
+                return false;
+            }
         };
     }
 };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "san-mui",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "A Set of SAN Components that Implement Google's Material Design",
   "author": "ecomfe",
   "main": "./lib/index.js",

diff --git a/src/DatePicker/Date.js b/src/DatePicker/Date.js
@@ -24,18 +24,21 @@ export default san.defineComponent({
             let active = this.data.get('active');
             let today = this.data.get('today');
             let part = this.data.get('part');
+            let disabled = this.data.get('disabled');
             return cx(this)
                 .addVariants(part)
                 .addStates({
                     weekend,
                     active,
-                    today
+                    today,
+                    disabled
                 }).build();
         }
     },
 
     click() {
-        this.fire('pick');
+        if (!this.data.get('disabled')) {
+            this.fire('pick');
+        }
     }
-
 });
diff --git a/src/DatePicker/Date.styl b/src/DatePicker/Date.styl
@@ -37,6 +37,14 @@
         .sm-ripple
             background-color: rgb(0, 159, 147)
 
+    &.state-disabled
+        opacity: 0.4
+    &.state-disabled &-cell
+            &:hover
+                color: rgba(0, 0, 0, .8)
+                background-color: #fff
+
+
     &.state-active &-cell
         color: #fff
         background-color: rgb(0, 159, 147)
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
@@ -56,7 +56,7 @@ export default class DatePicker extends Component {
                     on-open="toggleYearPanel" />
                 <san-month-carousel date="{=visualDate=}"/>
                 <san-week />
-                <san-month date="{=visualDate=}" value="{=pickedDate=}" />
+                <san-month date="{=visualDate=}" value="{=pickedDate=}" isDisabled="{{isDisabled}}"/>
                 <san-year
                     san-if="{{yearPanelOpen}}"
                     date="{=pickedDate=}"
@@ -166,6 +166,7 @@ export default class DatePicker extends Component {
 
     }
 
+    attached() {}
 
     openDialog() {
         this.data.set('open', true);

diff --git a/src/DatePicker/Month.js b/src/DatePicker/Month.js
@@ -11,6 +11,10 @@ import {CenterRipple} from '../Ripple';
 
 const FORMAT = 'YYYY-MM-DD';
 
+let empty = function () {
+    return false;
+};
+
 export default class Month extends Component {
 
     static template = `
@@ -22,6 +26,7 @@ export default class Month extends Component {
                 active="{{date.active}}"
                 today="{{date.today}}"
                 part="{{date.part}}"
+                disabled="{{date.disabled}}"
                 on-pick="{{setDate(date.value)}}"/>
         </div>
     `;
@@ -41,12 +46,13 @@ export default class Month extends Component {
             let monthEnd = moment(date).endOf('month');
             let begin = moment(monthBegin).startOf('week');
             let end = moment(monthEnd).endOf('week');
-
+            let isDisabled = this.data.get('isDisabled') || empty;
             let dates = [];
 
             while (begin.isBefore(end)) {
 
                 dates.push({
+                    disabled: isDisabled(begin.unix()),
                     value: begin.date(),
                     weekend: begin.weekday() > 4,
                     active: begin.isSame(value, 'd'),
@@ -71,6 +77,9 @@ export default class Month extends Component {
         };
     }
 
+    attached() {
+    }
+
     setDate(date) {
         this.data.set(
             'value',