Milestone

Milestone allows for the selection of a specific event date with a label. The shape of the options being passed in will determine whether a PlusMinus control appears to specify a duration, age, or some other value.

Options can also specify a milestoneDate which will be used to calculate a date based on the selected duration.

The Start component does not provide validation.

Result

Loading...

Live Editor

const options = [ { id: 'Start', defaultValue: '01/01/2000', label: 'Start (01/01/2000)', }, { id: 'ClientDeath', defaultValue: '05/01/2055', label: 'Death of client (05/01/2055)', }, { id: 'CalendarYear', defaultValue: 2050, label: 'Calendar Year', }, { id: 'ClientIs', defaultValue: 50, label: 'When client is', milestoneDate: '05/30/1980', }, ]; function Example() { const [value, setValue] = useState(); const handleChange = (payload) => { console.log('change', payload); setValue(payload); }; return <Milestone onChange={handleChange} options={options} value={value} />; } render(<Example />);

const options = [
    {
        id: 'Start',
        defaultValue: '01/01/2000',
        label: 'Start (01/01/2000)',
    },
    {
        id: 'ClientDeath',
        defaultValue: '05/01/2055',
        label: 'Death of client (05/01/2055)',
    },
    {
        id: 'CalendarYear',
        defaultValue: 2050,
        label: 'Calendar Year',
    },
    {
        id: 'ClientIs',
        defaultValue: 50,
        label: 'When client is',
        milestoneDate: '05/30/1980',
    },
];

function Example() {
    const [value, setValue] = useState();

    const handleChange = (payload) => {
        console.log('change', payload);
        setValue(payload);
    };

    return <Milestone onChange={handleChange} options={options} value={value} />;
}

render(<Example />);

Analytics

The Milestone component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Start',
	actions: {
		onChange: { type: 'START_CHANGE', payload: 'Change' },
	},
};

Props