diff --git a/.eslintrc.js b/.eslintrc.js
index c789d71f5..164d3fc37 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['plugin:vue/recommended', '@vue/standard'],
-   parserOptions: {
+  parserOptions: {
     parser: "babel-eslint"
   },
   rules: {
@@ -14,5 +14,5 @@ module.exports = {
         }
       }
     ]
-  }
+  },
 }
diff --git a/demo/debugComponents/iconTransitionDebug.vue b/demo/debugComponents/iconTransitionDebug.vue
index 5fbbf38a9..d0ef80baf 100644
--- a/demo/debugComponents/iconTransitionDebug.vue
+++ b/demo/debugComponents/iconTransitionDebug.vue
@@ -46,13 +46,11 @@
 <script>
 import mdCash from 'naive-ui/lib/icons/md-cash'
 import mdContacts from 'naive-ui/lib/icons/md-contacts'
-import iosContacts from 'naive-ui/lib/icons/ios-contacts'
 
 export default {
   components: {
     mdCash,
-    mdContacts,
-    iosContacts
+    mdContacts
   },
   data () {
     return {
diff --git a/demo/documentation/components/cascader/enUS/filter.md b/demo/documentation/components/cascader/enUS/filter.md
new file mode 100644
index 000000000..219082b1f
--- /dev/null
+++ b/demo/documentation/components/cascader/enUS/filter.md
@@ -0,0 +1,111 @@
+# Filter
+```html
+<n-cascader
+  v-model="value1"
+  placeholder="Filterable Multiple (Leaf Only)"
+  :options="options"
+  filterable
+  :filter="filter1"
+  multiple
+  style="margin-bottom:10px;"
+/>
+<n-cascader
+  v-model="value2"
+  placeholder="Filterable Multiple"
+  :options="options"
+  filterable
+  :filter="filter2"
+  multiple
+  :leaf-only="false"
+  style="margin-bottom:10px;"
+/>
+<n-cascader
+  v-model="value3"
+  placeholder="Filterable Single (Leaf Only)"
+  :options="options"
+  filterable
+  :filter="filter3"
+  style="margin-bottom:10px;"
+/>
+<n-cascader
+  v-model="value4"
+  placeholder="Filterable Single"
+  :options="options"
+  filterable
+  :filter="filter4"
+  :leaf-only="false"
+/>
+```
+```js
+function genOptions (depth = 3, iterator = 1, prefix = '') {
+  const length = 12
+  const options = []
+  for (let i = 1; i <= length; ++i) {
+    if (iterator === 1) {
+      options.push({
+        value: `${i}`,
+        label: `${i}`,
+        disabled: i % 5 === 0,
+        children: genOptions(depth, iterator + 1, '' + i)
+      })
+    } else if (iterator === depth) {
+      options.push({
+        value: `${prefix}-${i}`,
+        label: `${prefix}-${i}`,
+        disabled: i % 5 === 0
+
+      })
+    } else {
+      options.push({
+        value: `${prefix}-${i}`,
+        label: `${prefix}-${i}`,
+        disabled: i % 5 === 0,
+        children: genOptions(depth, iterator + 1, `${prefix}-${i}`)
+      })
+    }
+  }
+  return options
+}
+
+export default {
+  data () {
+    return {
+      value1: null,
+      options: genOptions(),
+      value2: null,
+      value3: null,
+      value4: null,
+    }
+  },
+  methods: {
+    filter1 (pattern, option, path) {
+      if (option.label.indexOf(pattern + '-1')>-1) {
+        return true
+      } else {
+        return false
+      }
+    },
+    filter2 (pattern, option, path) {
+      if (path[0].label===pattern) {
+        return true
+      } else {
+        return false
+      }
+    },
+    filter3 (pattern, option, path) {
+      if (option.label.indexOf(pattern + '-1')>-1) {
+        return true
+      } else {
+        return false
+      }
+    },
+    filter4 (pattern, option, path) {
+      if (path[0].label===pattern) {
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/cascader/enUS/index.md b/demo/documentation/components/cascader/enUS/index.md
index c291d5aab..3af324d9b 100644
--- a/demo/documentation/components/cascader/enUS/index.md
+++ b/demo/documentation/components/cascader/enUS/index.md
@@ -13,4 +13,5 @@ single-leaf-only-lazy
 multiple-leaf-only-lazy
 single-lazy
 multiple-lazy
+filter
 ```
\ No newline at end of file
diff --git a/demo/documentation/components/cascader/enUS/multipleLeafOnlySearch.md b/demo/documentation/components/cascader/enUS/multipleLeafOnlySearch.md
index 11a50c0b4..b832d02c9 100644
--- a/demo/documentation/components/cascader/enUS/multipleLeafOnlySearch.md
+++ b/demo/documentation/components/cascader/enUS/multipleLeafOnlySearch.md
@@ -45,6 +45,6 @@ export default {
       value: null,
       options: genOptions()
     }
-  }
+  },
 }
 ```
\ No newline at end of file
diff --git a/demo/documentation/components/datePicker/enUS/date.md b/demo/documentation/components/datePicker/enUS/date.md
index 08cec86c0..76b36c7e3 100644
--- a/demo/documentation/components/datePicker/enUS/date.md
+++ b/demo/documentation/components/datePicker/enUS/date.md
@@ -3,7 +3,9 @@
 <n-date-picker
   v-model="timestamp"
   type="date"
+  :disabledTime="disabledTime"
 />
+{{timestamp}}
 <n-date-picker v-model="timestamp2" type="date" />
 ```
 ```js
@@ -13,6 +15,11 @@ export default {
       timestamp: null,
       timestamp2: 1000000
     }
+  },
+  methods: {
+    disabledTime (current) {
+      return (current >= 1574092800000) && (current < 1574438400000)
+    }
   }
 }
 ```
diff --git a/demo/documentation/components/datePicker/enUS/daterange.md b/demo/documentation/components/datePicker/enUS/daterange.md
index 8765b5447..e56841574 100644
--- a/demo/documentation/components/datePicker/enUS/daterange.md
+++ b/demo/documentation/components/datePicker/enUS/daterange.md
@@ -3,6 +3,7 @@
 <n-date-picker
   v-model="range1"
   type="daterange"
+  :disabledTime="disabledTime"
 />
 <n-date-picker
   v-model="range2"
@@ -16,6 +17,11 @@ export default {
       range1: null,
       range2: [1562774466000, 1567180866000]
     };
+  },
+  methods: {
+    disabledTime (current) {
+      return (current >= 1574092800000) && (current < 1576771200000)
+    }
   }
 }
 ```
diff --git a/demo/documentation/components/datePicker/enUS/datetime.md b/demo/documentation/components/datePicker/enUS/datetime.md
index fc9f814a5..8631a5de6 100644
--- a/demo/documentation/components/datePicker/enUS/datetime.md
+++ b/demo/documentation/components/datePicker/enUS/datetime.md
@@ -3,6 +3,7 @@
 <n-date-picker
   v-model="timestamp"
   type="datetime"
+  :disabledTime= "disabledTime"
 />
 <n-date-picker v-model="timestamp2" type="datetime" />
 ```
@@ -13,6 +14,11 @@ export default {
       timestamp: null,
       timestamp2: 1000000
     }
