您的位置:首页 > Web前端 > JavaScript

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

2018-01-26 11:58 525 查看
如图:对头部实现国际化 如果是英文版本则切换成英文 如果是中文版本则切换成中文



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


效果:中文版本


英文版本:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息