Add a Date Picker Filter

Adding a date picker requires configuring a layer.

Here is an example of adding a date picker:

  1. Add a <config> section and make it dependent on the base type template for a dropdown select filter. You also need to configure the filter output parameters here. See Page Filters Basics for more details on filter config options.

    {
    "type" : "date-range-picker",
    "load_phase": 0,
    "filters" : {
        "output" : [
            {
                "name" : "start_date",
                "urlparam" : "start_date"
            },
            {
                "name" : "end_date",
                "urlparam" : "end_date"
            }
        ]
    }
    }
  2. Add rules to your <mappings> to map the options from the query to filter visualization. You specify a list of preset date ranges. Use add and subtract and day, month, year similar to the example below.

    {
    	"range_label": "Select Date:",
    	"start_date": "2017-01-01",
    	"end_date": null,
    	"presets": [
    	    {
    	        "label" : "Last 2 years",
    	        "start" : [ "subtract", 2, "year"],
    	        "end" : [ "today" ]
    	    },
    	    {
    	        "label" : "Last 30 years",
    	        "start" : [ "subtract", 30, "year" ],
    	        "end" : [ "today" ]
    	    }
    	]
    }
  3. Add the visualization tag to your HTML page.