How to use @blueprintjs/datetime - 10 common examples

onChange={handleChange}
        onBlur={handleBlur}
        value={values.gradingSize.toString()}
      />
    

    <div>
      
        
      
      
        </div>

value={values.startTime}
        />

render() {
    const { props } = this;
    const { onChange, ...inputProps } = props.input;
    return (
      
        {formatDateTimezoneOffset(new Date())}}
          timePrecision={TimePrecision.MINUTE}
          canClearSelection={false}
          closeOnSelection={false}
          maxDate={new Date(4102444800000)}
          timePickerProps={{ showArrowButtons: true }}
          onChange={onChange}
          inputProps={{ name: inputProps.name }}
          {...inputProps}
        />
        
      
    );
  }

const DateTimeInput = ({ date, isAllDay, onSelect }) => {
  const minDateTime = new Date()
  const formatDate = value =>
    format(value, `MM/DD/YYYY${isAllDay ? '' : ' hh:mm a'}`)
  const timePrecision = isAllDay ? undefined : TimePrecision.MINUTE

  return (
    <div>
       new Date(str)}
        timePrecision={timePrecision}
        timePickerProps={{ useAmPm: true }}
        popoverProps={{ position: Position.TOP }}
        onChange={onSelect}
        value={date}</div>

export const PrecisionSelect: React.SFC = props => (
    <label>
        {props.label || "Precision"}
        
            {props.allowNone &amp;&amp; <option value="none">None</option>}
            <option value="{TimePrecision.MINUTE}">Minute</option>
            <option value="{TimePrecision.SECOND}">Second</option>
            <option value="{TimePrecision.MILLISECOND}">Millisecond</option>
        
    </label>
);

enum MinimumHours {
    NONE = 0,
    SIX_PM = 18,
}

enum MaximumHours {
    NONE = 0,
    SIX_PM = 18,
    NINE_PM = 21,
    TWO_AM = 2,
}

export class TimePickerExample extends React.PureComponent {
    public state = {
        disabled: false,
        precision: TimePrecision.MINUTE,
        selectAllOnFocus: false,
        showArrowButtons: false,
        useAmPm: false,
    };

    private handlePrecisionChange = handleStringChange((precision: TimePrecision) => this.setState({ precision }));

    public render() {
        return (
            
                
            
        );
    }

    protected renderOptions() {

public render() {
        const { enableTimePicker, format, range, ...spreadProps } = this.state;
        const timePrecision = enableTimePicker ? TimePrecision.MINUTE : undefined;
        return (
            
                
                
            
        );
    }

export const PrecisionSelect: React.SFC = props => (
    <label>
        {props.label || "Precision"}
        
            {props.allowNone &amp;&amp; <option value="none">None</option>}
            <option value="{TimePrecision.MINUTE}">Minute</option>
            <option value="{TimePrecision.SECOND}">Second</option>
            <option value="{TimePrecision.MILLISECOND}">Millisecond</option>
        
    </label>
);

export const PrecisionSelect: React.SFC = props => (
    <label>
        {props.label || "Precision"}
        
            {props.allowNone &amp;&amp; <option value="none">None</option>}
            <option value="{TimePrecision.MINUTE}">Minute</option>
            <option value="{TimePrecision.SECOND}">Second</option>
            <option value="{TimePrecision.MILLISECOND}">Millisecond</option>
        
    </label>
);