jqxdatetimepicker - styling present date (if selected by user)

Question

I really need your help with this one as I am scratching my head. I can't, for the life of me, seem to manage to style the present date (if selected and chosen by the user in the jqxdatetimepicker).

My objective is this: Don't select and style the present date when the datetimepicker is first opened by the user. Instead, let the user make a choice to select a date.

The problem is when the user hovers their mouse over and selects the present date, it is neither shaded or styled so as to indicate that it has been selected.

Here is a picture of the desired result:

Here is an example of the fiddle in question: http://jsfiddle.net/y5sobb29/

Here is the css in question:

.jqx-calendar-cell-today {
  background-color: transparent;
  border: none;
  pointer-events: none;
  cursor: default;
}

tao · Answer 1 · 2018-02-14T18:19:59.740

0

I believe you're looking for this:

.jqx-calendar-cell-today {
  background-color: transparent;
  border-color: transparent;
}

.jqx-calendar-cell-today:hover {
  border-color: #999;
  background-color: #e8e8e8;
}

Updated fiddle.
Note: if you want it to "remember" being pressed, you should use:

.jqx-calendar-cell-today:not(.jqx-fill-state-pressed) {
  background-color: transparent;
  border-color: transparent;
}
.jqx-calendar-cell-today:not(.jqx-fill-state-pressed):hover {
  border-color: #999;
  background-color: #e8e8e8;
}

edited Feb 14 '18 at 18:19

answered Feb 14 '18 at 18:13

tao

82,996
16
114
150

The hover works really great, except if I click on the 14th of February, it still appears white, any ideas? – BobbyJones Feb 14 '18 at 18:43
@BobbyJones, when you open it first time, `today` is selected. And you want it to look like it's not selected. And after you click on it you want it to look like it's selected. So you want the same thing to look in two different ways. I don't think StackOverflow is the proper place for this request. Try writing to Santa. – tao Feb 14 '18 at 19:04
@BobbyJones, I've looked into it and even if you set the value to `null`, it still selects today when opening. If it's any comfort, this is by far the worst timepicker i've come across in a long time (and i've seen a good share). Your best bet is to ask the authors how to prevent selecting today when opening the picker. If they have a method for it, it's not documented. – tao Feb 14 '18 at 19:30
Will do. Thank you :) – BobbyJones Feb 14 '18 at 19:35

score -1 · Accepted Answer · answered Feb 16 '18 at 16:47

After doing some digging around, for those who are wanting to know the answer:

Insert the following jQuery markup:

$("#jqxDateTimeInput").jqxDateTimeInput({
  width: '250px',
  height: '25px',
  allowNullDate: true,
  value: null
});

$('#jqxDateTimeInput').on('open', function (event) { 
    if($("#jqxDateTimeInput").jqxDateTimeInput('value')===null) {
    $('.jqx-calendar .jqx-fill-state-pressed').removeClass('jqx-fill-state-pressed');
  }
});

And then use the following CSS properties:

.jqx-calendar-cell-today:not(.jqx-fill-state-hover):not(.jqx-fill-state-pressed) {
  background-color: transparent;
  border: none;
  /* pointer-events: none;
  cursor: default; */
}

A jsFiddle of this example can be found at: http://jsfiddle.net/Dimitar_jQWidgets/b70bmrf8/6/

jqxdatetimepicker - styling present date (if selected by user)

2 Answers2