spreadjs日期控件

app/public/css/jquery-ui/datepicker.css

@@ -0,0 +1,185 @@
+/*!
+ * jQuery UI Datepicker 1.12.1
+ * http://jqueryui.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/datepicker/#theming
+ */
+.ui-datepicker {
+    width: 17em;
+    padding: .2em .2em 0;
+    display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+    position: relative;
+    padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+    position: absolute;
+    top: 2px;
+    width: 1.8em;
+    height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+    top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+    left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+    right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+    left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+    right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+    display: block;
+    position: absolute;
+    left: 50%;
+    margin-left: -8px;
+    top: 50%;
+    margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+    margin: 0 2.3em;
+    line-height: 1.8em;
+    text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+    font-size: 1em;
+    margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+    width: 45%;
+}
+.ui-datepicker table {
+    width: 100%;
+    font-size: .9em;
+    border-collapse: collapse;
+    margin: 0 0 .4em;
+}
+.ui-datepicker th {
+    padding: .7em .3em;
+    text-align: center;
+    font-weight: bold;
+    border: 0;
+}
+.ui-datepicker td {
+    border: 0;
+    padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+    display: block;
+    padding: .2em;
+    text-align: right;
+    text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+    background-image: none;
+    margin: .7em 0 0 0;
+    padding: 0 .2em;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+    float: right;
+    margin: .5em .2em .4em;
+    cursor: pointer;
+    padding: .2em .6em .3em .6em;
+    width: auto;
+    overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+    float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+    width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+    float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+    width: 95%;
+    margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+    width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+    width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+    width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+    border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+    clear: left;
+}
+.ui-datepicker-row-break {
+    clear: both;
+    width: 100%;
+    font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+    direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+    right: 2px;
+    left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+    left: 2px;
+    right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+    right: 1px;
+    left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+    left: 1px;
+    right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+    clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+    float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+    float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+    border-right-width: 0;
+    border-left-width: 1px;
+}
+
+/* Icons */
+.ui-datepicker .ui-icon {
+    display: block;
+    text-indent: -99999px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    left: .5em;
+    top: .3em;
+}

app/public/js/jquery-ui/datepicker-zh-CN.js

@@ -0,0 +1,37 @@
+/* Chinese initialisation for the jQuery UI date picker plugin. */
+/* Written by Cloudream (cloudream@gmail.com). */
+( function( factory ) {
+    if ( typeof define === "function" && define.amd ) {
+
+        // AMD. Register as an anonymous module.
+        define( [ "../widgets/datepicker" ], factory );
+    } else {
+
+        // Browser globals
+        factory( jQuery.datepicker );
+    }
+}( function( datepicker ) {
+
+    datepicker.regional[ "zh-CN" ] = {
+        closeText: "关闭",
+        prevText: "<上月",
+        nextText: "下月>",
+        currentText: "今天",
+        monthNames: [ "一月","二月","三月","四月","五月","六月",
+            "七月","八月","九月","十月","十一月","十二月" ],
+        monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
+            "七月","八月","九月","十月","十一月","十二月" ],
+        dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
+        dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
+        dayNamesMin: [ "日","一","二","三","四","五","六" ],
+        weekHeader: "周",
+        dateFormat: "yy-mm-dd",
+        firstDay: 1,
+        isRTL: false,
+        showMonthAfterYear: true,
+        yearSuffix: "年" };
+    datepicker.setDefaults( datepicker.regional[ "zh-CN" ] );
+
+    return datepicker.regional[ "zh-CN" ];
+
+} ) );

app/public/js/material.js

@@ -20,62 +20,56 @@ function loadUpdateMaterials(newMaterial, fields) {
     }
 }
 
