0

I have seen some datepicker versions where the "today" button/bar under the calendar shows up as "Today". Mine has the calendar icon.

I don't want to reload a different version, because what I have is actually working, but I'm worried about end-users who won't necessarily know/assume that button means "today."

In the .js for datetimepicker, it selects the glyphicon calendar for the "today" button. If I disable that specific setting, there is nothing that shows up in the bar below the calendar.

        icons: {
        time: "glyphicon glyphicon-time",
        date: "glyphicon glyphicon-calendar",
        up: "glyphicon glyphicon-chevron-up",
        down: "glyphicon glyphicon-chevron-down",
        previous: "glyphicon glyphicon-chevron-left",
        next: "glyphicon glyphicon-chevron-right",
        today: "glyphicon glyphicon-calendar",
        clear: "glyphicon glyphicon-trash",
        close: "glyphicon glyphicon-remove"
    },

What switch, setting, or icon can I use to make the button display the word "Today," instead?

PoloHoleSet
  • 157
  • 1
  • 1
  • 10
  • Possible duplicate of [How to add close text to datetimepicker bootstrap?](https://stackoverflow.com/questions/36171963/how-to-add-close-text-to-datetimepicker-bootstrap) – VincenzoC Feb 15 '19 at 08:39

1 Answers1

0

Okay, I figured it out.

I created a png image of a blue rectange with a white centered "Today." I went into the datetimepicker.css and created a class that refers to the image - 

.calendar-today-button {
background-image: url(../../images/todaybtn.png);
background-repeat: no-repeat;
background-position: center;

}

I found the function in the JavaScript code where it calls on the icon classes when constructing the buttons/controls for the "Today" button - 

F = function() {
            var b = [];
            return d.showTodayButton && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "today",
                title: d.tooltips.today
            }).append(a("<span>").addClass("d.icons.time")))), !d.sideBySide && B() && A() && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "togglePicker",
                title: d.tooltips.selectTime
            }).append(a("<span>").addClass(d.icons.time)))), d.showClear && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "clear",
                title: d.tooltips.clear
            }).append(a("<span>").addClass(d.icons.clear)))), d.showClose && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "close",
                title: d.tooltips.close
            }).append(a("<span>").addClass(d.icons.close)))), a("<table>").addClass("table-condensed").append(a("<tbody>").append(a("<tr>").append(b)))
        },

I changed the calendar icon to my calendar button class - 

            F = function() {
            var b = [];
            return d.showTodayButton && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "today",
                title: d.tooltips.today
            }).append(a("<span>").addClass("calendar-today-button")))), !d.sideBySide && B() && A() && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "togglePicker",
                title: d.tooltips.selectTime
            }).append(a("<span>").addClass(d.icons.time)))), d.showClear && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "clear",
                title: d.tooltips.clear
            }).append(a("<span>").addClass(d.icons.clear)))), d.showClose && b.push(a("<td>").append(a("<a>").attr({
                "data-action": "close",
                title: d.tooltips.close
            }).append(a("<span>").addClass(d.icons.close)))), a("<table>").addClass("table-condensed").append(a("<tbody>").append(a("<tr>").append(b)))
        },
PoloHoleSet
  • 157
  • 1
  • 1
  • 10