DatePicker

DatePicker

DatePicker 类提供了轻松选择输入日期的功能。这个助手微件由方向微件使用。

有关获得对微件样式的完全控制的信息，请参阅样式主题。

另参阅：

构造函数

new DatePicker(properties)

参数：

properties Object

optional

所有可传入构造函数的属性列表，请参见属性。

示例代码：

// 典型用法
let DatePicker = new DatePicker({
  container: "date-picker", // 微件的 DOM 元素
  value: "2019-12-25", // 初始显示的值
});

属性列表

可以设置、检索或监听的任何属性。参见使用属性主题。

展示继承属性

隐藏继承属性

类型	描述	类
Boolean	更多信息指示当用户在下拉列表中更改月份时是否更新日期。	更多信息	DatePicker
String\|HTMLElement	更多信息表示包含微件的 DOM 元素的 ID 或节点。	更多信息	Widget
String	更多信息类名。	更多信息	Accessor
String	更多信息创建微件时分配给微件的唯一 ID。	更多信息	Widget
String	更多信息微件的默认标注。	更多信息	DatePicker
Date	更多信息微件的输入值。	更多信息	DatePicker
DatePickerViewModel	更多信息此微件的视图模型。	更多信息	DatePicker
Boolean	更多信息指示微件是否可见。	更多信息	Widget

属性详细说明

commitOnMonthChange Boolean

指示当用户在下拉列表中更改月份时是否更新日期。

默认值：false

container String|HTMLElement inherited

表示包含微件的 DOM 元素的 ID 或节点。此属性只能设置一次。以下示例都是使用微件时的有效用例。

示例代码：

// 在运行时以编程方式创建 HTML div元素，并将其设置为微件的容器
const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
});

// 将微件添加到视图的右上角
view.ui.add(basemapGallery, {
  position: "top-right"
});

// 在微件的容器中指定已定义的 HTML div 元素

const basemapGallery = new BasemapGallery({
  view: view,
  container: basemapGalleryDiv
});

// 将微件添加到视图的右上角
view.ui.add(basemapGallery, {
  position: "top-right"
});

// HTML 标签
<body>
  <div id="viewDiv"></div>
  <div id="basemapGalleryDiv"></div>
</body>

// 在添加到视图的 UI 时指定微件
const basemapGallery = new BasemapGallery({
  view: view
});

// 将微件添加到视图的右上角
view.ui.add(basemapGallery, {
  position: "top-right"
});

declaredClass Stringreadonly inherited

类名。类的名称声明格式为 geoscene.folder.className。

id String inherited

创建微件时分配给微件的唯一 ID。如果开发人员未设置，它将默认为容器 ID，或者如果该 ID 不存在，则将自动生成容器 ID。

label String

微件的默认标签。

value Date

微件的输入值。

viewModel DatePickerViewModelautocast

微件的视图模型。这是一个包含所有未定义逻辑的类。请参见 DatePickerViewModel 类以访问微件上的所有属性和方法。

visible Boolean inherited

指示微件是否可见。

如果为 false，微件将不再呈现在 web 文档中。这可能会影响文档中其他元素或微件的布局。例如，如果此微件是与视图 UI 右上角关联的三个微件中的第一个，那么当此微件不可见时，其他微件将重新定位。有关更多信息，请参阅 "none" 的 CSS 显示值。

默认值：true

示例代码：

// 在视图中隐藏微件
widget.visible = false;

方法列表

展示继承方法

隐藏继承方法

返回值类型	描述	类
String	更多信息用于构建微件 `class` 属性值的实用程序方法。	更多信息	Widget
	更多信息销毁微件实例。	更多信息	Widget
Boolean	更多信息在实例上触发事件。	更多信息	Widget
Boolean	更多信息指示实例上是否存在与提供的事件名称匹配的事件侦听器。	更多信息	Widget
Boolean	更多信息 `isFulfilled()` 可用于验证创建类的实例是否已完成（已解决或已拒绝）。	更多信息	Widget
Boolean	更多信息 `isRejected()` 可用于验证创建类的实例是否被拒绝。	更多信息	Widget
Boolean	更多信息 `isResolved()` 可用于验证创建类的实例是否被解析。	更多信息	Widget
Object	更多信息在实例上注册事件处理程序。	更多信息	Widget
	更多信息微件拆解助手。	更多信息	Widget
	更多信息这种方法主要由开发人员在实现自定义微件时使用。	更多信息	Widget
