jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
188 lines (187 loc) • 5.38 kB
JavaScript
JS.imports([
'$jsfx.daterangepicker'
]).then(() => {
new DateRangePicker({
id: 'txt1',
placeholder: 'Choose dates limited in [2019/12/01, 2019/12/15]',
minDate: '2019/12/01',
maxDate: '2019/12/15',
iniValue: ['2019/12/01', '2019/12/15']
});
new DateRangePicker({
id: 'txt2',
placeholder: 'Choose dates + times',
minutesPlus: true
});
new DateRangePicker({
id: 'txt3',
placeholder: 'Prechoose from 2019/07/01 to Today',
iniValue: ['2019/07/01', null]
});
new DateRangePicker({
id: 'txt4',
placeholder: 'Prechoose from Today to 2030/07/01',
iniValue: [null, '2030/07/01']
});
new DateRangePicker({
id: 'txt5',
placeholder: 'autofocus',
autofocus: true
});
new DateRangePicker({
id: 'txt6',
placeholder: 'has no autoclear when readonly',
readonly: true
});
new DateRangePicker({
id: 'fmt1',
title: 'YY MM DD',
format: 'YY MM DD',
iniValue: ['19 07 01', '19 08 01']
});
new DateRangePicker({
id: 'fmt2',
title: 'M/D/YYYY HH:mm To M/D/YYYY HH:mm',
format: 'M/D/YYYY HH:mm',
minutesPlus: true,
iniValue: ['7/1/2019 10:01', '8/1/2019 22:12'],
dateSeparator: ' To '
});
new DateRangePicker({
id: 'fmt3',
title: 'M/D/YYYY A hh:mm:ss',
format: 'M/D/YYYY A hh:mm:ss',
secondsPlus: true,
iniValue: ['7/1/2019 AM 10:01:23', '8/1/2019 PM 10:12:59'],
dateSeparator: '-'
});
var today = new Date(), ranges = {
'Today': [today, today],
'Yesterday': [today.clone().add(-1, 'd'), today.clone().add(-1, 'd')],
'Last 7 Days': [today.clone().add(-6, 'd'), today],
'Last 30 Days': [today.clone().add(-29, 'd'), today],
'This Month': [today.getFirstDayOfMonth(), today.getLastDayOfMonth()],
'Last Month': [today.clone().add(-1, 'M').getFirstDayOfMonth(), today.clone().add(-1, 'M').getLastDayOfMonth()]
};
new DateRangePicker({
id: 'ran1',
ranges: ranges
});
new DateRangePicker({
id: 'ran2',
ranges: ranges,
showCalendars: false
});
new DateRangePicker({
id: 'sta1',
title: 'Disabled',
iniValue: ['2019/07/01', '2019/08/01'],
disabled: true
});
new DateRangePicker({
id: 'sty1',
placeholder: 'Icon + Buttons',
colorMode: ColorMode.dark,
leftAddon: {
text: 'PREV',
colorMode: ColorMode.dark
},
rightAddon: {
text: 'NEXT',
colorMode: ColorMode.dark
},
innerIcon: 'fa fa-calendar'
});
new DateRangePicker({
id: 'sty2',
placeholder: 'Icon + Buttons(Pill)',
colorMode: ColorMode.accent,
faceMode: [LineInputFaceMode.shadow, LineInputFaceMode.pill],
leftAddon: {
colorMode: ColorMode.info,
text: 'PREV'
},
rightAddon: {
colorMode: ColorMode.accent,
text: 'NEXT'
},
innerIcon: 'fa fa-calendar'
});
var dropMenuItems = [{
caption: 'Classes',
text: 'JS.fx.Widget'
}, {
text: 'JS.fx.FormWidget'
}, {
text: 'JS.fx.Input'
}, {
text: 'JS.fx.DateRangePicker'
}];
new DateRangePicker({
id: 'sty3',
placeholder: 'Right DropDown Buttons(Pill)',
colorMode: ColorMode.accent,
faceMode: [LineInputFaceMode.shadow, LineInputFaceMode.pill],
leftAddon: {
colorMode: ColorMode.info,
text: 'LEFT'
},
rightAddon: {
colorMode: ColorMode.accent,
text: 'Inheritances',
dropMenu: {
dir: 'right',
items: dropMenuItems
}
}
});
new DateRangePicker({
id: 'sty4',
placeholder: 'Left DropDown Buttons(Round)',
colorMode: ColorMode.accent,
faceMode: [LineInputFaceMode.shadow, LineInputFaceMode.round],
leftAddon: {
colorMode: ColorMode.info,
text: 'Inheritances',
dropMenu: {
dir: 'left',
items: dropMenuItems
}
},
rightAddon: {
colorMode: ColorMode.accent,
text: 'RIGHT'
}
});
new DateRangePicker({
id: 'val1',
autoValidate: true,
title: 'Require(*)',
validators: [{
name: 'required',
message: 'Must not be Empty!'
}],
validateMode: {
mode: 'tip',
place: 'top'
}
});
new DateRangePicker({
id: 'val2',
autoValidate: true,
title: 'Must be 2019/12/31',
validators: [{
name: 'custom',
validate: (val) => {
if (!val)
return false;
return val[0] == '2019/12/31' && val[0] == val[1];
},
message: 'Must be [2019/12/31,2019/12/31]'
}],
validateMode: {
mode: 'tip',
place: 'bottom'
}
});
});