jqueryhtmlcssjqxwidgets

jqxdatetimepicker - styling present date (if selected by user)


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: enter image description here

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;
}

Solution

  • 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/