The <fb-date-range> Component Documentation // Awes.IO

A component for selecting a period of time by choosing start and end date (time is not included). For selecting a specific date and time, please use the Date component It can be located within the <form-builder> component or used with v-model directive and can be visualized as follows:

fb-date-range

The component uses Tiny Date Range Picker internally to render calendars

Components

Example

<form-builder url="/api-url">
    <fb-date-range name="period"></fb-date>
</form-builder>

Component properties

Name	Type	Default	Description
name	`String`	`undefined`	Field identifier in the data object
id	`Number`	`undefined`	Sequence number within the <fb-multi-block> component
label-start	`String`	`'Start date'`	Text in the <label> element for 1st field
label-end	`String`	`'End date'`	Text in the <label> element for 2nd field
min	`String`, `Number`, `Object`	calculated according to yearRange prop and current date	Minimal selectable date
max	`String`, `Number`, `Object`	calculated according to yearRange prop and current date	Maximal selectable date
year-range	`Number`	`4`	Max year offset back and forth from current day, if min or max is not provided
day-offset	`Number`	`1`	Set this to 0 for Sunday. 1 is for Monday
value-start	`String`	`undefined`	Selected start date
value-end	`String`	`undefined`	Selected end date
format	`String`	'MM/DD/YYYY'	Date format for input fields
disabled	`Boolean`	`false`	Are the inputs disabled
lang	`Object`	see lang object	Language strings for current instance. Will be merged with defaults

The min and max props could be an ISO date string, timestamp, or Date object - everything that Date.parse() method accepts.

The value property could only be a date in ISO String format

Usage examples

<form-builder url="http://httpbin.org/post" disabled-dialog>

    <!-- setting min and max dates -->
    <fb-date-range name="range" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>

    <!-- disabling inputs -->
    <fb-date-range name="range-disabled" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>

</form-builder>

Lang object

AWES_CONFIG = {
    lang: {
        FORMS_DATEPICKER: {
            // here are the default values
            days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            months: [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December',
            ],
            today: 'Today',
            close: 'Close'
        }
    }
}