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

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


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);

效果:中文版本

英文版本:


猜你喜欢

转载自blog.csdn.net/zxf1242652895/article/details/79170389
今日推荐