diff --git a/public/react/package.json b/public/react/package.json
index e644e2166..e21a44df3 100644
--- a/public/react/package.json
+++ b/public/react/package.json
@@ -78,6 +78,7 @@
     "react-codemirror2": "^6.0.0",
     "react-content-loader": "^3.1.1",
     "react-cookies": "^0.1.1",
+    "react-datepicker": "^2.14.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.9.0",
     "react-hot-loader": "^4.0.0",
diff --git a/public/react/src/modules/courses/signin/css/Signinstatistics.css b/public/react/src/modules/courses/signin/css/Signinstatistics.css
index 0cd32b0a4..ddcda4cd1 100644
--- a/public/react/src/modules/courses/signin/css/Signinstatistics.css
+++ b/public/react/src/modules/courses/signin/css/Signinstatistics.css
@@ -102,7 +102,12 @@
     color: rgba(153,153,153,1);
     text-align: right;
     margin-right: 20px;
-    line-height: 32px;
+    line-height: 32px  !important;
+    height: 32px  !important;
+}
+.Signinstatisticsfontselect .ant-select-selection--single .ant-select-selection__rendered{
+    line-height: 32px  !important;
+    height: 32px  !important;
 }
 
 #form_in_modal_group_ids .ant-select-selection{
@@ -150,6 +155,10 @@
     color:#FF835C;
 }
 
+.color909399{
+    color:#909399;
+}
+
 .color1890FF{
     color:#1890FF;
 }
@@ -161,4 +170,44 @@
 
 .textcenter{
     text-align: center !important;
+}
+
+.sginboxcolor26C7C9 .ant-select-selection--single{
+     border:1px solid #26C7C9 !important;
+ }
+
+.sginboxcolor26C7C9 .ant-select-arrow{
+    color: #26C7C9 !important;
+}
+
+.sginboxcolorEAAE4E .ant-select-selection--single{
+    border:1px solid #EAAE4E !important;
+}
+
+.sginboxcolorEAAE4E .ant-select-arrow{
+    color: #EAAE4E !important;
+}
+
+.sginboxcolorFF835C .ant-select-selection--single{
+    border:1px solid #FF835C !important;
+}
+
+.sginboxcolorFF835C .ant-select-arrow{
+    color: #FF835C !important;
+}
+
+
+
+.sginboxcolor909399 .ant-select-selection--single{
+    border:1px solid #909399 !important;
+}
+
+.sginboxcolor909399 .ant-select-arrow{
+    color: #909399 !important;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
+    height: auto  !important;
+    padding: 0px  !important;
+    white-space: nowrap  !important;
 }
\ No newline at end of file
diff --git a/public/react/src/modules/courses/signin/model/Createsignmodel.js b/public/react/src/modules/courses/signin/model/Createsignmodel.js
index ade031ef2..762a9bed9 100644
--- a/public/react/src/modules/courses/signin/model/Createsignmodel.js
+++ b/public/react/src/modules/courses/signin/model/Createsignmodel.js
@@ -1,8 +1,10 @@
 import "../css/Signinstatistics.css"
 import React from 'react'
-import { Modal , Form, Input, Radio,DatePicker, TimePicker,Select,Button} from 'antd';
+import { Modal , Form, Input, Radio,DatePicker,Select,Button} from 'antd';
 import moment from 'moment';
 import axios from 'axios';
+import TimePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 function range(start, end) {
   const result = [];
   for (let i = start; i < end; i++) {
@@ -30,9 +32,26 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
       this.state = {
         course_groups:[],
         type:false,
-        dateString:null
+        dateString:null,
+        start_time: "",
+        end_time:""
       }
     }
+
+
+    handleChangestart_time = (date) => {
+      console.log(moment(date).format('HH:mm'))
+      this.setState({
+        start_time: date
+      });
+    };
+
+    handleChangeend_time=(date)=>{
+      console.log(moment(date).format('HH:mm'))
+      this.setState({
+        end_time: date
+      });
+    }
     componentDidMount() {
       const coursesId=this.props.match.params.coursesId;
       let newurl=`/courses/${coursesId}/all_course_groups.json`;
@@ -223,24 +242,65 @@ const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
               })(<DatePicker style={{width:"413px"}} getPopupContainer={trigger => trigger.parentNode}
                              disabledTime={disabledDateTime}
                              disabledDate={disabledDate}
-                             onChange={this.onChange}
+
               />)}
             </Form.Item>
-
+            <style>
+              {
+                `
+                #form_in_modal_start_time{
+                   width:413px;
+                   padding-left: 10px;
+                }
+                
+                #form_in_modal_end_time{
+                   width:413px;
+                   padding-left: 10px;
+                }
+                `
+              }
+            </style>
             <Form.Item label="开始时间：">
               {getFieldDecorator('start_time',  {
                 rules: [{ type: 'object', required: true, message: '请选择开始时间' }],
-              })(<TimePicker style={{width:"413px"}} format={format} getPopupContainer={trigger => trigger.parentNode}/>)}
+              })(
+                // <TimePicker style={{width:"413px"}} format={format} getPopupContainer={trigger => trigger.parentNode}/>
+                <TimePicker
+                  style={{width:"413px"}}
+                  selected={this.state.start_time}
+                  onChange={date => this.handleChangestart_time(date)}
+                  showTimeSelect
+                  showTimeSelectOnly
+                  timeIntervals={1}
+                  timeCaption="Time"
+                  timeFormat="HH:mm"
+                  getPopupContainer={trigger => trigger.parentNode}
+                />
+                )}
             </Form.Item>
 
             <Form.Item label="结束时间：">
               {getFieldDecorator('end_time',  {
                 rules: [{ type: 'object', required: true, message: '请选择结束时间' }],
-              })(<TimePicker style={{width:"413px"}} format={format} getPopupContainer={trigger => trigger.parentNode}
-                disabledHours={this.getDisabledHours}
-                disabledMinutes={this.getDisabledMinutes}
-
-                />)}
+              })(
+                // <TimePicker style={{width:"413px"}} format={format} getPopupContainer={trigger => trigger.parentNode}
+                // disabledHours={this.getDisabledHours}
+                // disabledMinutes={this.getDisabledMinutes}
+                //
+                // />
+                <TimePicker
+                style={{width:"413px"}}
+                selected={this.state.end_time}
+                onChange={date => this.handleChangeend_time(date)}
+                showTimeSelect
+                showTimeSelectOnly
+                timeIntervals={1}
+                minTime={new Date()}
+                timeCaption="Time"
+                timeFormat="HH:mm"
+                getPopupContainer={trigger => trigger.parentNode}
+                />
+                )}
             </Form.Item>