Object	更多信息这种方法主要由开发人员在实现自定义微件时使用。	更多信息	Widget
	更多信息立即将微件渲染到 DOM。	更多信息	Widget
	更多信息这种方法主要由开发人员在实现自定义微件时使用。	更多信息	Widget
Promise	更多信息 `when()` 创建类的实例后，会被执行一次。	更多信息	Widget

方法详细说明

classes(classNames){String}inherited

用于为微件的 class 属性构建值的实用方法。这有助于简化 CSS 类设置。

undefined

参数：

classNames String|String []|Object

repeatable

类名称。

返回值：

类型	描述
String	计算的类名称。

另参阅：

指南 - 微件开发（渲染）

示例代码：

// .tsx 语法显示在渲染微件时如何设置 CSS 类。

render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  };

  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
  );
}

destroy()inherited

销毁微件实例。

emit(type, event){Boolean}inherited

在实例上触发事件。仅当创建此类的子类时才应使用此方法。

参数：

type String

事件名称。

event Object

optional

事件负载。

返回值：

类型	描述
Boolean	如果侦听器收到通知,则为 `true`

hasEventListener(type){Boolean}inherited

指示实例上是否存在与提供的事件名称匹配的事件侦听器。

参数：

type String

事件名称。

返回值：

类型	描述
Boolean	如果类支持输入事件，则返回 true。

isFulfilled(){Boolean}inherited 起始版本: GeoScene API for JavaScript 4.22

isFulfilled() 可用于验证创建类的实例是否已完成（已解析或已拒绝）。如果已完成，将会返回 true。

返回值：

类型	描述
Boolean	指示创建类的实例是否已完成（已解析或已拒绝）。

isRejected(){Boolean}inherited 起始版本： GeoScene API for JavaScript 4.22

isRejected() 可用于验证创建类的实例是否被拒绝。如果拒绝，将会返回 true 。

返回值：

类型	描述
Boolean	指示是否已拒绝创建类的实例。

isResolved(){Boolean}inherited 起始版本: GeoScene API for JavaScript 4.22

isResolved() 可用于验证创建类的实例是否成功。如果成功, 将会返回 true 。

返回值:

类型	描述
Boolean	指示是否已解析创建类的实例。

on(type, listener){Object}inherited

在实例上注册事件处理程序。调用此方法将事件与侦听器挂钩。

参数：

type String|String []

要监听的事件或者事件数组。

listener Function

事件触发时要调用的函数。

返回值：

类型描述

Object

返回一个 remove() 方法的事件处理程序，该方法用以停止侦听事件。

属性	类型	描述
remove	Function	当被调用时，从事件中移除监听器。

示例代码：

view.on("click", function(event){
  // event 是事件触发后返回的事件句柄。
  console.log(event.mapPoint);
});

own(handles)inherited

微件拆解助手。当微件被销毁时，添加到其中的任何句柄都将自动删除。

参数：

handles WatchHandle|WatchHandle []

微件销毁后标记为删除的句柄。

postInitialize()inherited

这种方法主要由开发人员在实现自定义微件时使用。 在微件准备好后执行。

render(){Object}inherited

这种方法主要由开发人员在实现自定义微件时使用。 它必须由子类实现以进行渲染。

返回值：

类型	描述
Object	渲染虚拟节点。

renderNow()inherited

立即将微件渲染到 DOM。

scheduleRender()inherited

这种方法主要由开发人员在实现自定义微件时使用。 计划微件渲染。此方法对于影响 UI 的更改非常有用。

when(callback, errback){Promise}inherited 起始版本： GeoScene API for JavaScript 4.22

when() 创建类的实例后，会被执行一次。该方法接受两个参数： callback 函数和 errback 函数。 callback 在类的实例加载时执行。如果类的实例无法加载，则执行 errback。

参数：

callback Function

optional

当 Promise 解析时，该函数将被调用。

errback Function

optional

当 Promise 拒绝时，该函数将被调用。

返回值：

类型	描述
Promise	返回回调结果的新 promise，可用于链接其他函数。

示例代码：

// 尽管此示例使用 BasemapGallery 微件，但任何作为 promise 的类实例都可以以相同的方式使用 when()
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
  // 当 promise 解析时，函数将被执行
}, function(error){
  // 如果由于错误而拒绝 promise，则将执行此函数
});

GeoScene API for JavaScript参考手册

构造函数

属性列表

属性详细说明

方法列表

方法详细说明