dhtmlXForm中calendar控件初始化及语言设置

最新推荐文章于 2023-04-20 15:33:01 发布

原创最新推荐文章于 2023-04-20 15:33:01 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dhtmlXForm #calendar

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在dhtmlXForm中集成和初始化calendar控件，包括必要的js和css资源引用，以及实现控件的语言设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@page pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>中药处方</title>
    <link rel="stylesheet" type="text/css" href="staticassets/assets/lib/dhtmlx/dhtmlxsuitev508proeval/skins/skyblue/dhtmlx.css"/>
    <link rel="stylesheet" href="staticassets/assets/lib/zTree/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="staticassets/assets/lib/zTree/zTreeStyle/zTreeIcons.css" />
    <link rel="stylesheet" href="staticassets/assets/lib/jquery/plugin/jquery-ui-1.12.0.css">
    <script src="staticassets/assets/lib/jquery/jquery-1.12.4.min.js"></script>
    <script src="staticassets/assets/lib/dhtmlx/dhtmlxsuitev508proeval/codebase/dhtmlx.js"></script>
    <script src="staticassets/assets/lib/dhtmlx/dhtmlxsuitev508proeval/codebase/dhtmlx_deprecated.js"></script>
    <script src="staticassets/assets/lib/zTree/jquery.ztree-2.6.js"></script>
</head>
<body onload="init()">    
    <div id="divBox" class="box">
        <div id="form">
        </div>
    </div>
</body>
</html>

关键js、css引入：dhtmlx.js、dhtmlx.css

js代码

var medicineFormGroup = [], chineseMedForm = null, advieList = {}, deptcode = '', medNames = '';
//定义住院主form字段
var form_zhuyuan = [
    {
        type: "block", inputWidth: 750, offsetTop: 20, label: "查询条件", list: [
        {type: "settings", offsetLeft: 25, offsetTop: 10},
        {
            type: 'combo',
            name: 'deptcode',
            label: '执行科室: ',
            filtering: true,
            className: 'red_important',
            width: 80
        },
        {type: "newcolumn"},
        {
            type: 'calendar',
            id: 'startTime',
            name: 'startTime',
            label: ' 开始时间:',
            inputWidth: 140,
            offsetTop: 8,
            minutesInterval: 1,
            enableTime: true,
            dateFormat: "%Y-%m-%d %H:%i"
        }
    ]
    }
];

//初始化
function init() {
    initCalendar();  //初始化日期控件语言
    initForm();      //初始化form
    chineseMedForm.setItemFocus('deptcode');
}

//初始化form操作
function initForm() {
    var formData = form_zhuyuan;
    $('#form').html('');
    chineseMedForm = new dhtmlXForm("form", formData);
    chineseMedForm.attachEvent('onChange', function (name, value) {
        if (name === 'deptcode') {
            deptcode = chineseMedForm.getItemValue(name);
        }
    });
    chineseMedForm.setItemValue('startTime', new Date(getNowTimeString()));
}

function getNowTimeString() {
    var nowtime = new Date();
    var monthn = nowtime.getMonth() + 1 < 10 ? "0" + (nowtime.getMonth() + 1) : nowtime.getMonth() + 1;
    var daten = nowtime.getDate() < 10 ? "0" + nowtime.getDate() : nowtime.getDate();
    var hoursn = nowtime.getHours() < 10 ? "0" + nowtime.getHours() : nowtime.getHours();
    var minutesn = nowtime.getMinutes() < 10 ? "0" + nowtime.getMinutes() : nowtime.getMinutes();
    return nowtime.getFullYear() + "-" + monthn + "-" + daten + " " + hoursn + ":" + minutesn;
}

function initCalendar(){
    dhtmlXCalendarObject.prototype.langData["cn"] = {
        //dateformat: "%d.%m.%Y",
        monthesFNames: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月",
            "八月", "九月", "十月", "十一月", "十二月"
        ],
        monthesSNames: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月",
            "八月", "九月", "十月", "十一月", "十二月"
        ],
        daysFNames: [
            "周日","周一", "周二", "周三", "周四", "周五", "周六",
        ],
        daysSNames: ["日","一", "二", "三", "四", "五", "六"],
        weekstart: 7,
        weekname: "周"
    };
    dhtmlXCalendarObject.prototype.lang = "cn";   //设置全部calendar控件为中文，也可以另一种方式loadUserLanguage("cn")
}