시간 선택 도구
시간 선택기는 스타일 속성을 사용하여 JavaScript 코드에서 정의할 수 있는 SpreadJS의 드롭다운입니다. 이 드롭다운은 개발자가 최소, 최대 및 단계 측면에서 지정하는 다양한 시간 선택을 보여줍니다. 이를 통해 개발자는 간단한 시간 선택기를 통합 문서에 추가할 수 있으며 이 기능은 사용자 입력 양식을 만드는 데 유용할 수 있습니다. 시간 선택기에서 시간을 표시하는 두 가지 방법의 예가 아래 스프레드시트에 나와 있습니다.
설명
app.js
index.html
styles.css
드롭다운은 개발자에게 특정 속성이 있는 드롭다운 메뉴를 통합 문서의 셀에 추가하는 기능을 제공합니다. 이 드롭다운 메뉴는 드롭다운 메뉴에 사용할 코드를 지정하는 것 이외에 추가 코드가 필요하지 않습니다.
SpreadJS에는 9가지 종류의 드롭다운이 있으며, 이 데모에서는 시간 선택기를 사용하는 방법을 보여줍니다.
다음 코드와 같이 시간 선택 드롭다운을 사용할 수 있습니다.
// The way of click the dropdown icon to open TimePicker.
var timePickerStyle = new GC.Spread.Sheets.Style();
timePickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openTimePicker",
useButtonStyle: true,
}
];
timePickerStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.timePicker,
option: {
min: { hour: 8 },
max: { hour: 19 },
step: { minute: 30 },
formatString: "h:mm AM/PM",
}
}
];
sheet.setText(1, 5, "Time Picker");
sheet.setStyle(2, 5, timePickerStyle);
// The way just open TimePicker with command rather then clicking the dropdown button.
spread.commandManager().execute({cmd:"openTimePicker",row:2,col:5,sheetName:"Sheet1"});
시간 선택 도구를 사용자 정의하기 위한 몇 가지 옵션이 있습니다.
- max: ITimePickerValue: 시간 선택이 표시할 수 있는 최대값입니다. 값에는 시간, 분 및 초 특성이 필요합니다.
- min: ITimePickerValue: 시간 선택이 표시할 수 있는 최소값입니다. 값에는 시간, 분 및 초 특성이 필요합니다.
- setp: ITimePickerValue: 시간 선택이 값을 단계별로 실행할 수 있는 단위입니다.
- formatString: string: 시간 항목의 형식을 지정합니다.
- height: number: 시간 선택 크기의 컨테이너를 지정합니다.