Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Date Range Selector for WebDrawer


Dates in HPE CM may be specified in a number of ways, using standard date formats but also using special strings like 'today', 'yesterday', or 'this year'. Both for this reason and also because WebDrawer is designed to have a simple user interface there is no date picker widget for date searches in WebDrawer, only a simple text field.

If you desire a date picker the extensible nature of WeDrawer means you can add one quite easily.


The resources used to add a datepicker in this sample are:

Installing the sample

This sample includes all of the files required (and links to CDN versions of others), a couple of minor modifications have been made to the jQuery UI DateRangePicker so use the code in this repo rather than downloading the originals.

To install from the files here:

  • copy all the files from this repo to the matching folders under your WebDrawer root folder
  • reload WebDrawer, date fields should now look like this:

image 1

Installing in Records Manager 81

Version 81 does not automatically load scripts from the custom_scripts.cshtml file. To include the date range picker in 81:

  • do not copy custom_scripts.cshtml to your Views\Shared folder, but instead
  • in your Views\Shared_Layout.cshtml file add the following lines immediately prior to the line (near the bottom of the file) that reads ' @RenderSection("scripts")'.
<script src=""></script>
<script src=""></script>
<script src="~/scripts/jquery.comiseo.daterangepicker.js" type="text/javascript"></script>
<script src="~/scripts/custom_scripts.js" type="text/javascript"></script>

The scripts tags, once inserted in _Layout.cshtml, will look like this: image 1

Using the correct button image in version 9.x (and later)

In Content Manager 9.0 the images shipped with WebDrawer changed slightly, to prevent the calendar button containing a broken image edit custom_scripts.js and change the 'buttonImage' option to 'calendar_x24.png'.

You can’t perform that action at this time.