Changing the Allowed Time Selections on the Time Picker in Creatio

When you have a Date/Time column, or just a Time column in Creatio, you’ll get a time picker control that includes a drop down of every 15 minute interval. For example, you’ll see 9:00 AM, 9:15 AM, 9:30 AM, 9:45 AM, 10:00 AM, etc. However, there’s a quick CSS hack that we can use to only show the whole hour intervals in this list, such as 9:00 AM, 10:00 AM, 11:00 AM, etc.

For this example, we’ll assume you want to apply this to all time pickers in the system. To do this, we’ll be adding some CSS to BootstrapModulesV2 so the CSS applies to the entire application. See how to do this in the article Applying Global CSS Styles in Creatio.

The CSS we’ll be adding looks like this:

div[data-item-marker$="TimeEdit"] li[data-item-marker*=":15"], 
div[data-item-marker$="TimeEdit"] li[data-item-marker*=":30"],  
div[data-item-marker$="TimeEdit"] li[data-item-marker*=":45"] {
	display: none;
}

Basically, we’ll looking for every div with a data-item-marker that ends with “TimeEdit” that contains a child li with a data-item-marker that contains values like “:15”. Obviously, we, could keep every 30 min interval by removing the entry for :30 from the CSS so we’re only hiding the :15 and :45 intervals.

Once we apply the CSS above, we’ll get the following:

If you only want to apply this to certain time edit drop-downs, you’d need to modify the CSS accordingly and only add to the pages needed instead of to BootstrapModulesV2. Keep in mind, the drop-down choices aren’t technically under the page’s parent div, but as a floating dialog. So, you’ll likely need to hardcode the TimeEdit full name instead of looking only for all divs with a data-item-marker that end with “TimeEdit”.