vis.js 头部日期实现国际化

太过爱你忘了你带给我的痛 2021-10-08 07:02 282阅读 0赞

如图：对头部实现国际化 如果是英文版本则切换成英文 如果是中文版本则切换成中文

![SouthEast][]

1.需引入

<script src="${pageContext.request.contextPath}/js/moment-with-locales.js"></script> 
            <script src="js/vis.js"></script>
            <link href="css/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

2.

var optionsUS = {
     		     groupOrder: function (a, b) {
    		      return a.value - b.value;
    		    },
     		    //添加进度条
    		    visibleFrameTemplate: function(item) {
    		     if (item.visibleFrameTemplate) {
    		       return item.visibleFrameTemplate;
    		     }
    		     
    		     var percentage = item.value+ '%';
    		     return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
    		   }, 
    		      
    		    groupOrderSwap: function (a, b, groups) {
    		     	var v = a.value;
    		    	a.value = b.value;
    		    	b.value = v;
    		    },
    		    locale: moment.locale('en'),
    		    orientation: 'both',
     		    editable: false,
    		    tooltipOnItemUpdateTime: true,
    		    groupEditable: true,
    		    start: startTime,
    		    end:endTime 
    		  };
      
      //中文
       var options = {
         groupOrder: function (a, b) {
          return a.value - b.value;
        },
             
        //添加进度条
        visibleFrameTemplate: function(item) {
         if (item.visibleFrameTemplate) {
           return item.visibleFrameTemplate;
         }
         
         var percentage = item.value+ '%';
         return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
       }, 
          
        groupOrderSwap: function (a, b, groups) {
         	var v = a.value;
        	a.value = b.value;
        	b.value = v;
        },
        orientation: 'both',
        
        locale: moment.locale('zh-cn'),
        editable: false,
        tooltipOnItemUpdateTime: true,
        groupEditable: true,
        start: startTime,
        end:endTime 
      };

3.根据中英文判断

var timeline = new vis.Timeline(container);
      var lanageType=sessionStorage.getItem("sysManager_i18nLanauge");//获取国际化语言
      if(lanageType=="zh"){
    	  timeline.setOptions(options);//调用中文的options配置 
      }else{
    	  timeline.setOptions(optionsUS);//调用英文的options配置
      }
       timeline.setGroups(groups);
       timeline.setItems(items);

效果：中文版本![SouthEast 1][]

英文版本：

![SouthEast 2][]

[SouthEast]: /images/20211008/64fd8da4b14b4698a67c7a05c441a5ea.png
[SouthEast 1]: /images/20211008/a7541ce9dbf54d1b963c8435fea2516a.png
[SouthEast 2]: /images/20211008/ce6fd728cb0f4f0e99c332b36199e82e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java国际化和本地化：日期格式转换示例

Java中的国际化（Internationalization）和本地化（Localization）是指使软件能够适应不同语言和地区的过程。在处理日期和时间时，不同的地区有不同的

亦凉/ 2024年11月09日 15:21/ 0 赞/ 73 阅读

相关 vue实现国际化

安装vue-i18n，可使用npm安装依赖包： npm install vue-i18n ![20191122133523443.png][] mian.js i

谁践踏了优雅/ 2023年06月15日 11:25/ 0 赞/ 177 阅读

相关 Springboot实现国际化

1.编写国际化配置文件 ![在这里插入图片描述][2019100316304426.png] 配置文件中定义与语言相关的数据例如login\_en\_US.pro

拼搏现实的明天。/ 2023年06月01日 12:49/ 0 赞/ 25 阅读

相关实现国际化

Flutter实现国际化 [一. 国际化的认识][.] [二. 国际化的适配][. 1] [2.1. Widget的国际化][2.1. Widge

r囧r小猫/ 2023年01月16日 06:40/ 0 赞/ 224 阅读

相关 SpringBoot实现国际化

一、添加国际化配置文件在resources下创建名称为i18n的文件夹，并在该文件夹中编写对应的多语言国际化文件login.properties、login\_zh\_

清疚/ 2022年11月21日 11:58/ 0 赞/ 218 阅读

相关 Android实现国际化

Android实现国际化国际化I18n简介 Android实现国际化 Android实现国际化国际化I18n简介

迈不过友情╰/ 2022年08月18日 05:51/ 0 赞/ 233 阅读

相关 SpringMVC实现国际化

在这里通过案例说明： 1. 在项目src向新建一个message文件夹，该文件夹下面有message\_en\_US.properties和message\_z

谁践踏了优雅/ 2022年08月06日 04:16/ 0 赞/ 267 阅读

相关 mui 实现头部滑动，

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta n

骑猪看日落/ 2022年02月12日 17:27/ 0 赞/ 311 阅读

相关 vis.js 头部日期实现国际化

如图：对头部实现国际化如果是英文版本则切换成英文如果是中文版本则切换成中文 ![SouthEast][] 1.需引入 <script src="${pa

太过爱你忘了你带给我的痛/ 2021年10月08日 07:02/ 0 赞/ 283 阅读

相关前端实现国际化

步骤1.引入相关的js文件 1、strings\_zh.properties (表示中文属性文件)新创 2、strings.properties

悠悠/ 2021年10月08日 06:58/ 0 赞/ 480 阅读