DatePick.tsx

/**
 * Created by glenn on 6/14/2017.
 */


import {React} from './reactAndRedux';
import $ = require('jquery');
import 'jquery-ui';
import makeGuid from '../util/makeGuid';

import {dateToString} from './helpers/dateFormat';

export interface iDatePick{
    label: string;
    id?: string;
    initialDate?: Date;
    change: (val: string) => any
}

/**
 * params label, id, initialDate, change callback with value as string
 */
export class DatePick extends React.Component<iDatePick, null> {
    defaultId: string;

    constructor(props: iDatePick, context: Object){
        super(props, context);
        this.defaultId = makeGuid();
    }

    componentDidMount() {
        let $el = $('#' + (this.props.id || this.defaultId));

        $el.datepicker(
            {
                onSelect: () => {
                    this.props.change($el.val());
                }
            }
        );
    }

    render() {
        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={dateToString(this.props.initialDate || new Date())}
                   readOnly={true}
            />
        </span>
    }
}

export default DatePick;