-// function DatePickerCellType() {
-// }
-// DatePickerCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
-// DatePickerCellType.prototype.createEditorElement = function () {
-//     //Create input presenter.
-//     var input = document.createElement("input");
-//     return input;
-// };
-// DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
-//     //Initialize input editor.
-//     if (editorContext) {
-//         const $editor = $(editorContext);
-//         GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
-//         $editor.datepicker({
-//             language: 'zh',
-//         });
-//         $editor.css("position", "absolute");
-//         $editor.attr("gcUIElement", "gcEditingInput");
-//         $(".ui-datepicker").attr("gcUIElement", "gcEditingInput");
-//     }
-// }
-// // DatePickerCellType.prototype.deactivateEditor = function (editorContext) {
-// //     //Remove input editor when end editor status.
-// //     if (editorContext) {
-// //         var element = editorContext;
-// //         $(element).datepicker().data('datepicker').hide();
-// //         $(element).datepicker().data('datepicker').destroy();
-// //         // $(element).datepicker("hide");
-// //         // $(element).datepicker("destroy");
-// //     }
-// //     GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.apply(this, arguments)
-// // };
-// // DatePickerCellType.prototype.setEditorValue = function (editor, value) {
-// //     //Sync value from Cell value to editor value.
-// //     console.log($(editor), value);
-// //     // $(editor).datepicker("setDate", value);
-// //     $(editor).datepicker().data('datepicker').selectDate(value);
-// // };
-// // DatePickerCellType.prototype.getEditorValue = function (editor) {
-// //     //Sync value from editor value to cell value.
-// //     $(editor).datepicker({
-// //         onSelect: function onSelect(fd, date) {
-// //             console.log(fd);
-// //             $(editor).val(fd);
-// //         }
-// //     });
-// //     // return $(editor).datepicker("getDate");
-// //     return $(editor).val();
-// // };
-// DatePickerCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
-//     if (editorContext) {
-//         const $editor = $(editorContext);
-//         $editor.css("width", cellRect.width - 1);
-//         $editor.css("height", cellRect.height - 3);
-//     }
-// };
+function DatePickerCellType() {
+}
+DatePickerCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
+DatePickerCellType.prototype.createEditorElement = function () {
+    //Create input presenter.
+    var input = document.createElement("input");
+    return input;
+};
+DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
+    //Initialize input editor.
+    if (editorContext) {
+        const $editor = $(editorContext);
+        GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.apply(this, arguments);
+        $editor.datepicker({});
+        $editor.css("position", "absolute");
+        $editor.attr("gcUIElement", "gcEditingInput");
+        $(".ui-datepicker").attr("gcUIElement", "gcEditingInput");
+    }
+}
+DatePickerCellType.prototype.deactivateEditor = function (editorContext) {
+    //Remove input editor when end editor status.
+    if (editorContext) {
+        var element = editorContext;
+        // $(element).datepicker().data('datepicker').hide();
+        // $(element).datepicker().data('datepicker').destroy();
+        $(element).datepicker("hide");
+        $(element).datepicker("destroy");
+    }
+    GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.apply(this, arguments)
+};
+DatePickerCellType.prototype.setEditorValue = function (editor, value) {
+    //Sync value from Cell value to editor value.
+    // console.log($(editor), value);
+    $(editor).datepicker("setDate", value);
+    // $(editor).datepicker().data('datepicker').selectDate(value ? new Date(value) : new Date());
+};
+DatePickerCellType.prototype.getEditorValue = function (editor, context) {
+    // console.log($(editor).datepicker().data('datepicker'), context);
+    //Sync value from editor value to cell value.
+    // console.log($(editor).datepicker("getDate"));
+    // return $(editor).datepicker("getDate");
+    return $(editor).val();
+};
+DatePickerCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
+    if (editorContext) {
+        const $editor = $(editorContext);
+        $editor.css("width", cellRect.width - 1);
+        $editor.css("height", cellRect.height - 3);
+    }
+};
 
 function resetTpTable() {
     const rate = $('#changeRate').val();
@@ -113,9 +107,9 @@ $(document).ready(() => {
             {title: '工料分类', colSpan: '1', rowSpan: '2', field: 'm_type', hAlign: 1, width: 60, readOnly: 'readOnly.isEdit', cellType: 'customizeCombo', comboItems: materialType.m_type, cellTypeKey: 2},
             {title: '本期应耗数量', colSpan: '1', rowSpan: '2', field: 'quantity', hAlign: 2, width: 100, type: 'Number', readOnly: true},
             {title: '基准价', colSpan: '1', rowSpan: '2', field: 'basic_price', hAlign: 2, width: 60, type: 'Number', readOnly: 'readOnly.isEdit'},
-            {title: '基准时间', colSpan: '1', rowSpan: '2', field: 'basic_times', hAlign: 0, width: 60, formatter: '@', readOnly: 'readOnly.isEdit'},
+            {title: '基准时间', colSpan: '1', rowSpan: '2', field: 'basic_times', hAlign: 0, width: 80, formatter: '@', readOnly: 'readOnly.isEdit'},
             {title: '本期信息价|单价', colSpan: '3|1', rowSpan: '1|1', field: 'msg_tp', hAlign: 2, width: 60, type: 'Number', readOnly: 'readOnly.isEdit'},
-            {title: '|时间', colSpan: '|1', rowSpan: '|1', field: 'msg_times', hAlign: 0, width: 60, formatter: '@', readOnly: 'readOnly.isEdit'},
+            {title: '|时间', colSpan: '|1', rowSpan: '|1', field: 'msg_times', hAlign: 0, width: 80, formatter: '@', readOnly: 'readOnly.isEdit'},
             {title: '|价差', colSpan: '1', rowSpan: '1|1', field: 'msg_spread', hAlign: 2, width: 60, type: 'Number', readOnly: true, getValue: 'getValue.msg_spread'},
             {title: '本期材料调差|上涨幅度（%）', colSpan: '4|1', rowSpan: '1|1', field: 'm_up_risk', hAlign: 2, width: 100, type: 'Number', readOnly: 'readOnly.isEdit'},
             {title: '|下跌幅度（%）', colSpan: '|1', rowSpan: '|1', field: 'm_down_risk', hAlign: 2, width: 100, type: 'Number', readOnly: 'readOnly.isEdit'},
@@ -480,13 +474,15 @@ $(document).ready(() => {
     materialSpread.bind(spreadNS.Events.SelectionChanged, materialSpreadObj.selectionChanged);
     materialSpread.bind(spreadNS.Events.ClipboardPasted, materialSpreadObj.clipboardPasted);
     SpreadJsObj.addDeleteBind(materialSpread, materialSpreadObj.deletePress);
-    // const sheet = materialSpread.getActiveSheet();
-    // sheet.suspendPaint();
-    // var range = sheet.getRange(-1, 8, -1, 1);
-    // console.log(range);
-    // range.cellType(new DatePickerCellType());
-    // // range.formatter("yyyy-MM-dd");
-    // sheet.resumePaint();
+    const sheet = materialSpread.getActiveSheet();
+    sheet.suspendPaint();
+    const basic_range = sheet.getRange(-1, 8, -1, 1);
+    basic_range.cellType(new DatePickerCellType());
+    basic_range.formatter("yyyy-MM-dd");
+    const msg_range = sheet.getRange(-1, 10, -1, 1);
+    msg_range.cellType(new DatePickerCellType());
+    msg_range.formatter("yyyy-MM-dd");
+    sheet.resumePaint();
 
     if (!readOnly) {
         $('#add').click(materialSpreadObj.add);

app/view/material/info.ejs

@@ -62,8 +62,9 @@
     <img src="/public/images/ellipsis_horizontal.png" id="ellipsis-icon" />
     <img src="/public/images/icon-ok.png" id="icon-ok" />
 </div>
-<!--<script src="/public/js/datepicker/datepicker.min.js"></script>-->
-<!--<script src="/public/js/datepicker/datepicker.zh.js"></script>-->
+<link rel="stylesheet" href="/public/css/jquery-ui/datepicker.css">
+<script src="/public/js/jquery-ui/datepicker.js"></script>
+<script src="/public/js/jquery-ui/datepicker-zh-CN.js"></script>
 <% if ((material.status === auditConst.status.uncheck || material.status === auditConst.status.checkNo) && ctx.session.sessionUser.accountId === material.user_id) {%>
 <script>
     const accountList = JSON.parse('<%- JSON.stringify(accountList) %>');