Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
import DateRangeSelect from 'svelte-date-range-select@1.0.4';

const name = 'createdDate';
const heading = 'Created Date';

// this limits the HTML5 date picker end date - e.g. today is used here
const endDateMax = new Date();

// this limits the HTML5 date picker's start date - e.g. 3 years is select here
const startDateMin = new Date(
new Date().setFullYear(endDateMax.getFullYear(), endDateMax.getMonth() - 36)
);

// option to override the defaults - change to other language, below are the default values
const labels = {
notSet: 'not set',
greaterThan: 'greater than',
lessThan: 'less than',
range: 'range',
day: 'day',
days: 'days',
apply: 'ok'
}

// form post ids
const startDateId = 'start_date_id'
const endDateId = 'end_date_id'

// executed when the user selects the range by clicking the apply button (with the fa-check icon)
function handleApplyDateRange(data){
console.log(data.detail)
// e.g. will return an object
// {
// startDate: 2000-12-01,
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */