Gijgo Datepicker 上个月和下个月图标更改

Posted 2023-05-08

【中文标题】Gijgo Datepicker 上个月和下个月图标更改

【英文标题】：Gijgo Datepicker previous and next month icon change

【发布时间】：2019-11-12 14:47:48

【问题描述】：

我正在使用 Gijgo 日期选择器。我正在尝试将 previous 和 next 月份图标更改为 icomoon 图标，但我没有找到任何解决方案。对于输入字段右侧的图标，有选项

    icons: 
        rightIcon: '<i class="icon-calendar_today"></i>'
    ,

但不是下个月或上个月。

这里是示例代码。我需要像这样将https://tppr.me/V77Wu 更改为<i class="icon-right"></i>。

$('.datepicker').datepicker(
		uiLibrary: 'bootstrap4',
		iconsLibrary: 'glyphicons',
		format: 'mmmm d yyyy',
		value: 'April 11th 2019',
		icons: 
			rightIcon: '<i class="icon-calendar_today"></i>'
		,

		change: function(dateText, inst) 
			var date = dateText.target.value.split(' ');

			var day = date[1];

			var suffix = "";
			switch(day) 
				case '1': case '21': case '31': suffix = 'st'; break;
				case '2': case '22': suffix = 'nd'; break;
				case '3': case '23': suffix = 'rd'; break;
				default: suffix = 'th';
			

			var altDay = date[1] + suffix;

			date[1] = altDay;

			var newDate = date.join().replace(/,/g, " ");

			$(".datepicker").val(newDate);
		
	);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js"></script>

<input type="text" class="form-control datepicker">

【参考方案1】：

这只是用js。一种方法。希望能帮助到你。你也可以使用 jQuery，因为你已经在使用它了。

它在这里用类 'glyphicon-chevron-right' 替换第一个元素，用 jquery 来定位它可能更好。

var e = document.getElementsByClassName('glyphicon-chevron-right')[0];

var d = document.createElement('i');
d.innerhtml = e.innerHTML;

e.parentNode.replaceChild(d, e);
d.classList.add("icon-calendar_today");

<span class="glyphicon glyphicon-chevron-right"></span>