diff --git a/dist/react/DatePick.jsx b/dist/react/DatePick.jsx
index bfb38e5e8954aa0e274479d023da6e911ba51f15..6ab486da52f63ce345724aa48d15778c46ec2209 100644
--- a/dist/react/DatePick.jsx
+++ b/dist/react/DatePick.jsx
@@ -38,7 +38,7 @@ var DatePick = (function (_super) {
         });
     };
     DatePick.prototype.render = function () {
-        return <span>
+        return <span className="date-pick">
             <label>{this.props.label}</label>
             <input id={this.props.id || this.defaultId} type="text" style={{ margin: "0 10px 0 5px", width: '73px', textAlign: 'center' }} defaultValue={dateFormat_1.dateToString(this.props.initialDate || new Date())} readOnly={true}/>
         </span>;
diff --git a/dist/react/DatePick.jsx.map b/dist/react/DatePick.jsx.map
index fb8b691f3dcdedc6350730a676105c8f74e82f8d..68695071978be7c1d1f5609f3b501768145bb56e 100644
--- a/dist/react/DatePick.jsx.map
+++ b/dist/react/DatePick.jsx.map
@@ -1 +1 @@
-{"version":3,"file":"DatePick.jsx","sourceRoot":"","sources":["../../src/react/DatePick.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAGH,iDAAsC;AACtC,0BAA6B;AAC7B,qBAAmB;AACnB,6CAAwC;AAExC,mDAAkD;AAElD;;GAEG;AACH;IAA8B,4BAAqG;IAG/H,kBAAY,KAAK,EAAE,OAAO;QAA1B,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAExB;QADG,KAAI,CAAC,SAAS,GAAG,kBAAQ,EAAE,CAAC;;IAChC,CAAC;IAED,oCAAiB,GAAjB;QAAA,iBAUC;QATG,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAErD,GAAG,CAAC,UAAU,CACV;YACI,QAAQ,EAAE;gBACN,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;YACjC,CAAC;SACJ,CACJ,CAAC;IACN,CAAC;IAED,yBAAM,GAAN;QACI,MAAM,CAAC,CAAC,IAAI,CACR;YAAA,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAChC;YAAA,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAChD,KAAK,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC,CACpE,YAAY,CAAC,CAAC,yBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC,CACjE,QAAQ,CAAC,CAAC,IAAI,CAAC,EAE1B;QAAA,EAAE,IAAI,CAAC,CAAA;IACX,CAAC;IACL,eAAC;AAAD,CAAC,AA9BD,CAA8B,qBAAK,CAAC,SAAS,GA8B5C;AA9BY,4BAAQ;AAgCrB,kBAAe,QAAQ,CAAC","sourcesContent":["/**\r\n * Created by glenn on 6/14/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactAndRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\nimport {dateToString} from './helpers/dateFormat';\r\n\r\n/**\r\n * params label, id, initialDate, change callback with value as string\r\n */\r\nexport class DatePick extends React.Component<{label: string, id?: string, initialDate?: Date, change: (val: string) => any}, null> {\r\n    defaultId: string;\r\n\r\n    constructor(props, context){\r\n        super(props, context);\r\n        this.defaultId = makeGuid();\r\n    }\r\n\r\n    componentDidMount() {\r\n        let $el = $('#' + (this.props.id || this.defaultId));\r\n\r\n        $el.datepicker(\r\n            {\r\n                onSelect: () => {\r\n                    this.props.change($el.val());\r\n                }\r\n            }\r\n        );\r\n    }\r\n\r\n    render() {\r\n        return <span>\r\n            <label>{this.props.label}</label>\r\n            <input id={this.props.id || this.defaultId} type=\"text\"\r\n                   style={{margin: \"0 10px 0 5px\", width: '73px', textAlign: 'center'}}\r\n                   defaultValue={dateToString(this.props.initialDate || new Date())}\r\n                   readOnly={true}\r\n            />\r\n        </span>\r\n    }\r\n}\r\n\r\nexport default DatePick;"]}
\ No newline at end of file
+{"version":3,"file":"DatePick.jsx","sourceRoot":"","sources":["../../src/react/DatePick.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAGH,iDAAsC;AACtC,0BAA6B;AAC7B,qBAAmB;AACnB,6CAAwC;AAExC,mDAAkD;AAElD;;GAEG;AACH;IAA8B,4BAAqG;IAG/H,kBAAY,KAAK,EAAE,OAAO;QAA1B,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAExB;QADG,KAAI,CAAC,SAAS,GAAG,kBAAQ,EAAE,CAAC;;IAChC,CAAC;IAED,oCAAiB,GAAjB;QAAA,iBAUC;QATG,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAErD,GAAG,CAAC,UAAU,CACV;YACI,QAAQ,EAAE;gBACN,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;YACjC,CAAC;SACJ,CACJ,CAAC;IACN,CAAC;IAED,yBAAM,GAAN;QACI,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAC9B;YAAA,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAChC;YAAA,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAChD,KAAK,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC,CACpE,YAAY,CAAC,CAAC,yBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC,CACjE,QAAQ,CAAC,CAAC,IAAI,CAAC,EAE1B;QAAA,EAAE,IAAI,CAAC,CAAA;IACX,CAAC;IACL,eAAC;AAAD,CAAC,AA9BD,CAA8B,qBAAK,CAAC,SAAS,GA8B5C;AA9BY,4BAAQ;AAgCrB,kBAAe,QAAQ,CAAC","sourcesContent":["/**\r\n * Created by glenn on 6/14/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactAndRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\nimport {dateToString} from './helpers/dateFormat';\r\n\r\n/**\r\n * params label, id, initialDate, change callback with value as string\r\n */\r\nexport class DatePick extends React.Component<{label: string, id?: string, initialDate?: Date, change: (val: string) => any}, null> {\r\n    defaultId: string;\r\n\r\n    constructor(props, context){\r\n        super(props, context);\r\n        this.defaultId = makeGuid();\r\n    }\r\n\r\n    componentDidMount() {\r\n        let $el = $('#' + (this.props.id || this.defaultId));\r\n\r\n        $el.datepicker(\r\n            {\r\n                onSelect: () => {\r\n                    this.props.change($el.val());\r\n                }\r\n            }\r\n        );\r\n    }\r\n\r\n    render() {\r\n        return <span className=\"date-pick\">\r\n            <label>{this.props.label}</label>\r\n            <input id={this.props.id || this.defaultId} type=\"text\"\r\n                   style={{margin: \"0 10px 0 5px\", width: '73px', textAlign: 'center'}}\r\n                   defaultValue={dateToString(this.props.initialDate || new Date())}\r\n                   readOnly={true}\r\n            />\r\n        </span>\r\n    }\r\n}\r\n\r\nexport default DatePick;"]}
\ No newline at end of file
diff --git a/dist/react/DateRange.jsx b/dist/react/DateRange.jsx
index 03bb98dec03117a8b8d0be979a97abe428d693ce..f9df7d310cf5117c5f587977567cb9dfbd017da4 100644
--- a/dist/react/DateRange.jsx
+++ b/dist/react/DateRange.jsx
@@ -98,7 +98,7 @@ var DateRange = (function (_super) {
     };
     DateRange.prototype.render = function () {
         var _this = this;
-        return <div>
+        return <div className="date-range">
             <DatePick_1.default id={this.startId} label="Start" initialDate={this.start} change={function (s) { _this.setStart(s); }}/>
             <DatePick_1.default id={this.endId} label="End" initialDate={this.end} change={function (s) { _this.setEnd(s); }}/>
         </div>;
diff --git a/dist/react/DateRange.jsx.map b/dist/react/DateRange.jsx.map
index e20b31302f3aed49c511151226cb362a033f852d..c8aabcfbf5298d4d83a0921cdc7d6af30152bfdb 100644
--- a/dist/react/DateRange.jsx.map
+++ b/dist/react/DateRange.jsx.map
@@ -1 +1 @@
-{"version":3,"file":"DateRange.jsx","sourceRoot":"","sources":["../../src/react/DateRange.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAEH,iDAAsC;AAEtC,qBAAmB;AACnB,6CAAwC;AACxC,8CAAgD;AAChD,uCAAkC;AAElC,sBAAsB,GAAgB;IAClC,EAAE,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,CAAC;QAChB,MAAM,CAAC,GAAW,CAAC;IACvB,CAAC;IAAC,IAAI,CAAC,CAAC;QACJ,MAAM,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;AACL,CAAC;AAGD;IAA+B,6BAOvB;IAWJ,mBAAY,KAAK,EAAE,OAAO;QAA1B,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAmBxB;QA9BD,aAAO,GAAG,kBAAQ,EAAE,CAAC;QACrB,WAAK,GAAG,kBAAQ,EAAE,CAAC;QAYf,KAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpD,KAAI,CAAC,QAAQ,GAAG,OAAO,KAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC;QAEnG,EAAE,CAAC,CAAC,KAAI,CAAC,QAAQ,GAAG,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YAChC,MAAM,+DAA+D,CAAC;QAC1E,CAAC;QAED,EAAE,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA,CAAC;YACvB,KAAI,CAAC,GAAG,GAAG,YAAY,CAAC,KAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;QAClD,CAAC;QAAC,IAAI,CAAC,CAAC;YACJ,KAAI,CAAC,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;QAC1B,CAAC;QAED,KAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3B,KAAI,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,KAAI,CAAC,GAAG,CAAC,CAAC;QAChC,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,KAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,KAAI,CAAC,UAAU,EAAE,CAAC;;IACtB,CAAC;IAED,8BAAU,GAAV;QACI,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IACvG,CAAC;IAGD,qCAAiB,GAAjB;QACI,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAqB,CAAC;QAC5E,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAqB,CAAC;QACxE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,sBAAI,gCAAS;aAAb;YACI,MAAM,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QACxE,CAAC;;;OAAA;IAED,4BAAQ,GAAR,UAAS,CAAS;QACd,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,UAAU,EAAE,CAAC;QAElB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YACjB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC/B,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzD,CAAC;YAAC,IAAI,CAAC,CAAC;gBACJ,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC7D,CAAC;YAED,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACrD,IAAI,CAAC,UAAU,EAAE,CAAC;QACtB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,0BAAM,GAAN,UAAO,CAAS;QACZ,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACnC,IAAI,CAAC,UAAU,EAAE,CAAC;QAElB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YACjB,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEhC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC/B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7D,CAAC;YAAC,IAAI,CAAC,CAAC;gBACJ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACjE,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzD,IAAI,CAAC,UAAU,EAAE,CAAC;QACtB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,0BAAM,GAAN;QAAA,iBAKC;QAJG,MAAM,CAAC,CAAC,GAAG,CACP;YAAA,CAAC,kBAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,UAAC,CAAC,IAAM,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA,CAAA,CAAC,CAAC,EACrG;YAAA,CAAC,kBAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,UAAC,CAAC,IAAM,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,CAAA,CAAC,CAAC,EACjG;QAAA,EAAE,GAAG,CAAC,CAAC;IACX,CAAC;IACL,gBAAC;AAAD,CAAC,AAnGD,CAA+B,qBAAK,CAAC,SAAS,GAmG7C;AAnGY,8BAAS","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\nimport {React} from './reactAndRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\nimport * as fixDate from './helpers/dateFormat';\r\nimport DatePick from './DatePick';\r\n\r\nfunction stringToDate(dte: string|Date){\r\n    if (dte['getTime']){\r\n        return dte as Date;\r\n    } else {\r\n        return new Date(dte);\r\n    }\r\n}\r\n\r\n\r\nexport class DateRange extends React.Component<{\r\n    maxRange: number,\r\n    callback: (start: string|Date, end: string|Date) => any,\r\n    minRange?: number,\r\n    maxDate?: string|Date,\r\n    minDate?: string|Date\r\n    initialEnd?: string|Date\r\n}, null> {\r\n    startId = makeGuid();\r\n    endId = makeGuid();\r\n    startInput: HTMLInputElement;\r\n    endInput: HTMLInputElement;\r\n    start: Date;\r\n    end: Date;\r\n    maxRange: number;\r\n    minRange: number;\r\n    numDays: number;\r\n\r\n    constructor(props, context) {\r\n        super(props, context);\r\n\r\n        this.maxRange = Math.round(this.props.maxRange) - 1;\r\n        this.minRange = typeof this.props['minRange'] == 'number' ? Math.round(this.props['minRange']) : 1;\r\n\r\n        if (this.minRange > this.maxRange) {\r\n            throw \"DateRange component: Max range must be greater than min range\";\r\n        }\r\n\r\n        if (this.props.initialEnd){\r\n            this.end = stringToDate(this.props.initialEnd)\r\n        } else {\r\n            this.end = new Date();\r\n        }\r\n\r\n        this.end.setHours(0, 0, 0);\r\n        this.start = new Date(this.end);\r\n        this.start.setDate(this.start.getDate() - this.maxRange);\r\n        this.setNumDays();\r\n    }\r\n\r\n    setNumDays() {\r\n        this.numDays = Math.round((this.end.getTime() - this.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;\r\n    }\r\n\r\n\r\n    componentDidMount() {\r\n        this.startInput = document.getElementById(this.startId) as HTMLInputElement;\r\n        this.endInput = document.getElementById(this.endId) as HTMLInputElement;\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    get needReset(): boolean {\r\n        return this.numDays > this.maxRange || this.numDays < this.minRange;\r\n    }\r\n\r\n    setStart(s: string) {\r\n        this.start = fixDate.stringToDate(s);\r\n        this.setNumDays();\r\n\r\n        if (this.needReset) {\r\n            this.end = new Date(this.start);\r\n\r\n            if (this.numDays > this.maxRange) {\r\n                this.end.setDate(this.end.getDate() + this.maxRange);\r\n            } else {\r\n                this.end.setDate(this.end.getDate() + this.minRange - 1);\r\n            }\r\n\r\n            this.endInput.value = fixDate.dateToString(this.end);\r\n            this.setNumDays();\r\n        }\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    setEnd(s: string) {\r\n        this.end = fixDate.stringToDate(s);\r\n        this.setNumDays();\r\n\r\n        if (this.needReset) {\r\n            this.start = new Date(this.end);\r\n\r\n            if (this.numDays > this.maxRange) {\r\n                this.start.setDate(this.start.getDate() - this.maxRange);\r\n            } else {\r\n                this.start.setDate(this.start.getDate() - this.minRange + 1);\r\n            }\r\n\r\n            this.startInput.value = fixDate.dateToString(this.start);\r\n            this.setNumDays();\r\n        }\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    render() {\r\n        return <div>\r\n            <DatePick id={this.startId} label=\"Start\" initialDate={this.start} change={(s) => {this.setStart(s)}}/>\r\n            <DatePick id={this.endId} label=\"End\" initialDate={this.end} change={(s) => {this.setEnd(s)}}/>\r\n        </div>;\r\n    }\r\n}\r\n"]}
\ No newline at end of file
+{"version":3,"file":"DateRange.jsx","sourceRoot":"","sources":["../../src/react/DateRange.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\nimport {React} from './reactAndRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\nimport * as fixDate from './helpers/dateFormat';\r\nimport DatePick from './DatePick';\r\n\r\nfunction stringToDate(dte: string|Date){\r\n    if (dte['getTime']){\r\n        return dte as Date;\r\n    } else {\r\n        return new Date(dte);\r\n    }\r\n}\r\n\r\n\r\nexport class DateRange extends React.Component<{\r\n    maxRange: number,\r\n    callback: (start: string|Date, end: string|Date) => any,\r\n    minRange?: number,\r\n    maxDate?: string|Date,\r\n    minDate?: string|Date\r\n    initialEnd?: string|Date\r\n}, null> {\r\n    startId = makeGuid();\r\n    endId = makeGuid();\r\n    startInput: HTMLInputElement;\r\n    endInput: HTMLInputElement;\r\n    start: Date;\r\n    end: Date;\r\n    maxRange: number;\r\n    minRange: number;\r\n    numDays: number;\r\n\r\n    constructor(props, context) {\r\n        super(props, context);\r\n\r\n        this.maxRange = Math.round(this.props.maxRange) - 1;\r\n        this.minRange = typeof this.props['minRange'] == 'number' ? Math.round(this.props['minRange']) : 1;\r\n\r\n        if (this.minRange > this.maxRange) {\r\n            throw \"DateRange component: Max range must be greater than min range\";\r\n        }\r\n\r\n        if (this.props.initialEnd){\r\n            this.end = stringToDate(this.props.initialEnd)\r\n        } else {\r\n            this.end = new Date();\r\n        }\r\n\r\n        this.end.setHours(0, 0, 0);\r\n        this.start = new Date(this.end);\r\n        this.start.setDate(this.start.getDate() - this.maxRange);\r\n        this.setNumDays();\r\n    }\r\n\r\n    setNumDays() {\r\n        this.numDays = Math.round((this.end.getTime() - this.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;\r\n    }\r\n\r\n\r\n    componentDidMount() {\r\n        this.startInput = document.getElementById(this.startId) as HTMLInputElement;\r\n        this.endInput = document.getElementById(this.endId) as HTMLInputElement;\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    get needReset(): boolean {\r\n        return this.numDays > this.maxRange || this.numDays < this.minRange;\r\n    }\r\n\r\n    setStart(s: string) {\r\n        this.start = fixDate.stringToDate(s);\r\n        this.setNumDays();\r\n\r\n        if (this.needReset) {\r\n            this.end = new Date(this.start);\r\n\r\n            if (this.numDays > this.maxRange) {\r\n                this.end.setDate(this.end.getDate() + this.maxRange);\r\n            } else {\r\n                this.end.setDate(this.end.getDate() + this.minRange - 1);\r\n            }\r\n\r\n            this.endInput.value = fixDate.dateToString(this.end);\r\n            this.setNumDays();\r\n        }\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    setEnd(s: string) {\r\n        this.end = fixDate.stringToDate(s);\r\n        this.setNumDays();\r\n\r\n        if (this.needReset) {\r\n            this.start = new Date(this.end);\r\n\r\n            if (this.numDays > this.maxRange) {\r\n                this.start.setDate(this.start.getDate() - this.maxRange);\r\n            } else {\r\n                this.start.setDate(this.start.getDate() - this.minRange + 1);\r\n            }\r\n\r\n            this.startInput.value = fixDate.dateToString(this.start);\r\n            this.setNumDays();\r\n        }\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    render() {\r\n        return <div className=\"date-range\">\r\n            <DatePick id={this.startId} label=\"Start\" initialDate={this.start} change={(s) => {this.setStart(s)}}/>\r\n            <DatePick id={this.endId} label=\"End\" initialDate={this.end} change={(s) => {this.setEnd(s)}}/>\r\n        </div>;\r\n    }\r\n}\r\n"]}
\ No newline at end of file
diff --git a/src/react/DatePick.tsx b/src/react/DatePick.tsx
index d6dd6c5958272b4e8499de191e9f8cd7f0b355bb..7d6da01a82ff5e2ded1a68a810af711becea65b7 100644
--- a/src/react/DatePick.tsx
+++ b/src/react/DatePick.tsx
@@ -34,7 +34,7 @@ export class DatePick extends React.Component<{label: string, id?: string, initi
     }
 
     render() {
-        return <span>
+        return <span className="date-pick">
             <label>{this.props.label}</label>
             <input id={this.props.id || this.defaultId} type="text"
                    style={{margin: "0 10px 0 5px", width: '73px', textAlign: 'center'}}
diff --git a/src/react/DateRange.tsx b/src/react/DateRange.tsx
index addebe9442467fa6c899e2d5fa43e1b6d8ed6ecb..addf5e54c9c9af60c0eba1e094e68e143ea8725f 100644
--- a/src/react/DateRange.tsx
+++ b/src/react/DateRange.tsx
@@ -112,7 +112,7 @@ export class DateRange extends React.Component<{
     }
 
     render() {
-        return <div>
+        return <div className="date-range">
             <DatePick id={this.startId} label="Start" initialDate={this.start} change={(s) => {this.setStart(s)}}/>
             <DatePick id={this.endId} label="End" initialDate={this.end} change={(s) => {this.setEnd(s)}}/>
         </div>;