Uses <DateInput> widget

index.html

@@ -11,6 +11,7 @@
   <!-- Bootstrap -->
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
+  <link href="./node_modules/react-datetime/css/react-datetime.css" rel="stylesheet">
 
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

package.json

@@ -13,6 +13,8 @@
     "@types/react-router-redux": "^5.0.10",
     "electron": "^1.7.10",
     "mammoth": "git+file:///home/forks/work/mammoth-lib.git",
+    "moment": "^2.20.1",
+    "react-datetime": "^2.11.1",
     "tslint": "^5.8.0"
   },
   "devDependencies": {

src/main-view/container.tsx

@@ -2,8 +2,13 @@ import * as React from "react";
 import { connect, Dispatch } from "react-redux";
 import { StMainView, StAppWithMainView } from ".";
 import { Grid, Row, Col, Table, ButtonToolbar, Button, Panel, FormControl, Checkbox } from "react-bootstrap";
+import "mammoth/ui/jss";
 import { Led } from "mammoth/ui/led";
+import { DateInput } from "mammoth/ui/date-input";
 import jss from "jss";
+import preset from "jss-preset-default";
+
+jss.setup(preset());
 
 const sheet = jss.createStyleSheet({
   pnl: {
@@ -32,7 +37,7 @@ function mainView(props: Props & Callbacks) {
           <Button>启用称重</Button>
           <Button disabled>停止称重</Button>
         </ButtonToolbar>
-        <div>宰杀日期：<input /></div>
+        <div>宰杀日期：<DateInput /></div>
       </Col>
       <Col lg={5} style={{ height: "15vh", flexWrap: "wrap", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
         <Checkbox>打印条码</Checkbox>