【问题标题】:Gijgo Datepicker previous and next month icon changeGijgo Datepicker 上个月和下个月图标更改
【发布时间】:2019-11-12 14:47:48
【问题描述】:

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

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

但不是下个月或上个月。

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

$('.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">

【问题讨论】:

    标签: javascript jquery twitter-bootstrap 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");
    &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;

    【讨论】:

      猜你喜欢
      • 2023-03-25
      • 2017-06-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多