+  },
+  methods: {
+    disabledTime (current) {
+      return current > 1573552182000 && current < 1573811382000
+    }
   }
 }
 ```
diff --git a/demo/documentation/components/datePicker/enUS/disabledTime.md b/demo/documentation/components/datePicker/enUS/disabledTime.md
new file mode 100644
index 000000000..8294022e7
--- /dev/null
+++ b/demo/documentation/components/datePicker/enUS/disabledTime.md
@@ -0,0 +1,98 @@
+# Disabled Time
+```html
+<n-date-picker
+  v-model="timestamp1"
+  type="date"
+  :date-disabled = "dateDisabled"
+/>
+<n-date-picker
+  v-model="timestamp2"
+  type="datetime"
+  :date-disabled = "dateDisabled"
+  :timeDisabled= "timeDisabled"
+/>
+<n-date-picker
+  v-model="timestamp3"
+  type="daterange"
+  :date-disabled = "dateRangeDisabled"
+/>
+<n-date-picker
+  v-model="timestamp4"
+  type="datetimerange"
+  :date-disabled = "dateRangeDisabled"
+  :time-disabled= "timeRangeDisabled"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      timestamp1: 1576339200000,
+      timestamp2: null,
+      timestamp3: null,
+      timestamp4: null,
+    }
+  },
+  methods: {
+    dateDisabled (current) {
+      return current >= 1576339200000 && current <= 1576425600000
+      // Tue Nov 12 2019 17:49:42 GMT+0800 (China Standard Time) -
+      // Fri Nov 15 2019 17:49:42 GMT+0800 (China Standard Time)
+    },
+    timeDisabled (current) {
+      return {
+        hourDisabled: (hour) => {
+          if (current === 1576512000000) {
+            return hour > 1 && hour <= 19
+          } else {
+            return false
+          }
+        },
+        minuteDisabled: (minute, selectedHour) => {
+          if (current === 1576512000000 && selectedHour === 22) {
+            return minute >= 20 && minute <= 30
+          } else {
+            return false
+          }
+        },
+        secondDisabled: (second, selectedMinute, selectedHour) => {
+          if (current === 1576512000000 && selectedHour === 12 && selectedMinute >= 40 && selectedMinute <= 50) {
+            return second >= 20 && second <= 30
+          } else {
+            return false
+          }
+        },
+      }
+    },
+    dateRangeDisabled (current) {
+      return current >= 1576339200000 && current <= 1576425600000
+    },
+    timeRangeDisabled (current, type) {
+      if (type === 'start') {
+        return {
+          hourDisabled: (hour) => {
+            if (current[0] === 1576512000000) {
+              return hour > 1 && hour <= 19
+            }
+          },
+          minuteDisabled: (minute, selectedHour) => {
+            if (current[0] === 1576512000000 && selectedHour === 20) {
+              return minute >= 20 && minute <= 30
+            }
+          },
+          secondDisabled: (second, selectedMinute, selectedHour) => {
+            if (current[0] === 1576512000000 && selectedHour === 12 && selectedMinute >= 40 && selectedMinute <= 50) {
+              return second >= 20 && second <= 30
+            }
+          },
+        }
+      }
+    },
+  },
+}
+```
+```css
+.n-date-picker {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/datePicker/enUS/index.md b/demo/documentation/components/datePicker/enUS/index.md
index 3e268eb95..27eb984f5 100644
--- a/demo/documentation/components/datePicker/enUS/index.md
+++ b/demo/documentation/components/datePicker/enUS/index.md
@@ -5,6 +5,7 @@ datetime
 daterange
 datetimerange
 disabled
+disabledTime
 actions
 events
 ```
\ No newline at end of file
diff --git a/demo/documentation/components/menu/enUS/basic.md b/demo/documentation/components/menu/enUS/basic.md
index 186972126..4f242dc69 100644
--- a/demo/documentation/components/menu/enUS/basic.md
+++ b/demo/documentation/components/menu/enUS/basic.md
@@ -1,6 +1,6 @@
 # Basic
 ```html
-<div style="width:500px;background:red;">
+<div style="width:500px">
   <n-menu :title="'Test'" 
     v-model="selected" 
     :defaultOpenNames="initOpenKeys"
diff --git a/demo/documentation/components/timePicker/enUS/basic.md b/demo/documentation/components/timePicker/enUS/basic.md
index 96b08635c..9d9a97982 100644
--- a/demo/documentation/components/timePicker/enUS/basic.md
+++ b/demo/documentation/components/timePicker/enUS/basic.md
@@ -2,6 +2,9 @@
 ```html
 <n-time-picker
   v-model="time0"
+  :disabledHours="disabledHours"
+  :disabledMinutes="disabledMinutes"
+  :disabledSeconds="disabledSeconds"
 />
 <n-time-picker v-model="time1" />
 ```
@@ -12,6 +15,21 @@ export default {
       time0: null,
       time1: 1563937380000
     }
+  },
+  methods: {
+    disabledHours (hour) {
+      return hour>13 && hour<16
+    },
+    disabledMinutes (minute, selectedHour) {
+      if(Number(selectedHour) === 17) {
+        return minute > 13 &&  minute < 40
+      }
+    },
+    disabledSeconds (second, selectedHour, selectedMinute) {
+       if(Number(selectedHour) === 17 && Number(selectedMinute) === 10)  {
+        return second > 13 &&  second < 40
+      }
+    }
   }
 }
 ```
diff --git a/demo/documentation/components/timePicker/enUS/disabledTime.md b/demo/documentation/components/timePicker/enUS/disabledTime.md
new file mode 100644
index 000000000..2182426ba
--- /dev/null
+++ b/demo/documentation/components/timePicker/enUS/disabledTime.md
@@ -0,0 +1,44 @@
+# Disabled Time
+```html
+<n-time-picker
+  v-model="time0"
+  :hourDisabled="disabledHours"
+  :minuteDisabled="disabledMinutes"
+  :secondDisabled="disabledSeconds"
+/>
+
+```
+```js
+export default {
+  data () {
+    return {
+      time0: null,
+      time1: 1563937380000,
+    }
+  },
+  methods: {
+    disabledHours (hour) {
+      return hour > 13 && hour < 16
+    },
+    disabledMinutes (minute, selectedHour) {
+      if (Number(selectedHour) === 17) {
+        return minute >= 0 && minute < 9
+      } else {
+        return false
+      }
+    },
+    disabledSeconds (second, selectedMinute, selectedHour) {
+      if (Number(selectedHour) === 17 && Number(selectedMinute) === 10) {
+        return second > 13 && second < 40
+      } else {
+        return false
+      }
+    },
+  },
+}
+```
+```css
+.n-time-picker {
+  margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/timePicker/enUS/index.md b/demo/documentation/components/timePicker/enUS/index.md
index 1f943f044..2bb5749a1 100644
--- a/demo/documentation/components/timePicker/enUS/index.md
+++ b/demo/documentation/components/timePicker/enUS/index.md
@@ -1,4 +1,5 @@
 # Time Picker
 ```demo
 basic
+disabledTime
 ```
\ No newline at end of file
diff --git a/package.json b/package.json
index 6719baf08..d63c91bb0 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "dev": "cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.dev.js",
     "serve": "npm run dev",
     "lint": "eslint packages/**/*.{js,vue} test/**/*.{js,vue} build/**/*.{js,vue} demo/**/*.{js,vue} && stylelint \"styles/**/*.scss\"",
-    "lint-style": "stylelint  \"styles/**/*.scss\"",
+    "lint-style": "stylelint \"styles/**/*.scss\"  --fix",
     "test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js",
     "test-cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage",
     "test-release": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.release.js",
diff --git a/packages/common/Cascader/src/Cascader.vue b/packages/common/Cascader/src/Cascader.vue
index 38184aa93..a6308344e 100644
--- a/packages/common/Cascader/src/Cascader.vue
+++ b/packages/common/Cascader/src/Cascader.vue
@@ -62,6 +62,7 @@
             :enable-all-options="enableAllOptions"
             :pattern="pattern"
             :filterable="filterable"
+            :filter="filter"
             :expand-trigger="expandTrigger"
             :active-id.sync="activeId"
             :lazy="lazy"
@@ -163,6 +164,10 @@ export default {
     splitor: {
       type: String,
       default: ' / '
+    },
+    filter: {
+      type: [String, Function],
+      default: null
     }
   },
   data () {
diff --git a/packages/common/Cascader/src/CascaderAdapter.vue b/packages/common/Cascader/src/CascaderAdapter.vue
index a4a695c3e..543193045 100644
--- a/packages/common/Cascader/src/CascaderAdapter.vue
+++ b/packages/common/Cascader/src/CascaderAdapter.vue
@@ -58,6 +58,10 @@ export default {
     onLoad: {
       type: Function,
       default: () => {}
+    },
+    filter: {
+      type: Function,
+      default: null
     }
   },
   data () {
diff --git a/packages/common/Cascader/src/CascaderMenu.vue b/packages/common/Cascader/src/CascaderMenu.vue
index a5b78cff9..8ef46d3c7 100644
--- a/packages/common/Cascader/src/CascaderMenu.vue
+++ b/packages/common/Cascader/src/CascaderMenu.vue
@@ -134,6 +134,10 @@ export default {
     onLoad: {
       type: Function,
       default: () => {}
+    },
+    filter: {
+      type: [String, Function],
+      default: null
     }
   },
   data () {
@@ -154,11 +158,9 @@ export default {
       return this.expandTrigger === 'click'
     },
     linkedCascaderOptions () {
-      // console.log('linkedCascaderOptions called')
       return linkedCascaderOptions(this.options, this.type)
     },
     menuOptions () {
-      // console.log('menuOptions called')
       return menuOptions(this.linkedCascaderOptions, this.value, this.type)
     },
     menuModel () {
@@ -193,9 +195,21 @@ export default {
       const filteredSelectOptions = []
       const type = this.type
       traverseWithCallback(this.menuOptions, option => {
-        if (Array.isArray(option.path) && option.path.some(
-          label => ~label.indexOf(this.pattern)
-        )) {
+        let flag = false
+        if (this.filter && option.label) {
+          let path = option.path.map((item) => {
+            return {
+              label: item,
+              value: item
+            }
+          })
+          flag = this.filter(this.pattern, { label: option.label, value: option.value }, path)
+        } else {
+          flag = option.path.some(
+            label => ~label.indexOf(this.pattern)
+          )
+        }
+        if (Array.isArray(option.path) && flag) {
           if (type === 'multiple' || type === 'single') {
             // console.log()
             if (option.isLeaf) {
@@ -351,9 +365,9 @@ export default {
       this.$nextTick().then(() => {
         this.typeIsSelect = typeisSelect
         if (typeisSelect) {
-          const el = this.$refs.selectMenu.$el
+          const element = this.$refs.selectMenu.$el
           this.$parent.updatePosition(
-            el,
+            element,
             (el, activatorRect) => {
               el.style.minWidth = activatorRect.width + 'px'
             },
@@ -396,15 +410,15 @@ export default {
           this.$refs.mask.showOnce(`Not all child nodes of "${option.label}" have been loaded`)
           return
         }
-        const traverseMultiple = option => {
-          if (!option || option.disabled) return
-          if (Array.isArray(option.children)) {
-            for (const child of option.children) {
+        const traverseMultiple = item => {
+          if (!item || item.disabled) return
+          if (Array.isArray(item.children)) {
+            for (const child of item.children) {
               traverseMultiple(child)
             }
           }
-          if (!option.children) {
-            newValues.push(option.value)
+          if (!item.children) {
+            newValues.push(item.value)
           }
         }
         traverseMultiple(option)
diff --git a/packages/common/DatePicker/src/main.vue b/packages/common/DatePicker/src/main.vue
index d17dc69bf..104ed9eed 100644
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@@ -5,7 +5,8 @@
     :class="{
       [`n-date-picker--${size}-size`]: true,
       'n-date-picker--disabled': disabled,
-      'n-date-picker--range': isRange
+      'n-date-picker--range': isRange,
+      'n-date-picker--error': isErrorValue
     }"
   >
     <n-input
@@ -33,7 +34,6 @@
       v-else
       ref="input"
       v-model="displayTime"
-      class="n-date-picker__input"
       :force-focus="active"
       :disabled="disabled"
       :lazy-focus="true"
@@ -68,9 +68,12 @@
           :active="active"
           :actions="actions"
           :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
+          :time-disabled="timeDisabled"
           @blur="handlePanelBlur"
           @input="handlePanelInput"
           @close="closeCalendar"
+          @check-value="checkValue"
         />
         <date-panel
           v-else-if="type === 'date'"
@@ -79,9 +82,11 @@
           :active="active"
           :actions="actions"
           :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
           @input="handlePanelInput"
           @blur="handlePanelBlur"
           @close="closeCalendar"
+          @check-value="checkValue"
         />
         <daterange-panel
           v-else-if="type === 'daterange'"
@@ -90,9 +95,11 @@
           :active="active"
           :actions="actions"
           :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
           @input="handleRangePanelInput"
           @blur="handlePanelBlur"
           @close="closeCalendar"
+          @check-value="checkValue"
         />
         <datetimerange-panel
           v-else-if="type === 'datetimerange'"
@@ -101,9 +108,12 @@
           :active="active"
           :actions="actions"
           :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
+          :time-disabled="timeDisabled"
           @input="handleRangePanelInput"
           @close="closeCalendar"
           @blur="handlePanelBlur"
+          @check-value="checkValue"
         />
       </div>
     </div>
@@ -230,6 +240,30 @@ export default {
     actions: {
       type: Array,
       default: undefined
+    },
+    dateDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    timeDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    rangeTimeDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    disabledTime: {
+      type: Function,
+      default: () => {
+        return false
+      }
     }
   },
   data () {
@@ -237,7 +271,8 @@ export default {
       displayTime: '',
       displayStartTime: '',
       displayEndTime: '',
-      active: false
+      active: false,
+      isErrorValue: false
     }
   },
   computed: {
@@ -392,15 +427,12 @@ export default {
      * Input
      */
     handleTimeInput (v) {
-      console.log('handle input before strict parse')
       const newSelectedDateTime = strictParse(this.displayTime, this.computedFormat, new Date())
-      console.log('handle input', this.displayTime, this.computedFormat, newSelectedDateTime)
-      console.log('handle input new time', newSelectedDateTime, typeof newSelectedDateTime)
       if (isValid(newSelectedDateTime)) {
         this.$emit('input', getTime(newSelectedDateTime))
       }
     },
-    handleRangeInput (v) {
+    handleRangeInput (v, isErrorValue) {
       // const v = e.target.value
       if (v === null) v = [null, null]
       const [startTime, endTime] = v
@@ -414,14 +446,12 @@ export default {
       }
       this.displayStartTime = startTime
       this.displayEndTime = endTime
-      // console.log('handleRangeInput', v, newStartTime, newEndTime)
     },
     /**
      * Click
      */
     handleActivatorClick (e) {
       if (this.disabled) return
-      // console.log('handleActivatorClick')
       if (this.active) {
         e.stopPropagation()
       } else {
@@ -502,6 +532,9 @@ export default {
       }
       this.$emit('input', [startTime, endTime])
       this.refresh([startTime, endTime])
+    },
+    checkValue (isErrorValue) {
+      this.isErrorValue = isErrorValue
     }
   }
 }
diff --git a/packages/common/DatePicker/src/panel/date.vue b/packages/common/DatePicker/src/panel/date.vue
index 64366265f..0accbd306 100644
--- a/packages/common/DatePicker/src/panel/date.vue
+++ b/packages/common/DatePicker/src/panel/date.vue
@@ -59,7 +59,8 @@
             'n-date-picker-panel-dates__date--current': dateItem.isCurrentDate,
             'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
             'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
-            'n-date-picker-panel-dates__date--no-transition': noTransition
+            'n-date-picker-panel-dates__date--no-transition': noTransition,
+            'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
           }"
           @click="handleDateClick(dateItem)"
         >
@@ -88,6 +89,10 @@
           round
           auto-text-color
           type="primary"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorTime || isErrorDate
+          }"
           @click="handleConfirmClick"
         >
           Confirm
diff --git a/packages/common/DatePicker/src/panel/daterange.vue b/packages/common/DatePicker/src/panel/daterange.vue
index 52fe92581..a13973243 100644
--- a/packages/common/DatePicker/src/panel/daterange.vue
+++ b/packages/common/DatePicker/src/panel/daterange.vue
@@ -65,7 +65,8 @@
               'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
               'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
               'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
             }"
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
@@ -130,7 +131,8 @@
               'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
               'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
               'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
             }"
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
@@ -161,6 +163,10 @@
           round
           auto-text-color
           type="primary"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorDateTime
+          }"
           @click="handleConfirmClick"
         >
           Confirm
diff --git a/packages/common/DatePicker/src/panel/datetime.vue b/packages/common/DatePicker/src/panel/datetime.vue
index 1d24ff8ab..0b8c1883f 100644
--- a/packages/common/DatePicker/src/panel/datetime.vue
+++ b/packages/common/DatePicker/src/panel/datetime.vue
@@ -14,7 +14,9 @@
       >
         <n-input
           v-model="displayDateString"
-          class="n-date-picker-panel-dates__date-input"
+          :class="{
+            'n-input--error': isErrorDate
+          }"
           placeholder="Select date"
           @blur="handleDateInputBlur"
           @input="handleDateInput"
@@ -25,6 +27,9 @@
           class="n-date-picker-panel__time-input"
           :value="value"
           stop-selector-bubble
+          :hour-disabled="hourDisabled"
+          :minute-disabled="minuteDisabled"
+          :second-disabled="secondDisabled"
           @input="handleTimePickerInput"
         />
       </div>
@@ -76,7 +81,8 @@
             'n-date-picker-panel-dates__date--current': dateItem.isCurrentDate,
             'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
             'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
-            'n-date-picker-panel-dates__date--no-transition': noTransition
+            'n-date-picker-panel-dates__date--no-transition': noTransition,
+            'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
           }"
           @click="handleDateClick(dateItem)"
         >
@@ -105,6 +111,10 @@
           round
           auto-text-color
           type="primary"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorTime || isErrorDate
+          }"
           @click="handleConfirmClick"
         >
           Confirm
@@ -155,6 +165,17 @@ export default {
       detaValidateFormat: DATE_VALIDATE_FORMAT
     }
   },
+  watch: {
+    active () {
+      if (this.active) {
+        this.initialValue = this.value
+      } else {
+        if (this.isErrorTime || this.isErrorDate) {
+          this.$emit('input', this.initialValue)
+        }
+      }
+    }
+  },
   methods: {
     adjustValue (datetime) {
       return startOfSecond(datetime)
diff --git a/packages/common/DatePicker/src/panel/datetimerange.vue b/packages/common/DatePicker/src/panel/datetimerange.vue
index 7ec9d3549..85764196c 100644
--- a/packages/common/DatePicker/src/panel/datetimerange.vue
+++ b/packages/common/DatePicker/src/panel/datetimerange.vue
@@ -25,6 +25,9 @@
           position-mode="absolute"
           class="n-date-picker-panel__time-input"
           :value="startTimeValue"
+          :hour-disabled="isStartHourDisabled(currentDate)"
+          :minute-disabled="isStartMinuteDisabled(currentDate)"
+          :second-disabled="isStartSecondDisabled(currentDate)"
           stop-selector-bubble
           @input="handleStartTimePickerInput"
         />
@@ -45,6 +48,10 @@
           position-mode="absolute"
           class="n-date-picker-panel__time-input"
           :value="endTimeValue"
+          :hour-disabled="isEndHourDisabled(currentDate)"
+          :minute-disabled="isEndMinuteDisabled(currentDate)"
+          :second-disabled="isEndSecondDisabled(currentDate)"
+          :is-error-val="isErrorEndTime"
           stop-selector-bubble
           @input="handleEndTimePickerInput"
         />
@@ -112,7 +119,8 @@
               'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
               'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
               'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
             }"
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
@@ -185,7 +193,8 @@
               'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
               'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
               'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
             }"
             @click="handleDateClick(dateItem)"
             @mouseenter="handleDateMouseEnter(dateItem)"
@@ -212,6 +221,10 @@
         </n-button>
         <n-button
           v-if="actions.includes('confirm')"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorDateTime
+          }"
           size="tiny"
           round
           auto-text-color
@@ -280,7 +293,10 @@ export default {
   watch: {
     active (newActive) {
       if (newActive) {
+        this.initialValue = this.value
         this.syncCalendarTimeWithValue(this.value)
+      } else if (this.isErrorDateTime) {
+        this.$emit('input', this.initialTime)
       }
     },
     valueAsDateArray (newValue) {
diff --git a/packages/common/DatePicker/src/panel/dualCalendarMixin.js b/packages/common/DatePicker/src/panel/dualCalendarMixin.js
index 1738b73e4..796312947 100644
--- a/packages/common/DatePicker/src/panel/dualCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/dualCalendarMixin.js
@@ -6,6 +6,8 @@ import getYear from 'date-fns/getYear'
 import getMonth from 'date-fns/getMonth'
 import startOfMonth from 'date-fns/startOfMonth'
 import isValid from 'date-fns/isValid'
+import startOfHour from 'date-fns/startOfHour'
+import setHours from 'date-fns/setHours'
 import { dateArray } from '../../../../utils/dateUtils'
 
 import commonCalendarMixin from './commonCalendarMixin'
@@ -43,6 +45,22 @@ export default {
     actions: {
       type: Array,
       default: () => ['clear', 'confirm']
+    },
+    dateDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    timeDisabled: {
+      type: Function,
+      default: () => {
+        return {
+          hourDisabled: () => false,
+          minuteDisabled: () => false,
+          secondDisabled: () => false
+        }
+      }
     }
   },
   data () {
@@ -56,7 +74,19 @@ export default {
       isSelecting: false,
       startDateTime: null,
       memorizedStartDateTime: null,
-      endDateTime: null
+      endDateTime: null,
+      initialTime: null
+      // startHourDisabled: () => true,
+      // startMinuteDisabled: () => true,
+      // startSecondDisabled: () => true,
+      // endHourDisabled: () => true,
+      // endMinuteDisabled: () => true,
+      // endSecondDisabled: () => true
+      // isErrorStartTime: false,
+      // isErrorEndTime: false,
+      // isErrorStartDate: false,
+      // isErrorEndDate: false
+      // currentDate: []
     }
   },
   computed: {
@@ -105,6 +135,109 @@ export default {
       if (isValid(startMoment)) {
         return [startMoment, endMoment]
       } else return null
+    },
+    isStartHourDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'start')
+        const startHourDisabled = (timeDisabled && timeDisabled.hourDisabled) || function () { return false }
+        return function (hour) {
+          return startHourDisabled(hour)
+        }
+      }
+    },
+    isStartMinuteDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'start')
+        const startMinuteDisabled = (timeDisabled && timeDisabled.minuteDisabled) || function () { return false }
+        return function (minute, selectedHour) {
+          return startMinuteDisabled(minute, selectedHour)
+        }
+      }
+    },
+    isStartSecondDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'start')
+        const startSecondDisabled = (timeDisabled && timeDisabled.secondDisabled) || function () { return false }
+        return function (second, selectedMinute, selectedHour) {
+          return startSecondDisabled(second, selectedMinute, selectedHour)
+        }
+      }
+    },
+    isEndHourDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'end')
+        const endHourDisabled = (timeDisabled && timeDisabled.hourDisabled) || function () { return false }
+        return function (hour) {
+          return endHourDisabled(hour)
+        }
+      }
+    },
+    isEndMinuteDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'end')
+        const endMinuteDisabled = (timeDisabled && timeDisabled.minuteDisabled) || function () { return false }
+        return function (minute, selectedHour) {
+          return endMinuteDisabled(minute, selectedHour)
+        }
+      }
+    },
+    isEndSecondDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'end')
+        const endSecondDisabled = (timeDisabled && timeDisabled.secondDisabled) || function () { return false }
+        return function (second, selectedMinute, selectedHour) {
+          return endSecondDisabled(second, selectedMinute, selectedHour)
+        }
+      }
+    },
+    currentDate () {
+      if (!this.value) {
+        return [null, null]
+      }
+      let date = []
+      this.value.forEach((item, index) => {
+        if (item) {
+          date[index] = setHours(startOfHour(new Date(item)), 0).getTime()
+        }
+      })
+      return date
+    },
+    isErrorDateTime () {
+      if (!this.value) {
+        return false
+      }
+      return this.isErrorStartTime || this.isErrorEndTime ||
+      this.isErrorStartDate || this.isErrorEndDate
+    },
+    isErrorStartTime () {
+      if (!this.value) {
+        return false
+      }
+      const startDateTime = new Date(this.value[0])
+      return this.isStartHourDisabled(this.value)(startDateTime.getHours()) ||
+          this.isStartMinuteDisabled(this.value)(startDateTime.getMinutes(), startDateTime.getHours()) ||
+          this.isStartSecondDisabled(this.value)(startDateTime.getSeconds(), startDateTime.getMinutes(), startDateTime.getHours())
+    },
+    isErrorEndTime () {
+      if (!this.value) {
+        return false
+      }
+      let endDateTime = new Date(this.value[1])
+      return this.isEndHourDisabled(this.value)(endDateTime.getHours()) ||
+          this.isEndMinuteDisabled(this.value)(endDateTime.getMinutes(), endDateTime.getHours()) ||
+          this.isEndSecondDisabled(this.value)(endDateTime.getSeconds(), endDateTime.getMinutes(), endDateTime.getHours())
+    },
+    isErrorStartDate () {
+      if (!this.value) {
+        return false
+      }
+      return this.dateDisabled(setHours(startOfHour(new Date(this.value[0])), 0).getTime())
+    },
+    isErrorEndDate () {
+      if (!this.value) {
+        return false
+      }
+      return this.dateDisabled(setHours(startOfHour(new Date(this.value[1])), 0).getTime())
     }
   },
   watch: {
@@ -127,6 +260,14 @@ export default {
           this.banTransitionOneTick()
         }
       }
