示例
Calendar 校验
日历控件防止用户选择超出由 min 和 max 属性确定的范围之外的值.
然而，在许多情况下，范围内的所有日期并不是有效的。 为了处理这些情况，Calendar控件具有一个 itemValidator 属性。 此属性表示将日期作为参数的函数，如果日期对于选择有效，则返回true，否则返回false.
下面的日历演示了这一点。 它阻止用户在周末和假期选择日期:
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getHolidays } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let holidays = getHolidays();
//
// the calendar
let theCalendar = new input.Calendar('#theCalendar', {
valueChanged: () => showCurrentDate(),
formatItem: (sender, e) => {
// apply styles to weekends and holidays
let weekday = e.data.getDay(), holiday = getHoliday(e.data);
//
wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
e.item.title = holiday || '';
},
itemValidator: (date) => {
return (date.getDay() % 6 != 0) && !getHoliday(date);
}
});
//
// show the currently selected date
function showCurrentDate() {
let el = document.querySelector('#theCalendarOutput');
el.textContent = wijmo.Globalize.format(theCalendar.value, 'D');
}
showCurrentDate();
//
function getHoliday(date) {
let day = date.getDate(), month = date.getMonth() + 1, holiday = holidays[month + '/' + day];
//
if (!holiday) {
let weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1;
holiday = holidays[month + '/' + weekNum + '/' + weekDay];
}
//
return holiday;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Calendar Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<input id="theCalendar">
<div>
The current date is <b><span id="theCalendarOutput"></span></b>.
</div>
</div>
</body>
</html>
export function getHolidays() {
return {
'1/1': 'New Year\'s Day',
'6/14': 'Flag Day',
'7/4': 'Independence Day',
'11/11': 'Veteran\'s Day',
'12/25': 'Christmas Day',
'1/3/1': 'Martin Luther King\'s Birthday',
'2/3/1': 'Washington\'s Birthday',
'5/3/6': 'Armed Forces Day',
'9/1/1': 'Labor Day',
'10/2/1': 'Columbus Day',
'11/4/4': 'Thanksgiving Day' // fourth Thursday in November
};
}
.wj-calendar {
max-width: 21em;
}
.wj-calendar .wj-header {
color: white;
background: #808080;
}
.wj-calendar .date-holiday:not(.wj-state-selected) {
font-weight: bold;
color: #008f22;
background: #f0fff0;
outline: 2pt solid #008f22;
}
.wj-calendar .date-weekend:not(.wj-state-selected) {
background-color: #d8ffa6;
}
body {
margin-bottom: 36px;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
//
import { Component, enableProdMode, NgModule, Inject } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
private _holidays: { [key: string]: string };
//
constructor(@Inject(DataService) private dataService: DataService) {
this._holidays = dataService.getHolidays();
}
//
formatItem(e: input.FormatItemEventArgs) {
// apply styles to weekends and holidays
let weekday = e.data.getDay(),
holiday = this._getHoliday(e.data);
//
wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
e.item.title = holiday || '';
}
//
validator = (date: Date) => {
return (date.getDay() % 6 != 0) && !this._getHoliday(date);
}
//
// gets the holiday for a given date
private _getHoliday(date: Date) {
let day = date.getDate(),
month = date.getMonth() + 1,
holiday = this._holidays[month + '/' + day];
//
if (!holiday) {
let weekDay = date.getDay(),
weekNum = Math.floor((day - 1) / 7) + 1;
holiday = this._holidays[month + '/' + weekNum + '/' + weekDay];
}
//
return holiday;
}
}
//
@NgModule({
imports: [WjInputModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Calendar Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<wj-calendar #theCalendar (formatItem)="formatItem($event)" [itemValidator]="validator">
</wj-calendar>
<div>
The current date is <b>{{ theCalendar.value | date:'fullDate'}}</b>.
</div>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
getHolidays() {
return {
'1/1': 'New Year\'s Day',
'6/14': 'Flag Day',
'7/4': 'Independence Day',
'11/11': 'Veteran\'s Day',
'12/25': 'Christmas Day',
'1/3/1': 'Martin Luther King\'s Birthday', // third Monday in January
'2/3/1': 'Washington\'s Birthday', // third Monday in February
'5/3/6': 'Armed Forces Day', // third Saturday in May
'9/1/1': 'Labor Day', // first Monday in September
'10/2/1': 'Columbus Day', // second Monday in October
'11/4/4': 'Thanksgiving Day' // fourth Thursday in November
};
}
}
.wj-calendar {
max-width: 21em;
}
.wj-calendar .wj-header {
color: white;
background: #808080;
}
.wj-calendar .date-holiday:not(.wj-state-selected) {
font-weight: bold;
color: #008f22;
background: #f0fff0;
outline: 2pt solid #008f22;
}
.wj-calendar .date-weekend:not(.wj-state-selected) {
background-color: #d8ffa6;
}
body {
margin-bottom: 36px;
}
<template>
<div class="container-fluid">
<wj-calendar :initialized="initCalendar" :formatItem="formatItem" :itemValidator="validator">
</wj-calendar>
<div>
The current date is <b>{{ theCalendar.value | formatDate }}</b>.
</div>
</div>
</template>
<script>
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.input';
import { getHolidays } from './data'
let App = Vue.extend({
name: 'app',
data: function () {
return {
theCalendar: {},
holidays: getHolidays()
}
},
methods: {
initCalendar: function(calendar){
this.theCalendar = calendar;
},
formatItem: function(s,e) {
// apply styles to weekends and holidays
let weekday = e.data.getDay(),
holiday = this._getHoliday(e.data);
wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
e.item.title = holiday || '';
},
validator: function(date) {
return (date.getDay() % 6 != 0) && !this._getHoliday(date);
},
// gets the holiday for a given date
_getHoliday: function(date) {
let day = date.getDate(),
month = date.getMonth() + 1,
holiday = this.holidays[month + '/' + day];
//
if (!holiday) {
let weekDay = date.getDay(),
weekNum = Math.floor((day - 1) / 7) + 1;
holiday = this.holidays[month + '/' + weekNum + '/' + weekDay];
}
//
return holiday;
}
},
filters: {
formatDate: function(time) {
return wijmo.Globalize.format(time, 'D');
}
}
})
let vm = new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
.container-fluid .wj-calendar {
max-width: 21em;
}
.container-fluid .wj-calendar .wj-header {
color: white;
background: #808080;
}
.container-fluid .wj-calendar .date-holiday:not(.wj-state-selected) {
font-weight: bold;
color: #008f22;
background: #f0fff0;
outline: 2pt solid #008f22;
}
.container-fluid .wj-calendar .date-weekend:not(.wj-state-selected) {
background-color: #d8ffa6;
}
body {
margin-bottom: 36px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Calendar Validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
export function getHolidays() {
return {
'1/1': 'New Year\'s Day',
'6/14': 'Flag Day',
'7/4': 'Independence Day',
'11/11': 'Veteran\'s Day',
'12/25': 'Christmas Day',
'1/3/1': 'Martin Luther King\'s Birthday',
'2/3/1': 'Washington\'s Birthday',
'5/3/6': 'Armed Forces Day',
'9/1/1': 'Labor Day',
'10/2/1': 'Columbus Day',
'11/4/4': 'Thanksgiving Day' // fourth Thursday in November
};
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wijmo from '@grapecity/wijmo';
import * as wjInput from '@grapecity/wijmo.react.input';
import { getHolidays } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this._holidays = getHolidays();
this.state = {
value: null
};
}
;
render() {
return <div className="container-fluid">
<wjInput.Calendar initialized={this._initCalendar.bind(this)} formatItem={this._formatItem.bind(this)} itemValidator={this._validator.bind(this)} valueChanged={this._onValueChanged.bind(this)}>
</wjInput.Calendar>
<div>
The current date is <b>{this._formatDate(this.state.value)}</b>.
</div>
</div>;
}
_initCalendar(sender) {
this.setState({ value: sender.value });
}
_formatItem(sender, e) {
// apply styles to weekends and holidays
let weekday = e.data.getDay(), holiday = this._getHoliday(e.data);
wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
e.item.title = holiday || '';
}
_validator(date) {
return (date.getDay() % 6 != 0) && !this._getHoliday(date);
}
// gets the holiday for a given date
_getHoliday(date) {
let day = date.getDate(), month = date.getMonth() + 1, holiday = this._holidays[month + '/' + day];
//
if (!holiday) {
let weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1;
holiday = this._holidays[month + '/' + weekNum + '/' + weekDay];
}
//
return holiday;
}
_formatDate(time) {
return wijmo.Globalize.format(time, 'D');
}
_onValueChanged(sender) {
this.setState({ value: sender.value });
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.wj-calendar {
max-width: 21em;
}
.wj-calendar .wj-header {
color: white;
background: #808080;
}
.wj-calendar .date-holiday:not(.wj-state-selected) {
font-weight: bold;
color: #008f22;
background: #f0fff0;
outline: 2pt solid #008f22;
}
.wj-calendar .date-weekend:not(.wj-state-selected) {
background-color: #d8ffa6;
}
body {
margin-bottom: 36px;
}
export function getHolidays() {
return {
'1/1': 'New Year\'s Day',
'6/14': 'Flag Day',
'7/4': 'Independence Day',
'11/11': 'Veteran\'s Day',
'12/25': 'Christmas Day',
'1/3/1': 'Martin Luther King\'s Birthday',
'2/3/1': 'Washington\'s Birthday',
'5/3/6': 'Armed Forces Day',
'9/1/1': 'Labor Day',
'10/2/1': 'Columbus Day',
'11/4/4': 'Thanksgiving Day' // fourth Thursday in November
};
}
USA - International
Japan
South
Korea