[FEAT] Use MenuItem (dropdown menu) to select year

This should not be merged until mui/material-ui#3289 is fixed.

Opening the dropdown causes about 4000ms under a desktop, using Chrome.
This provides a awful UX to users because of the lag issue.

app/components/RangeSelector.jsx

@@ -1,41 +1,27 @@
 import React from 'react';
-import AutoComplete from 'material-ui/AutoComplete';
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
 
-const yearPrefix = '20'
-const minYear = 10;
-const maxYear = 99;
-const dataSource = [];
+const minYear = 2010;
+const maxYear = 2099;
+let yearItems = [];
 for (let i = minYear; i <= maxYear; i++) {
-  dataSource.push(String(i));
-}
-
-/**
- * This function strips the given number and return the last two digit of the number.
- * WARNING: The return type is a string.
- *
- * @param year {Number} - Number for operation.
- * @returns {String} - Last two digit of the number.
- */
-function yearStrip(year) {
-  return String(year).slice(2);
-}
-
-function processProps(props) {
-  return {
-    searchText: yearStrip(props.value),
-    onUpdateInput(searchText) {
-      props.onChange(Number(yearPrefix + searchText));
-    }
-  }
+  yearItems.push(
+    <MenuItem key={i - minYear} primaryText={i} value={i} />
+  );
 }
 
 export default function RangeSelector(props) {
   return (
     <div>
-      <spam>從西曆 {yearPrefix}</spam>
-      <AutoComplete dataSource={dataSource} hintText="年份" {...processProps(props.start)} />
-      <spam> 年 正月初一 重複至 西曆 {yearPrefix}</spam>
-      <AutoComplete dataSource={dataSource} hintText="年份" {...processProps(props.end)} />
+      <spam>從西曆 </spam>
+      <SelectField {...props.start}>
+        {yearItems}
+      </SelectField>
+      <spam> 年 正月初一 重複至 西曆 </spam>
+      <SelectField {...props.end}>
+        {yearItems}
+      </SelectField>
       <spam> 年 正月初一 的前一天</spam>
     </div>
   );