@basenative /日期

使用语义HTML输入的本机日期/时间选择器组件

部分 BaseNative 生态系统——基于信号的web运行时，基于原生HTML。

安装

npm install @basenative/date

快速入门

import { renderDatepicker, renderTimepicker, renderDateRange } from '@basenative/date';

// Render a date picker
const html = renderDatepicker({
  name: 'startDate',
  label: 'Start Date',
  value: '2024-01-15',
  min: '2024-01-01',
  max: '2024-12-31',
  required: true,
});

// Render a time picker
const timeHtml = renderTimepicker({
  name: 'startTime',
  label: 'Start Time',
  value: '09:00',
});

// Render a date range (two date inputs)
const rangeHtml = renderDateRange({
  startName: 'startDate',
  endName: 'endDate',
  startLabel: 'From',
  endLabel: 'To',
});

服务器端呈现

import { render } from '@basenative/server';
import { renderDatepicker } from '@basenative/date';

const page = render('<main>{{ datepicker }}</main>', {
  datepicker: renderDatepicker({ name: 'dob', label: 'Date of Birth' }),
});

API

renderDatepicker(options?)

呈现一个 <input type="date"> 包裹在贴有标签的容器中。返回一个HTML字符串。

选项:

• name -输入 name 属性。
• label -标签文本（如果没有提供则省略）。
• value -的初始值 YYYY-MM-DD 格式。
• min / max -中的日期范围约束 YYYY-MM-DD 格式。
• required -添加 required 属性。
• disabled -添加 disabled 属性。
• id -元素ID (如果省略则自动生成)。
• attrs -附加到输入的附加原始HTML属性字符串。

renderTimepicker(options?)

呈现一个 <input type="time"> 具有相同的选项形状 renderDatepicker,使用 HH:MM 值。

renderDateRange(options?)

呈现两个链接的日期输入（开始和结束）。选项包括所有 renderDatepicker 前缀为的选项 start 和 end (如。 startName， endName， startLabel， endLabel， startValue， endValue）。

许可证

apache - 2.0