+    },
+    isErrorDateTime (val) {
+      this.$emit('check-value', this.isErrorDateTime)
+    }
+  },
+  mounted () {
+    if (this.isErrorDateTime) {
+      this.$emit('check-value', this.isErrorDateTime)
     }
   },
   methods: {
@@ -144,7 +285,6 @@ export default {
       this.closeCalendar()
     },
     syncCalendarTimeWithValue (value) {
-      // console.log('syncCalendarTimeWithValue', value)
       if (value === null) return
       const [startMoment, endMoment] = value
       this.startCalendarDateTime = new Date(startMoment)
@@ -155,6 +295,9 @@ export default {
       }
     },
     handleDateClick (dateItem) {
+      if (this.dateDisabled(dateItem.timestamp)) {
+        return
+      }
       if (!this.isSelecting) {
         this.isSelecting = true
         this.memorizedStartDateTime = dateItem.timestamp
@@ -179,6 +322,9 @@ export default {
       }
     },
     handleConfirmClick () {
+      if (this.isErrorDateTime) {
+        return
+      }
       this.$emit('confirm')
       this.closeCalendar()
     },
diff --git a/packages/common/DatePicker/src/panel/uniCalendarMixin.js b/packages/common/DatePicker/src/panel/uniCalendarMixin.js
index efd51fd4b..941eb3a15 100644
--- a/packages/common/DatePicker/src/panel/uniCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/uniCalendarMixin.js
@@ -9,6 +9,8 @@ import getYear from 'date-fns/getYear'
 import getMonth from 'date-fns/getMonth'
 import getDate from 'date-fns/getDate'
 import isValid from 'date-fns/isValid'
+import startOfHour from 'date-fns/startOfHour'
+import setHours from 'date-fns/setHours'
 import { dateArray, strictParse } from '../../../../utils/dateUtils'
 
 export default {
@@ -34,13 +36,30 @@ export default {
     actions: {
       type: Array,
       default: () => ['now', 'confirm']
+    },
+    dateDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    timeDisabled: {
+      type: Function,
+      default: () => {
+        return {
+          hourDisabled: () => false,
+          minuteDisabled: () => false,
+          secondDisabled: () => false
+        }
+      }
     }
   },
   data () {
     return {
       displayDateString: '',
       calendarDateTime: new Date(), // moment(),
-      currentDateTime: new Date() // moment()
+      currentDateTime: new Date(), // moment()
+      selectedDate: null
     }
   },
   computed: {
@@ -67,6 +86,42 @@ export default {
       // } else {
       //   return null
       // }
+    },
+    isErrorDate () {
+      if (!this.value) {
+        return false
+      }
+      return this.dateDisabled(setHours(startOfHour(new Date(this.value)), 0).getTime())
+    },
+    isErrorTime () {
+      if (!this.value) {
+        return false
+      }
+      const time = new Date(this.value)
+      const hour = time.getHours()
+      const minute = time.getMinutes()
+      const second = time.getMinutes()
+      return this.hourDisabled(hour) ||
+          this.minuteDisabled(minute, hour) ||
+          this.secondDisabled(second, minute, hour)
+    },
+    isErrorDateTime () {
+      return this.isErrorDate || this.isErrorTime
+    },
+    currentDate () {
+      if (!this.value) {
+        return null
+      }
+      return setHours(startOfHour(new Date(this.value)), 0).getTime()
+    },
+    hourDisabled () {
+      return this.timeDisabled(this.currentDate).hourDisabled || function () { return false }
+    },
+    minuteDisabled () {
+      return this.timeDisabled(this.currentDate).minuteDisabled || function () { return false }
+    },
+    secondDisabled () {
+      return this.timeDisabled(this.currentDate).secondDisabled || function () { return false }
     }
   },
   watch: {
@@ -88,6 +143,9 @@ export default {
       } else {
         this.displayDateString = ''
       }
+    },
+    isErrorDateTime () {
+      this.$emit('check-value', this.isErrorDateTime)
     }
   },
   created () {
@@ -98,6 +156,11 @@ export default {
       this.displayDateString = ''
     }
   },
+  mounted () {
+    if (this.isErrorDateTime) {
+      this.$emit('check-value', this.isErrorDateTime)
+    }
+  },
   methods: {
     handleClickOutside () {
       this.closeCalendar()
@@ -115,7 +178,6 @@ export default {
     // },
     handleDateInput (value) {
       const date = strictParse(value, this.dateFormat, new Date())// moment(value, this.dateFormat, true)
-      // console.log('handle date input', value)
       if (isValid(date)) {
         if (!this.valueAsDateTime) {
           this.$emit('input', getTime(this.adjustValue(new Date())))
@@ -185,15 +247,18 @@ export default {
     setSelectedDateTimeToNow () {
       this.$emit('input', getTime(this.adjustValue(new Date())))
       this.calendarDateTime = new Date() // moment()
+      // this.checkDate(getTime(this.adjustValue(new Date())))
     },
     handleDateClick (dateItem) {
-      // console.log(dateItem)
+      if (this.dateDisabled(dateItem.timestamp)) {
+        return
+      }
       let newSelectedDateTime = new Date()
       if (this.valueAsDateTime !== null) {
         newSelectedDateTime = this.valueAsDateTime
       }
       newSelectedDateTime = set(newSelectedDateTime, dateItem.dateObject)
-      // console.log(newSelectedDateTime.format('YYYY MM DD'))
+      this.selectedDate = dateItem.dateObject
       this.$emit('input', getTime(this.adjustValue(newSelectedDateTime)))
     },
     /**
@@ -211,6 +276,9 @@ export default {
       this.displayDateString = format(time, this.dateFormat)
     },
     handleConfirmClick () {
+      if (this.isErrorDate || this.isErrorTime) {
+        return
+      }
       this.$emit('confirm')
       this.closeCalendar()
     },
diff --git a/packages/common/Form/src/FormItem.vue b/packages/common/Form/src/FormItem.vue
index a483da25f..b2855bc7d 100644
--- a/packages/common/Form/src/FormItem.vue
+++ b/packages/common/Form/src/FormItem.vue
@@ -334,7 +334,7 @@ export default {
     },
     addValidationEventListeners () {
       const rules = this.synthesizedRules
-      if (rules.length >= 0) {
+      if (rules.length > 0) {
         this.$on('blur', this.handleContentBlur)
         this.$on('input', this.handleContentInput)
         this.$on('focus', this.handleContentFocus)
diff --git a/packages/common/Log/src/Log.vue b/packages/common/Log/src/Log.vue
index 7607cf317..1d4f16495 100644
--- a/packages/common/Log/src/Log.vue
+++ b/packages/common/Log/src/Log.vue
@@ -155,12 +155,12 @@ export default {
       }
     },
     scrollToTop (dismissEvent = false) {
-      this.scrollTo(dismissEvent, 'top')
+      this.scrollTo('top', dismissEvent)
     },
     scrollToBottom (dismissEvent = false) {
-      this.scrollTo(dismissEvent, 'bottom')
+      this.scrollTo('bottom', dismissEvent)
     },
-    scrollTo (dismissEvent = false, to) {
+    scrollTo (to, dismissEvent = false) {
       if (dismissEvent) {
         this.dismissEvent = true
       }
diff --git a/packages/common/Menu/src/menuItem.vue b/packages/common/Menu/src/menuItem.vue
index c9edf2890..fc196cc8c 100644
--- a/packages/common/Menu/src/menuItem.vue
+++ b/packages/common/Menu/src/menuItem.vue
@@ -6,13 +6,13 @@
       'n-menu-item--selected': isSelected,
       'n-menu-item--disabled': isDisabled
     }"
-    @click="clickCallback"
+    @click="handleClick"
   >
     <span
       v-if="hasIcon"
       class="n-menu-title-icon"
     />
-    <span>{{ title }}{{ isDisabled }}</span>
+    <span>{{ title }}</span>
   </li>
 </template>
 <script>
@@ -73,8 +73,8 @@ export default {
     }
   },
   methods: {
-    clickCallback () {
-      if (!this.disabled) {
+    handleClick () {
+      if (!this.isDisabled) {
         this.NMenu.changeSelect(this.name)
         this.$emit('click', this)
       }
diff --git a/packages/common/Menu/src/subMenu.vue b/packages/common/Menu/src/subMenu.vue
index c12fe9aad..ff04249be 100644
--- a/packages/common/Menu/src/subMenu.vue
+++ b/packages/common/Menu/src/subMenu.vue
@@ -6,12 +6,12 @@
       class="n-sub-menu-header"
       :style="{paddingLeft: paddingLeft + 'px'}"
       :class="{
-        'n-sub-menu-header--collapsed': collapsed,
-        'n-sub-menu-header--active': !collapsed,
+        'n-sub-menu-header--collapsed': isCollapsed,
+        'n-sub-menu-header--active': !isCollapsed,
         'n-sub-menu-header--has-icon': hasIcon,
         'n-sub-menu-header--disabled': disabled,
       }"
-      @click="clickCallback"
+      @click="handleClick"
     >
       <span
         v-if="hasIcon"
@@ -20,7 +20,7 @@
       <span>{{ title }}</span>
     </div>
     <fade-in-height-expand-transition>
-      <ul v-if="!collapsed" class="n-sub-menu-content">
+      <ul v-if="!isCollapsed" class="n-sub-menu-content">
         <slot />
       </ul>
     </fade-in-height-expand-transition>
@@ -77,28 +77,32 @@ export default {
       }
       return padding
     },
-    collapsed: {
-      get: function () {
-        let indexs = this.NMenu.openNames || this.NMenu.defaultOpenNames
-        if (indexs && indexs.includes(this.name)) {
-          this.isCollapsed = false
-        } else {
-          this.isCollapsed = true
-        }
-        return this.isCollapsed
-      },
-      set: function (val) {
-        this.isCollapsed = val
-      }
+    openNames () {
+      return this.NMenu.openNames || this.NMenu.defaultOpenNames
     }
   },
+  watch: {
+    openNames (value) {
+      this.setCollapsed()
+    }
+  },
+  mounted () {
+    this.setCollapsed()
+  },
   methods: {
-    clickCallback () {
+    handleClick () {
       if (!this.disabled) {
-        this.collapsed = !this.collapsed
+        this.isCollapsed = !this.isCollapsed
         this.NMenu.openKeysChangeCallback(this.name)
         this.$emit('click', this)
       }
+    },
+    setCollapsed () {
+      if (this.openNames && this.openNames.includes(this.name)) {
+        this.isCollapsed = false
+      } else {
+        this.isCollapsed = true
+      }
     }
   }
 }
diff --git a/packages/common/Popover/src/main.js b/packages/common/Popover/src/main.js
index 2441af84a..5ec92ce0f 100644
--- a/packages/common/Popover/src/main.js
+++ b/packages/common/Popover/src/main.js
@@ -4,9 +4,9 @@ import NPopoverContent from './PopoverContent'
 import activatorMixin from './activatorMixin'
 import genId from '../../../utils/genId'
 
-function mixin (component, mixin) {
+function mixin (component, mixins) {
   component.mixins = component.mixins || []
-  component.mixins.push(mixin)
+  component.mixins.push(mixins)
   return component
 }
 
diff --git a/packages/common/Select/src/Select.vue b/packages/common/Select/src/Select.vue
index 63c8d8426..d9ef6d003 100644
--- a/packages/common/Select/src/Select.vue
+++ b/packages/common/Select/src/Select.vue
@@ -376,7 +376,7 @@ export default {
         }
         let newValue = []
         if (Array.isArray(this.value)) {
-          const optionValues = new Set(this.synthesizedOptions.map(option => option.value))
+          const optionValues = new Set(this.synthesizedOptions.map(item => item.value))
           newValue = this.value.filter(value => optionValues.has(value) || this.memorizedValueOptionMap.has(value))
         }
         const index = newValue.findIndex(value => value === option.value)
diff --git a/packages/common/Table/Td/src/main.vue b/packages/common/Table/Td/src/main.vue
index 7e1af7b27..329b895c5 100644
--- a/packages/common/Table/Td/src/main.vue
+++ b/packages/common/Table/Td/src/main.vue
@@ -1,6 +1,6 @@
 <template>
   <td>
-    <slot/>
+    <slot />
   </td>
 </template>
 
@@ -10,6 +10,3 @@ export default {
   props: {}
 }
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/common/TimePicker/src/main.vue b/packages/common/TimePicker/src/main.vue
index c95d3e41d..d985a5e06 100644
--- a/packages/common/TimePicker/src/main.vue
+++ b/packages/common/TimePicker/src/main.vue
@@ -3,7 +3,10 @@
     <n-input
       ref="activator"
       v-model="displayTimeString"
-      class="n-date-picker-panel__time-input"
+      class="n-date-picker-panel__time-input n-time-picker-input"
+      :class="{
+        'n-time-picker-input--error': isErrorValue
+      }"
       :force-focus="active"
       placeholder="Select time"
       lazy-focus
@@ -46,8 +49,8 @@
                     :key="hour"
                     class="n-time-picker-selector-time-row__item"
                     :class="{
-                      'n-time-picker-selector-time-row__item--active':
-                        hour === computedHour
+                      'n-time-picker-selector-time-row__item--active': hour === computedHour,
+                      'n-time-picker-selector-time-row__item--disabled': isHourDisabled(hour)
                     }"
                     @click="setHours(hour)"
                   >
@@ -69,8 +72,8 @@
                     :key="minute"
                     class="n-time-picker-selector-time-row__item"
                     :class="{
-                      'n-time-picker-selector-time-row__item--active':
-                        minute === computedMinute
+                      'n-time-picker-selector-time-row__item--active': minute === computedMinute,
+                      'n-time-picker-selector-time-row__item--disabled': isMinuteDisabled(minute)
                     }"
                     @click="setMinutes(minute)"
                   >
@@ -95,8 +98,8 @@
                       'n-time-picker-selector-time-row__item--active':
                         second === computedSecond,
                       'n-time-picker-selector-time-row__item--disabled':
-                        validator &&
-                        !validator(computedHour, computedMinute, second)
+                        isSecondDisabled(second) ||
+                        (validator && !validator(computedHour, computedMinute, second))
                     }"
                     @click="setSeconds(second)"
                   >
@@ -110,7 +113,7 @@
                 </n-scrollbar>
               </div>
             </div>
-            <div class="n-time-picker-selector__actions">
+            <div class="n-time-picker-selector-actions">
               <n-button
                 size="tiny"
                 round
@@ -123,6 +126,10 @@
                 round
                 auto-text-color
                 type="primary"
+                class="n-time-picker-selector-actions__confirm"
+                :class="{
+                  'n-time-picker-selector-actions__confirm--disabled': isErrorVal
+                }"
                 @click="handleConfirmClick"
               >
                 Confirm
@@ -218,6 +225,24 @@ export default {
     validator: {
       type: Function,
       default: null
+    },
+    hourDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    minuteDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    secondDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
     }
   },
   data () {
@@ -225,7 +250,11 @@ export default {
       active: false,
       displayTimeString: this.value === null ? null : format(this.value, this.format),
       ...TIME_CONST,
-      memorizedValue: this.value
+      memorizedValue: this.value,
+      selectedHour: null,
+      selectedMinute: null,
+      selectedSecond: null
+      // isErrorVal: false
     }
   },
   computed: {
@@ -244,6 +273,28 @@ export default {
     computedSecond () {
       if (this.computedTime) return format(this.computedTime, 'ss')
       else return null
+    },
+    isHourDisabled () {
+      let self = this
+      return function (hour) {
+        return self.hourDisabled(Number(hour)) || false
+      }
+    },
+    isMinuteDisabled () {
+      let self = this
+      return function (minute) {
+        return self.minuteDisabled(Number(minute), Number(self.computedHour)) || false
+      }
+    },
+    isSecondDisabled () {
+      let self = this
+      return function (second) {
+        return self.secondDisabled(Number(second), Number(this.computedMinute), Number(self.computedHour)) || false
+      }
+    },
+    isErrorVal () {
+      return this.isHourDisabled(this.computedHour) || this.isMinuteDisabled(this.computedMinute) ||
+    this.isSecondDisabled(this.computedSecond)
     }
   },
   watch: {
@@ -253,8 +304,19 @@ export default {
     },
     value (value, oldValue) {
       this.$emit('change', value, oldValue)
+      // this.checkValue()
+    },
+    active (newVal) {
+      if (!newVal) {
+        if (this.isErrorVal) {
+          this.$emit('input', this.memorizedValue)
+        }
+      }
     }
   },
+  // mounted () {
+  //   this.checkValue()
+  // },
   methods: {
     afterBlur (e) {
       if (this.active) {
@@ -281,25 +343,37 @@ export default {
       }
     },
     setHours (hour) {
+      if (this.isHourDisabled(hour)) {
+        return
+      }
       if (this.value === null) {
-        this.$emit('input', getTime(startOfHour(new Date())))
+        this.$emit('input', getTime(setHours(startOfHour(new Date()), hour)))
       } else {
         this.$emit('input', getTime(setHours(this.value, hour)))
       }
+      this.selectedHour = hour
     },
     setMinutes (minute) {
+      if (this.isMinuteDisabled(minute)) {
+        return
+      }
       if (this.value === null) {
-        this.$emit('input', getTime(startOfMinute(new Date())))
+        this.$emit('input', getTime(setMinutes(startOfMinute(new Date()), minute)))
       } else {
         this.$emit('input', getTime(setMinutes(this.value, minute)))
       }
+      this.selectedMinute = minute
     },
     setSeconds (second) {
+      if (this.isSecondDisabled(second)) {
+        return
+      }
       if (this.value === null) {
-        this.$emit('input', getTime(startOfSecond(new Date())))
+        this.$emit('input', getTime(setSeconds(startOfSecond(new Date()), second)))
       } else {
         this.$emit('input', getTime(setSeconds(this.value, second)))
       }
+      this.selectedSecond = second
     },
     refreshTimeString (time) {
       if (time === undefined) time = this.computedTime
@@ -358,9 +432,7 @@ export default {
     },
     closeTimeSelector (returnFocus = false) {
       this.active = false
-      if (returnFocus) {
-
-      } else {
+      if (!returnFocus) {
         this.$emit('blur', this.value)
       }
     },
@@ -372,6 +444,9 @@ export default {
       this.active = false
     },
     handleConfirmClick () {
+      if (this.isErrorVal) {
+        return
+      }
       this.refreshTimeString()
       this.closeTimeSelector()
     }
diff --git a/packages/deprecated/NimbusFormCard/src/main.vue b/packages/deprecated/NimbusFormCard/src/main.vue
index ff5e13d6c..cbf2f9599 100644
--- a/packages/deprecated/NimbusFormCard/src/main.vue
+++ b/packages/deprecated/NimbusFormCard/src/main.vue
@@ -101,9 +101,9 @@ export default {
         body.appendChild(footerPatch)
         if (timeout) {
           window.setTimeout(() => {
-            const body = this.$refs.body
-            if (body) {
-              body.removeChild(footerPatch)
+            const bodyDom = this.$refs.body
+            if (bodyDom) {
+              bodyDom.removeChild(footerPatch)
             }
           }, timeout)
         }
@@ -122,9 +122,9 @@ export default {
         body.appendChild(headerPatch)
         if (timeout) {
           window.setTimeout(() => {
-            const body = this.$refs.body
-            if (body) {
-              body.removeChild(headerPatch)
+            const bodyDom = this.$refs.body
+            if (bodyDom) {
+              bodyDom.removeChild(headerPatch)
             }
           }, timeout)
         }
diff --git a/packages/mixins/placeable.js b/packages/mixins/placeable.js
index aa58672cd..69055e8f0 100644
--- a/packages/mixins/placeable.js
+++ b/packages/mixins/placeable.js
@@ -268,12 +268,12 @@ export default {
 
       // console.log(this.$refs.contentInner)
       if (this.$refs.contentInner) {
-        let el = this.$refs.contentInner
+        let element = this.$refs.contentInner
         if (this.$refs.contentInner.$el) {
-          el = this.$refs.contentInner.$el
+          element = this.$refs.contentInner.$el
         }
         if (this.widthMode === 'activator') {
-          el.style.minWidth = activatorBoundingClientRect.width + 'px'
+          element.style.minWidth = activatorBoundingClientRect.width + 'px'
         }
       }
       if (el && cb) {
diff --git a/packages/utils/data/menuModel.js b/packages/utils/data/menuModel.js
index 61d75cac9..096736dc0 100644
--- a/packages/utils/data/menuModel.js
+++ b/packages/utils/data/menuModel.js
@@ -146,10 +146,10 @@ function rootedOptions (options) {
  */
 function patchedOptions (options, patches) {
   // console.log('patchedOptions input', options, patches)
-  function traverse (options, depth = 0, parentId = 0) {
-    if (!Array.isArray(options)) return
-    for (let i = 0; i < options.length; ++i) {
-      const option = options[i]
+  function traverse (items, depth = 0, parentId = 0) {
+    if (!Array.isArray(items)) return
+    for (let i = 0; i < items.length; ++i) {
+      const option = items[i]
       const id = `${parentId}_${i + 1}`
       // console.log('iterate on option', id)
       if (!hasChildren(option)) {
@@ -254,13 +254,13 @@ function applyDrop ([sourceNode, targetNode, type]) {
 }
 
 function linkedCascaderOptions (options, type) {
-  const linkedCascaderOptions = options
+  const cascaderOptions = options
   const path = []
-  function traverse (options, parent = null, depth = 0, parentId = 0) {
-    if (!Array.isArray(options)) return
-    const length = options.length
+  function traverse (items, parent = null, depth = 0, parentId = 0) {
+    if (!Array.isArray(items)) return
+    const length = items.length
     for (let i = 0; i < length; ++i) {
-      const option = options[i]
+      const option = items[i]
       if (depth > 0) path.push(option.label)
       /**
        * option.type determine option ui status
@@ -319,16 +319,15 @@ function linkedCascaderOptions (options, type) {
       }
       if (depth > 0) path.pop()
     }
-    markAvailableSiblingIds(options)
-    markFirstAvailableChildId(options)
+    markAvailableSiblingIds(items)
+    markFirstAvailableChildId(items)
   }
-  traverse(linkedCascaderOptions)
-  return linkedCascaderOptions
+  traverse(cascaderOptions)
+  return cascaderOptions
 }
 
-function menuOptions (linkedCascaderOptions, value, type) {
+function menuOptions (cascaderOptions, value, type) {
   const valueSet = new Set(value)
-  const checkedOptions = []
   function traverse (options) {
     if (!Array.isArray(options)) return
     const length = options.length
@@ -349,7 +348,6 @@ function menuOptions (linkedCascaderOptions, value, type) {
           } else {
             option.checked = valueSet.has(option.value)
             if (option.checked) {
-              checkedOptions.push(option)
               option.checkedLeafCount = 1
               if (option.disabled) {
                 option.availableLeafCount = 0
@@ -370,7 +368,6 @@ function menuOptions (linkedCascaderOptions, value, type) {
           option.checkedLeafCount = NaN
         }
         option.checked = valueSet.has(option.value)
-        checkedOptions.push(option)
       } else if (type === 'single' || type === 'single-all-options') {
         if (hasChildren(option)) {
           traverse(option.children)
@@ -379,18 +376,18 @@ function menuOptions (linkedCascaderOptions, value, type) {
       }
     }
   }
-  traverse(linkedCascaderOptions)
+  traverse(cascaderOptions)
   // console.log('menuOptions', linkedCascaderOptions)
-  return linkedCascaderOptions
+  return cascaderOptions
 }
 
 function optionPath (options, optionId) {
   const path = []
   if (optionId === null) return path
   let done = false
-  function traverseOptions (options) {
-    if (!Array.isArray(options) || !options.length) return
-    for (const option of options) {
+  function traverseOptions (items) {
+    if (!Array.isArray(items) || !items.length) return
+    for (const option of items) {
       if (done) return
       path.push(option)
       if (option.id === optionId) {
@@ -429,8 +426,8 @@ function menuModel (options, activeId, trackId, loadingId) {
      */
     if (option.depth === 0) continue
     if (hasChildren(option)) {
-      model.push(option.children.map(option => {
-        return processedOption(option, activeIds, trackId, loadingId)
+      model.push(option.children.map(item => {
+        return processedOption(item, activeIds, trackId, loadingId)
       }))
     }
   }
diff --git a/packages/utils/dom/calcPlacementTransform.js b/packages/utils/dom/calcPlacementTransform.js
index ee3092fae..2a229d74b 100644
--- a/packages/utils/dom/calcPlacementTransform.js
+++ b/packages/utils/dom/calcPlacementTransform.js
@@ -3,7 +3,7 @@ export default function calcPlacementTransform (placement, activatorRect, conten
   let contentTop = null
   let contentRight = null
   let contentBottom = null
-  let suggesetedTransfromOrigin = 'none'
+  let suggesetedTransfromOrigin
   if (placement === 'top-start') {
     contentTop = activatorRect.top - contentRect.height
     contentLeft = activatorRect.left
@@ -29,7 +29,6 @@ export default function calcPlacementTransform (placement, activatorRect, conten
     contentLeft = activatorRect.left - contentRect.width
     suggesetedTransfromOrigin = 'bottom right'
   } else if (placement === 'right-start') {
-    console.log(activatorRect, contentRect)
     const toWindowBottom = window.innerHeight - activatorRect.top - contentRect.height
     const toWindowRight = window.innerWidth - activatorRect.right - contentRect.width
     if (toWindowBottom < 0) {
@@ -59,11 +58,11 @@ export default function calcPlacementTransform (placement, activatorRect, conten
     const toWindowRight = window.innerWidth - activatorRect.left - contentRect.width
     if (contentRect.height > toWindowBottom && activatorRect.top > toWindowBottom) {
       contentBottom = toWindowBottom + activatorRect.height
-      contentTop = null
+      // contentTop = null
       suggesetedTransfromOrigin = 'bottom'
     } else {
       contentTop = activatorRect.top + activatorRect.height
-      contentBottom = null
+      // contentBottom = null
       suggesetedTransfromOrigin = 'top'
     }
     if (toWindowRight < 0) {
diff --git a/styles/AdvancedTable.scss b/styles/AdvancedTable.scss
index e214ea9de..a4283d0b5 100644
--- a/styles/AdvancedTable.scss
+++ b/styles/AdvancedTable.scss
@@ -110,9 +110,6 @@
         &::-webkit-scrollbar-track {
           background: transparent;
         }
-        &::-webkit-scrollbar-thumb {
-          border-radius: 2.5px;
-        }
         &::-webkit-scrollbar-corner {
           background: transparent;
         }
diff --git a/styles/Anchor.scss b/styles/Anchor.scss
index a01a389ab..78e79e24b 100644
--- a/styles/Anchor.scss
+++ b/styles/Anchor.scss
@@ -61,7 +61,7 @@
         display: flex;
         flex-direction: column;
         & > {
-            @include b(anchor-link) {
+          @include b(anchor-link) {
             padding-left: 16px;
           }
         }
@@ -81,7 +81,7 @@
           padding-right: 16px;
           transition: color .3s $default-cubic-bezier;
         }
-        color: map-get($--anchor-link-title-text-color, 'default');;
+        color: map-get($--anchor-link-title-text-color, 'default');
         &:hover, &:focus {
           color: map-get($--anchor-link-title-text-color, 'hover');
         }
diff --git a/styles/BackTop.scss b/styles/BackTop.scss
index 507b16da4..b1a589274 100644
--- a/styles/BackTop.scss
+++ b/styles/BackTop.scss
@@ -13,7 +13,7 @@
     }
     @include e(default-button) {
       @include once {
-        transition: box-shadow .3s $default-cubic-bezier, fill .3s $default-cubic-bezier;;
+        transition: box-shadow .3s $default-cubic-bezier, fill .3s $default-cubic-bezier;
         border-radius: 20px;
         height: 40px;
         width: 40px;
diff --git a/styles/BaseLoading.scss b/styles/BaseLoading.scss
index 8ac5051ed..268050617 100644
--- a/styles/BaseLoading.scss
+++ b/styles/BaseLoading.scss
@@ -1,7 +1,6 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-
 @keyframes n-base-loading-rotate {
   to {
     transform: rotate(1turn)
diff --git a/styles/BasePicker.scss b/styles/BasePicker.scss
index 7bee3d4fb..e3fab66d7 100644
--- a/styles/BasePicker.scss
+++ b/styles/BasePicker.scss
@@ -296,6 +296,4 @@
       }
     }
   }
-}
-
-
+}
\ No newline at end of file
diff --git a/styles/BaseSelectMenu.scss b/styles/BaseSelectMenu.scss
index 62f8d27b4..38f0206b6 100644
--- a/styles/BaseSelectMenu.scss
+++ b/styles/BaseSelectMenu.scss
@@ -102,7 +102,7 @@
       }
     }
     @include b(base-select-menu-light-bar) {
-      transition: background-color .3s $default-cubic-bezier;
+      // transition: background-color .3s $default-cubic-bezier;
       position: absolute;
       width:100%;
       background-color: $--base-select-menu-light-bar-background-color;
diff --git a/styles/Checkbox.scss b/styles/Checkbox.scss
index 882dad1d1..012b6bbd1 100644
--- a/styles/Checkbox.scss
+++ b/styles/Checkbox.scss
@@ -41,8 +41,8 @@
           transform: scale(0.5);
           transform-origin: center;
           transition: transform 0.3s $default-cubic-bezier,
-          opacity 0.3s $default-cubic-bezier,
-          border-color 0.3s $default-cubic-bezier;
+            opacity 0.3s $default-cubic-bezier,
+            border-color 0.3s $default-cubic-bezier;
         }
         @include e(check-mark) {
           content: "";
@@ -56,8 +56,8 @@
           transform: scale(0.5);
           transform-origin: center;
           transition: transform 0.3s $default-cubic-bezier,
-          opacity 0.3s $default-cubic-bezier,
-          border-color 0.3s $default-cubic-bezier;
+            opacity 0.3s $default-cubic-bezier,
+            border-color 0.3s $default-cubic-bezier;
         }
       }
       @include e(label) {
diff --git a/styles/CustomInput.scss b/styles/CustomInput.scss
index 61c5987ff..a3c3cfead 100644
--- a/styles/CustomInput.scss
+++ b/styles/CustomInput.scss
@@ -27,7 +27,6 @@
       }
       .n-input-key-value__item--action {
         width: 70px;
-        display: inline-block;
         align-items: center;
         display: flex;
         margin-left: 13px;
diff --git a/styles/DatePicker.scss b/styles/DatePicker.scss
index 3cba0e2f9..c9b3f01f9 100644
--- a/styles/DatePicker.scss
+++ b/styles/DatePicker.scss
@@ -9,6 +9,13 @@
       @include m(range) {
         // width: 382px;
       }
+      @include m (error) {
+        @include b(input) {
+          @include e(input) {
+            color: red;
+          }
+        }
+      }
     }  
   }
   
@@ -90,6 +97,14 @@
         @include b(time-picker) {
           width: 145px;
         }
+        @include b(input) {
+          @include m(error) {
+            color: red;
+            @include e(input) {
+              color: red;
+            }
+          }
+        }
       }
       border-bottom: 1px solid $--date-picker-divider-color;
     }
@@ -147,6 +162,12 @@
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
+        @include e(date-input) {
+          color: red;
+          @include m(error) {
+            color: red;
+          }
+        }
       }
       @include e(date) {
         @include once {
@@ -218,6 +239,10 @@
             background-color: map-get($--date-picker-item-sup-color, 'active');
           }
         }
+        @include m(disabled) {
+          cursor: not-allowed;
+          opacity: 0.45;
+        }
       }
     }
     @include e(divider) {
@@ -238,6 +263,12 @@
           margin-bottom: 0;
           margin-right: 12px;
         }
+        @include e(confirm) {
+          @include m(disabled) {
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        }
       }
       border-top: 1px solid $--date-picker-divider-color;
     }
diff --git a/styles/Input.scss b/styles/Input.scss
index 45364a094..89257008e 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -93,7 +93,7 @@
         height: $--input-icon-size;
         width: $--input-icon-size;
         @include b(icon) {
-          font-size: $--input-icon-size;;
+          font-size: $--input-icon-size;
           path {
             transition: fill .3s $default-cubic-bezier;
           }
diff --git a/styles/Log.scss b/styles/Log.scss
index 6cb4b55d0..75eff8efc 100644
--- a/styles/Log.scss
+++ b/styles/Log.scss
@@ -41,14 +41,18 @@
       color: $--n-secondary-text-color;
       background-color: $--n-dialog-color;
       line-height: 34px;
+      /* stylelint-disable */
       font-family: 'Lato';
+      /* stylelint-enable */
       white-space: nowrap;
       overflow: hidden;
       @include e(content) {
         display: inline-block;
         vertical-align: bottom;
         line-height: 34px;
+        /* stylelint-disable */
         font-family: 'Lato';
+        /* stylelint-enable */
         padding-left: 40px;
         padding-right: 20px;
         white-space: nowrap;
diff --git a/styles/Menu.scss b/styles/Menu.scss
index 07ac1508d..b88219dd0 100644
--- a/styles/Menu.scss
+++ b/styles/Menu.scss
@@ -6,7 +6,6 @@ $layout-nav-height: 64px;
 
 @include themes-mixin() {
   @include b(menu) {
-    background-color: $menu-background-color;
     width: 100%;
     transition:width .3s;
     @include b(menu-container) {
@@ -44,8 +43,27 @@ $layout-nav-height: 64px;
                 clip-path: polygon(100% 0, 100% 100%, 0% 100%);
               }
             }
-            @include m(selected) {
+            // @include m(selected) {
+            //   background-image: $menu-item-selected-background-image;
+            // }
+            &::before { // item background
+              content: "";
+              background-size: 300%;
               background-image: $menu-item-selected-background-image;
+              background-position: $--menu-item-background-position;
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              z-index: 0;
+              transition: opacity 0.3s $default-cubic-bezier;
+              opacity: 0;
+            }
+            @include m(selected) {
+              &::before {
+                opacity: .9;
+              }
             }
             @include m(disabled) {
               opacity: 0.45;
diff --git a/styles/Notification.scss b/styles/Notification.scss
index dde38205c..aca84dc62 100644
--- a/styles/Notification.scss
+++ b/styles/Notification.scss
@@ -47,13 +47,13 @@
     color: $--notification-text-color;
     @include once {
       transition:
-      background-color .3s $default-cubic-bezier,
-      color .3s $default-cubic-bezier,
-      opacity .3s $default-cubic-bezier,
-      transform .3s $default-cubic-bezier,
-      max-height .3s $default-cubic-bezier,
-      margin-bottom .3s linear,
-      box-shadow .3s $default-cubic-bezier;
+        background-color .3s $default-cubic-bezier,
+        color .3s $default-cubic-bezier,
+        opacity .3s $default-cubic-bezier,
+        transform .3s $default-cubic-bezier,
+        max-height .3s $default-cubic-bezier,
+        margin-bottom .3s linear,
+        box-shadow .3s $default-cubic-bezier;
       font-family: $default-font-family;
       font-size: 14px;
       font-weight: 400;
@@ -114,7 +114,6 @@
         padding-top: 16px;
         padding-bottom: 16px;
         box-sizing: border-box;
-        width: 100%;
         display: flex;
         flex-direction: column;
         margin-left: 40px;
diff --git a/styles/Slider.scss b/styles/Slider.scss
index 9ee4a39aa..c690574d7 100644
--- a/styles/Slider.scss
+++ b/styles/Slider.scss
@@ -138,13 +138,4 @@
     background-color: $--slider-indicator-background-color;
     box-shadow: $--slider-indicator-box-shadow;
   }
-}
-
-
-
-
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/styles/Statistic.scss b/styles/Statistic.scss
index bf562fee6..aa1393e00 100644
--- a/styles/Statistic.scss
+++ b/styles/Statistic.scss
@@ -3,7 +3,9 @@
 @include themes-mixin {
   @include b(statistic) {
     @include once {
+      /* stylelint-disable */
       font-family: 'Lato';
+      /* stylelint-enable */
     }
     @include b(statistic-value) {
       @include once {
diff --git a/styles/Switch.scss b/styles/Switch.scss
index e9e996a21..71f3ff4dc 100644
--- a/styles/Switch.scss
+++ b/styles/Switch.scss
@@ -58,13 +58,6 @@
           }
         }
       }
-      &::before {
-        box-shadow: $--switch-switcher-box-shadow;
-        transition: $--switch-switcher-transition;
-      }
-      &::after {
-        transition: $--switch-switcher-transition;
-      }
       background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
       &::before {
         background-image: map-get($map: $--switch-switcher-color, $key: 'inactive');
diff --git a/styles/Thing.scss b/styles/Thing.scss
index d14a6d1dd..9d36b395e 100644
--- a/styles/Thing.scss
+++ b/styles/Thing.scss
@@ -27,9 +27,9 @@
             font-weight: 700;
             transition: color .3s $default-cubic-bezier;
           }
-          @include e(extra) {
+          // @include e(extra) {
   
-          }
+          // }
           justify-content: space-between;
           align-items: center;
         }
diff --git a/styles/TimePicker.scss b/styles/TimePicker.scss
index e4a0fcf2c..1f6657c33 100644
--- a/styles/TimePicker.scss
+++ b/styles/TimePicker.scss
@@ -8,6 +8,19 @@
       display: inline-block;
       width: 180px;
     }
+    @include b(time-picker-input) {
+      @include m(error) {
+        color: red;
+        input {
+          color: red!important;
+        }
+        // @include b(input) {
+        //   @include e(input) {
+        //     color: red
+        //   }
+        // }
+      }
+    }
   }
   @include b(time-picker-selector) {
     @include once {
@@ -18,10 +31,16 @@
       width: 180px;
       overflow: hidden;
       @include fade-in-scale-up-transition(time-picker);
-      @include e(actions) {
+      @include b(time-picker-selector-actions) {
         padding: 10px 15px;
         display: flex;
         justify-content: space-around;
+        @include e(confirm) {
+          @include m(disabled) {
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        }
       }
     }
     background-color: $--time-picker-background-color;
@@ -58,6 +77,10 @@
           background-color: $--time-picker-item-background-color;
           color: map-get($--time-picker-text-color, 'active');
         }
+        @include m(disabled) {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
       }
     }
   }
diff --git a/styles/Timeline.scss b/styles/Timeline.scss
index ddc20dc82..d6fa177ad 100644
--- a/styles/Timeline.scss
+++ b/styles/Timeline.scss
@@ -144,6 +144,4 @@ $--timeline-header-margin-top: (
       }
     }
   }
-}
-
-
+}
\ No newline at end of file
diff --git a/styles/base.scss b/styles/base.scss
index cbb092af9..dc771fef0 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -2,7 +2,6 @@
 @import './themes/vars.scss';
 @import './Detachable.scss';
 
-
 html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
diff --git a/styles/mixins/color.scss b/styles/mixins/color.scss
index e69de29bb..ab0c01417 100644
--- a/styles/mixins/color.scss
+++ b/styles/mixins/color.scss
@@ -0,0 +1 @@
+//
\ No newline at end of file
diff --git a/styles/themes/dark/components/Affix.scss b/styles/themes/dark/components/Affix.scss
index 79cffb699..a89fe4f98 100644
--- a/styles/themes/dark/components/Affix.scss
+++ b/styles/themes/dark/components/Affix.scss
@@ -1,3 +1,3 @@
 @mixin setup-dark-affix {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/AutoComplete.scss b/styles/themes/dark/components/AutoComplete.scss
index f508b3268..f5db35e6e 100644
--- a/styles/themes/dark/components/AutoComplete.scss
+++ b/styles/themes/dark/components/AutoComplete.scss
@@ -1,3 +1,3 @@
 @mixin setup-dark-auto-complete {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Drawer.scss b/styles/themes/dark/components/Drawer.scss
index 7e0cedea4..b31f44903 100644
--- a/styles/themes/dark/components/Drawer.scss
+++ b/styles/themes/dark/components/Drawer.scss
@@ -1,3 +1,3 @@
 @mixin setup-dark-drawer {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Form.scss b/styles/themes/dark/components/Form.scss
index daf774fa1..0c861a19f 100644
--- a/styles/themes/dark/components/Form.scss
+++ b/styles/themes/dark/components/Form.scss
@@ -1,3 +1,3 @@
 @mixin setup-dark-form {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/GradientText.scss b/styles/themes/dark/components/GradientText.scss
index 9163a4558..a225bb518 100644
--- a/styles/themes/dark/components/GradientText.scss
+++ b/styles/themes/dark/components/GradientText.scss
@@ -6,7 +6,7 @@
     "error": linear-gradient(252deg, $--error-6 0%, $--error-hs 100%),
     "info": linear-gradient(252deg, $--info-6 0%, $--info-hs 100%),
   ) !global;
-};
+}
 
 // $default-text-gradient-warning: ;
 // $default-text-gradient-success: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
diff --git a/styles/themes/dark/components/List.scss b/styles/themes/dark/components/List.scss
index 3555dd7e1..ea62f9cc5 100644
--- a/styles/themes/dark/components/List.scss
+++ b/styles/themes/dark/components/List.scss
@@ -1,3 +1,3 @@
 @mixin setup-dark-list {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Menu.scss b/styles/themes/dark/components/Menu.scss
index e89c6db2e..9f71ea969 100644
--- a/styles/themes/dark/components/Menu.scss
+++ b/styles/themes/dark/components/Menu.scss
@@ -1,5 +1,5 @@
 @mixin setup-dark-menu {
   $menu-background-color: $--n-card-color !global;
-  $menu-item-selected-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
-  $--service-kayout-item-active-color: $--primary-6 !global;
+  $menu-item-selected-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
+  $--menu-item-background-position: 0% !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/jsIndex.scss b/styles/themes/dark/jsIndex.scss
index 15148355a..3c381d79c 100644
--- a/styles/themes/dark/jsIndex.scss
+++ b/styles/themes/dark/jsIndex.scss
@@ -2,6 +2,7 @@
 
 @include setup-dark-theme($in-js-env: true);
 
+/* stylelint-disable */
 :export {
   primaryColor: $--primary-5;
   primaryHoverColor: $--primary-6;
@@ -32,4 +33,5 @@
   borderColor: $--neutral-7;
   borderOverlayColor: $--overlay-7;
   cubicBezierEaseInOut: cubic-bezier(.4, 0, .2, 1);
-}
\ No newline at end of file
+}
+/* stylelint-enable */
\ No newline at end of file
diff --git a/styles/themes/light/components/Affix.scss b/styles/themes/light/components/Affix.scss
index da21342bd..5064cdd02 100644
--- a/styles/themes/light/components/Affix.scss
+++ b/styles/themes/light/components/Affix.scss
@@ -1,3 +1,3 @@
 @mixin setup-light-affix {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/AutoComplete.scss b/styles/themes/light/components/AutoComplete.scss
index 0b6e6b747..e162bce4c 100644
--- a/styles/themes/light/components/AutoComplete.scss
+++ b/styles/themes/light/components/AutoComplete.scss
@@ -1,3 +1,3 @@
 @mixin setup-light-auto-complete {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Drawer.scss b/styles/themes/light/components/Drawer.scss
index 7605744d4..24804d422 100644
--- a/styles/themes/light/components/Drawer.scss
+++ b/styles/themes/light/components/Drawer.scss
@@ -1,3 +1,3 @@
 @mixin setup-light-drawer {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Form.scss b/styles/themes/light/components/Form.scss
index 2733876e8..8213f3f14 100644
--- a/styles/themes/light/components/Form.scss
+++ b/styles/themes/light/components/Form.scss
@@ -1,3 +1,3 @@
 @mixin setup-light-form {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/List.scss b/styles/themes/light/components/List.scss
index 9465c2be4..f53bd8fb0 100644
--- a/styles/themes/light/components/List.scss
+++ b/styles/themes/light/components/List.scss
@@ -1,3 +1,3 @@
 @mixin setup-light-list {
-  
+  //
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Menu.scss b/styles/themes/light/components/Menu.scss
index b829bb3bf..00ff96cd0 100644
--- a/styles/themes/light/components/Menu.scss
+++ b/styles/themes/light/components/Menu.scss
@@ -1,5 +1,5 @@
 @mixin setup-light-menu {
   $menu-background-color: $--neutral-10 !global;
-  $menu-item-selected-background-image: linear-gradient(47deg, $--neutral-7, $--neutral-7) !global;
-  $--service-kayout-item-active-color: $--primary-6 !global;
+  $menu-item-selected-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
+  $--menu-item-background-position: 100% !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/NimbusForm.scss b/styles/themes/light/components/NimbusForm.scss
index 78ffcbb8a..8b74366a5 100644
--- a/styles/themes/light/components/NimbusForm.scss
+++ b/styles/themes/light/components/NimbusForm.scss
@@ -1,5 +1,5 @@
 @mixin setup-light-nimbus-form {
-  $--nimbus-form-background-color:white !global;;
+  $--nimbus-form-background-color:white !global;
   $--nimbus-form-title-color: $--n-text-color !global;
   $--nimbus-form-text-color: $--n-secondary-text-color !global;
   $--nimbus-form-divider-color:$--n-divider-color !global;
diff --git a/styles/themes/light/jsIndex.scss b/styles/themes/light/jsIndex.scss
index f776087e7..65d5a4271 100644
--- a/styles/themes/light/jsIndex.scss
+++ b/styles/themes/light/jsIndex.scss
@@ -2,6 +2,7 @@
 
 @include setup-light-theme($in-js-env: true);
 
+/* stylelint-disable */
 :export {
   primaryColor: $--primary-5;
   primaryHoverColor: $--primary-6;
@@ -32,4 +33,5 @@
   borderColor: $--neutral-6;
   borderOverlayColor: $--overlay-6;
   cubicBezierEaseInOut: cubic-bezier(.4, 0, .2, 1);
-}
\ No newline at end of file
+}
+/* stylelint-enable */
\ No newline at end of file
diff --git a/test/unit/specs/packages/utils/data/menuModel.spec.js b/test/unit/specs/packages/utils/data/menuModel.spec.js
index ed7896fcd..b74dd9297 100644
--- a/test/unit/specs/packages/utils/data/menuModel.spec.js
+++ b/test/unit/specs/packages/utils/data/menuModel.spec.js
@@ -1,6 +1,5 @@
 import {
   rootedOptions,
-  patchedOptions,
   linkedOptions,
   menuOptions
 } from 'packages/utils/component/menuModel'