到目前为止,i18n对象的所有其他属性似乎都可以正常工作并按照文档中的说明进行更改,但previousMonth和nextMonth除外。不管我尝试什么,它们都保持相同的默认图标。希望能为您提供有关如何自定义这些内容的帮助。
下面是一个反映问题的简单html页面(请注意,其他i18n选项已正确显示,因此已被删除):
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Date Picker Customization</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12 m6 l3">
<form action="#">
<div>
<input type="text" class="datepicker" />
<label for="date">select a date</label>
</div>
</form>
</div>
</div>
</div>
<!-- JAVASCRIPT CODE SECTION -->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
var options = {
format: "dd mmm, yyyy",
yearRange: 2,
showMonthAfterYear: true,
i18n: {
previousMonth: "P",
nextMonth: "N"
}
};
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".datepicker");
var instances = M.Datepicker.init(elems, options);
});
</script>
<!-- END CODE SECTION -->
</body>
</html>