DateRangeInputComponent

Description

Renders a date range input box to collect user input from.

Options

name: The name of the component
type: dateRangeInputComponent
listeners: Array - Parameters who this component will react to
parameter: Array - Variables where the input is stored
earliestDate: Date Range Input earliest date
latestDate: Date Range Input latest date
leftOffset: Date Range Input left offset
topOffset: Date Range Input top offset
singleInput: True will render a single input; False will use 2 input boxes
inputSeparator: This separator will be used between the fields
canClickOutsidePopup: If true will not close DateRangeInput popup when the user clicks outside of it, false otherwise
htmlObject: Id of the component (usually a div or a span tag) to be replaced by the result
refreshPeriod: Time in seconds for this component to refresh. Default is 0 (disabled)
onOpenEvent: Function - Function to be called when the 'onOpen' event is triggered
onCloseEvent: Function - Function to be called when the 'onClose' event is triggered
executeAtStart: True to execute the component at start, false otherwise
tooltip: Tooltip to be displayed when mouse hovers
preExecution: Function - Function to be called before the component is executed
postExecution: Function - Function to be called after the component is executed
preChange: Function(date1, date2) - Function to be called before the component is changed
postChange: Function(date1, date2) - Function to be called after the component is changed

require(['cdf/Dashboard.Blueprint', 'cdf/components/DateRangeInputComponent'],
  function(Dashboard, DateRangeInputComponent) {

var dashboard = new Dashboard();
  dashboard.addParameter("startDate", "2014-03-10");
  dashboard.addParameter("endDate", "2014-09-02");

dashboard.addComponent(new DateRangeInputComponent({
    name: "myInput",
    type: "dateRangeInputComponent",
    parameter: ["startDate","endDate"],
    singleInput: false,
    inputSeparator: "<br />",
    earliestDate: "-1years",
    latestDate: "+1years",
    leftOffset: 100,
    topOffset: 0,
    canClickOutsidePopup: true,
    htmlObject: "sampleObject",
    onOpenEvent: function() {
      this.placeholder("input").css('border', '2px solid red'); 
    },
    onCloseEvent: function() {
      this.placeholder("input").css('border', '1px solid black'); 
    },
    executeAtStart: true,
    tooltip: "Click me to select a date",
    postChange: function(date1, date2) {
      alert("You chose from " + date1 + " to " + date2);
    }
  }));
  dashboard.init();
});