jqxdatetimepicker用户选中当日日期时的样式设置求助

I’ve dealt with exactly these jQWidgets date picker quirks before, so let’s walk through the fixes step by step:

1. Prevent Auto-Highlighting Today on First Open #

By default, jqxdatetimepicker pre-selects and highlights the current date when it loads. To turn this off (so users pick their own date), adjust your initialization config like this:

$("#yourDatePickerId").jqxDateTimePicker({
    width: 250,
    height: 30,
    value: null, // No date pre-selected on open
    todayHighlight: true // Keep this on— we’ll use it to style selected today later
});

Setting value: null ensures no date is active when the picker opens. The todayHighlight flag keeps today visually marked (so users can spot it) but doesn’t select it automatically— exactly what you need.

2. Add Styling for When Users Select Today #

If clicking today doesn’t trigger any visual feedback, the default jQWidgets CSS isn’t properly targeting the selected state of the today date. Add these custom styles to your stylesheet:

/* Style for when today is selected */
.jqx-calendar-today.jqx-calendar-selected-date {
    background-color: #1976d2; /* Pick your preferred highlight color */
    color: #ffffff;
    border-radius: 4px;
    font-weight: 500;
}

/* Optional: Hover state for today to improve UX */
.jqx-calendar-today:hover {
    background-color: #e3f2fd;
    border-radius: 4px;
}

Make sure this CSS loads after the default jQWidgets stylesheet— otherwise, your custom rules might get overridden. If you’re using a framework (React/Vue/Angular), use scoped styles with higher specificity if needed.

That’s it! Now your date picker won’t auto-select today on open, and when users click today, it’ll show clear, custom styling.

内容的提问来源于stack exchange，提问作者BobbyJones