Question

我正在使用Gijgo Datepicker。我正在尝试将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">

Answer 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>

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

1 个答案: