UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载本文围绕 ngx-bootstrap Datepicker 模块中的Inline 内联形态展开与经典的弹层popup形态不同bs-datepicker-inline与bs-daterangepicker-inline将日历面板直接渲染在页面流中常被用于页面内常驻日历的场景。读完本文你将掌握内联日期选择器的初始化值bsValue设置、配置项bsConfig用法、与弹层形态的实现差异、双向数据流机制以及如何结合测试用例验证交互行为。从用例文档出发Inline Datepicker 的验收目标仓库中的 datepicker.examples.inline-datepicker.use-case.md 是本文的核心依据。它将该演示定义为用例5.21明确描述了其目标与主成功场景GoalShow user how to use inline datepicker, with initial state主成功场景Main success scenario用户打开 Datepicker 演示页用户点击Inline Datepicker子菜单用户看到已选中日期Today即今天的日期选择器当用户点击任意其他日期该日期被选中当用户切换到其他月份并选择该月任意日期该日期同样被选中。变化分支Variations仅有一条用户可能通过滚动定位到 Inline Datepicker 子菜单2*. User scroll to Inline Datepicker sub-menu。该用例的要点可以概括为三件事内联渲染日历直接展示、无需弹出、初始状态打开即选中今天、跨月选择切换月份后仍可正常选值。下文将逐一从源码与演示组件层面展开。演示组件剖析一行模板完成内联日历Inline Datepicker 的官方演示位于libs/doc-pages/datepicker/src/lib/demos/inline-datepicker/目录由两个文件组成。组件类 inline-datepicker.component.ts 的核心逻辑非常精简export class DemoDatepickerInlineComponent { bsInlineValue new Date(); bsInlineRangeValue: Date[]; maxDate new Date(); constructor() { this.maxDate.setDate(this.maxDate.getDate() 7); this.bsInlineRangeValue [this.bsInlineValue, this.maxDate]; } }这里体现了用例文档中初始状态的具体实现bsInlineValue new Date()内联日期选择器的初始值被设置为当前日期Today对应用例第 3 步用户看到选中今天日期的 DatepickermaxDate new Date()后调用setDate(getDate() 7)最大可选日期为今天 7 天用于构建区间bsInlineRangeValue [this.bsInlineValue, this.maxDate]内联区间选择器的初始区间为今天 → 今天后 7 天。模板 inline-datepicker.component.html 展示了两个内联控件的真实用法div classrow div classpr-3 pb-3 pe-3 w-auto bs-datepicker-inline [bsValue]bsInlineValue/bs-datepicker-inline /div div classpr-3 pb-3 pe-3 w-auto bs-daterangepicker-inline [bsValue]bsInlineRangeValue/bs-daterangepicker-inline /div /div可以看到内联形态的接入成本极低一个自定义元素标签 一个bsValue输入属性即可。该演示在文档站点中注册于 datepicker-section.list.ts 的Inline小节anchorinline-datepicker其说明文字为with initial state set bybsInlineValueproperty与用例文档的目标一一对应。注官方演示默认同时展示bs-datepicker-inline单选与bs-daterangepicker-inline区间两个控件本文以单选为重点展开区间选择器单独成节。快速上手安装与模块引入内联指令BsDatepickerInlineDirective与BsDaterangepickerInlineDirective都由BsDatepickerModule统一导出见 bs-datepicker.module.ts。引入方式与普通 Datepicker 完全一致两种方式均被支持见 usage.md。方式一ng add一键安装ng add ngx-bootstrap --component datepickerng add会自动完成模块注入与必要的样式引入。方式二手动模块 / Standalone 引入非ng add安装时需自行引入BsDatepickerModule并额外加载样式bs-datepicker.css。模块用法import { BrowserAnimationsModule } from angular/platform-browser/animations; import { BsDatepickerModule } from ngx-bootstrap/datepicker; NgModule({ imports: [ BrowserAnimationsModule, BsDatepickerModule, // ... 其他模块 ] }) export class AppModule {}Standalone 组件用法import { BrowserAnimationsModule } from angular/platform-browser/animations; import { BsDatepickerModule } from ngx-bootstrap/datepicker; Component({ // ... imports: [ BrowserAnimationsModule, BsDatepickerModule, // ... ] }) export class AppComponent {}需要注意两点BrowserAnimationsModule是必需的——BsDatepickerModule依赖 Angular 动画模块样式文件bs-datepicker.css需要以 CDN 或打包器如 Angular CLI 引入dist/ngx-bootstrap/datepicker/bs-datepicker.css方式加载否则日历可能缺乏正确的视觉样式。BsDatepickerModule的导出清单public_api.ts表明内联相关的公开 API 包括BsDatepickerInlineDirective、BsDaterangepickerInlineDirective、BsDatepickerInlineConfig、BsDaterangepickerInlineConfig以及两个内联容器组件均可在业务代码中按需引用。bsValue初始值与双向数据流用例文档第 3 步要求打开即选中今天这由bsValue输入属性完成。其底层实现在 bs-datepicker-inline.component.ts 中_bsValue?: Date; Input() set bsValue(value: Date | undefined) { if (this._bsValue value) { return; } if (!this._bsValue value !this._config.withTimepicker) { const now new Date(); copyTime(value, now); } if (value this.bsConfig?.initCurrentTime) { value setCurrentTimeOnDateSelect(value); } this._bsValue value; this.bsValueChange.emit(value); }该 setter 揭示了几个关键行为去重保护当新值与当前值相同时直接返回避免无意义的重渲染时间归一化首次赋值且未开启withTimepicker时通过copyTime将今天的当前时分秒拷贝到传入日期上保证选中日期携带当前时间initCurrentTime支持若配置了initCurrentTime: true赋值时调用setCurrentTimeOnDateSelect写入当前时刻来自 bs-calendar-utils.ts变更通知每次赋值都会触发Output() bsValueChange事件。双向数据流由initSubscribes()维护bs-datepicker-inline.component.ts模型 → 视图订阅bsValueChange将新值写入内联容器实例的value属性驱动日历重绘视图 → 模型订阅容器实例的valueChange用户在日历上点选后将选中值回写到bsValue。这正是用例第 4、5 步点击其他日期 → 该日期被选中的机制来源用户点选发生在日历视图内部经由valueChange事件回流到指令再由指令写回容器完成状态同步。这种事件驱动的环形数据流与ngModel/响应式表单的双向绑定体验保持一致。内联 vs 弹层渲染与定位的本质差异Inline 形态与经典bsDatepicker弹层形态的最大区别在于容器如何挂载。对比可见BsDatepickerDirective弹层形态依赖PositioningService将日历容器按placement定位到输入框附近容器随触发/关闭动态出现BsDatepickerInlineDirectivebs-datepicker-inline.component.ts同样注入PositioningService但其容器组件 bs-datepicker-inline-container.component.ts 在构造时强制改写样式_renderer.setStyle(_element.nativeElement, display, inline-block); _renderer.setStyle(_element.nativeElement, position, static);即内联容器以inline-block参与页面布局、position: static不做绝对定位日历常驻页面流中不会弹出、也不随外部点击关闭。这解释了用例中用户看到 Datepicker而非点击后弹出的差异。内联容器还通过HostBinding做了可访问性处理当日期选择器处于禁用状态isDisabled时宿主元素自动获得disabled与readonly属性见同一文件的disabledValue/readonlyValuegetter。此外内联容器与弹层容器共用同一套模板bs-datepicker-view.html与同一套 reducer 状态管理BsDatepickerStore、BsDatepickerEffects这意味着月份切换、年份视图、周视图等交互逻辑完全一致——这正是用例第 5 步切换到其他月份仍可选择日期得以成立的原因跨月导航能力来自共享的日历引擎与渲染形态无关。配置项详解bsConfig支持的参数内联指令通过Input() bsConfig?: PartialBsDatepickerInlineConfig接收配置bs-datepicker-inline.component.ts。BsDatepickerInlineConfig本身是一个空扩展类bs-datepicker-inline.config.ts所有配置项继承自BsDatepickerConfig因此完整参数清单见 bs-datepicker.config.ts。常用配置项如下配置项默认值说明containerClasstheme-green日历容器的 CSS 主题类内置theme-default/theme-green/theme-blue/theme-dark-blue/theme-red/theme-orangeminDate/maxDate无可选日期的最小/最大值超出范围不可选dateInputFormatL日期展示格式遵循 moment 格式串rangeInputFormatL区间输入格式区间选择器专用rangeSeparator - 区间分隔符displayMonths1同时展示的月份数区间选择器默认2startViewday初始视图模式day/month/yearminMode无允许下钻到的最小视图模式daysDisabled无禁用一周中的某些天如[0, 6]禁用周六周日0 为周日datesDisabled无禁用指定日期数组勿与datesEnabled同用datesEnabled无仅允许指定日期数组可选勿与datesDisabled同用dateCustomClasses无为特定日期附加自定义 CSS 类dateTooltipTexts无为特定日期设置 tooltip 文本selectFromOtherMonthfalse是否允许选择非本月日期selectWeekfalse点击周号选中该周第一天showWeekNumberstrue是否显示周号showTodayButton/showClearButtonfalse是否显示 Today / Clear 按钮isAnimatedfalse是否开启动画adaptivePositionfalse是否启用自适应定位useUtcfalse是否使用 UTC 时间withTimepickerfalse是否在日历下内嵌时间选择器initCurrentTime无设置bsValue时写入当前时分秒maxDateRange无区间选择器允许的最大跨度天ranges无预定义快捷区间returnFocusToInputfalse选中后是否将焦点归还输入框在 setConfig() 中指令通过一次Object.assign将指令输入属性isDisabled、minDate、maxDate、dateCustomClasses、dateTooltipTexts、datesDisabled、datesEnabled、initCurrentTime等与bsConfig合并并调用checkBsValue校验当前值是否超出maxDate随后通过ComponentLoader将合并后的配置以provide({ provide: BsDatepickerConfig, useValue: this._config })的形式注入内联容器。一个可直接复制的配置示例bsConfig: PartialBsDatepickerInlineConfig { containerClass: theme-red, dateInputFormat: DD-MM-YYYY, minDate: new Date(), maxDate: new Date(new Date().setDate(new Date().getDate() 30)), showWeekNumbers: false, showTodayButton: true, customTodayClass: my-today-class };注意minDate/maxDate等既可作为bsConfig中的字段传入也可作为指令的独立Input()使用setConfig()中两者取或关系指令输入优先。该逻辑同时体现在 ngOnChanges 中——运行期动态修改minDate、maxDate、datesDisabled、datesEnabled、isDisabled、dateCustomClasses、dateTooltipTexts时变更会即时同步到已挂载的容器实例。内联区间选择器bs-daterangepicker-inline演示模板中的第二个控件bs-daterangepicker-inline对应指令 bs-daterangepicker-inline.component.ts其bsValue类型为两个日期的数组(Date|undefined)[]初始区间即上文演示中的今天 → 今天 7 天。与单选版本相比区间版本有几个值得注意的差异配置类BsDaterangepickerInlineConfig继承自BsDatepickerConfig并覆写displayMonths 2bs-daterangepicker-inline.config.ts因此内联区间选择器默认展示两个月日历与BsDaterangepickerConfig一致见 bs-daterangepicker.config.ts区间合规校验setConfig()中调用checkRangesWithMaxDate校验预定义ranges与maxDate的关系并透传maxDateRange最大可选跨度回写过滤视图 → 模型的订阅使用filter(range range range[0] !!range[1])bs-daterangepicker-inline.component.ts只有起止日期都已选定的完整区间才会写回bsValue避免半选状态污染模型额外输入区间版本额外支持daysDisabled禁用周内某几天。测试用例行为契约的源码级佐证仓库为内联形态提供了专门的测试套件位于 src/datepicker/testing/ 下可用作验收行为的契约1. bs-inline-datepicker.spec.ts测试选择与当前年份不同的月份时年份能正确切换通过容器实例的yearSelectHandler/monthSelectHandler驱动状态流转断言state.view.date的年份等于所选择月份的年份——对应用例第 5 步跨月选择的年份正确性测试withTimepicker: true时只展示一个 timepicker且修改时间后selectedTime正确更新。2. bs-inline-daterangepicker.spec.ts验证区间选择器在跨年选择时年份切换正确验证withTimepicker模式下通过setRangeOnCalendar与timeSelectHandler修改起止时间后store 中的selectedTime数组两个元素均更新——佐证了区间 时间选择的联动。3. bs-inline-datepicker-minmode-year.spec.ts该套件以xdescribe形式被跳过但仍展示了minMode: year配置的测试意图选择年份视图中的第一年时年份列表不应发生重排。可作为阅读源码时理解minMode与年份视图交互的参考。这些测试直接使用BsDatepickerModule装配宿主组件并以bs-datepicker-inline标签渲染从侧面印证了内联指令可以脱离任何触发器独立使用——它不需要输入框、按钮或任何打开手势这与弹层形态的测试方式通常伴随 input 与 click 事件截然不同。行为验收清单对照用例逐条验证基于用例文档与源码实现整理一份可在任何使用内联 Datepicker 的应用中直接套用的验收清单用例要求验证方式源码依据页面打开即显示日历无需触发模板中放置bs-datepicker-inline后立即可见日历容器样式position: static见 bs-datepicker-inline-container.component.ts初始状态为今天传入[bsValue]new Date()日历高亮当天bsValuesetter 与copyTime见 bs-datepicker-inline.component.ts点击任意日期即选中点击后触发bsValueChange组件绑定值同步更新valueChange→bsValue回写见 bs-datepicker-inline.component.ts切换月份后仍可选值使用头部‹/›导航切换月份点击目标日期共享日历引擎BsDatepickerStore/BsDatepickerEffects与容器模板bs-datepicker-view.html初始区间为今天 → 今天7 天区间版传入[bsValue][today, todayPlus7]演示组件构造逻辑见 inline-datepicker.component.ts跨月/跨年选择年份正确从其他月份选择日期后选中值年份不变测试 bs-inline-datepicker.spec.ts常见问题与注意事项bsValue的值类型单选用Date区间选用(Date|undefined)[]两个元素的数组。类型不符会破坏日历状态同步。务必引入bs-datepicker.css内联日历同样依赖该样式文件缺失时会出现布局/主题异常配置containerClass主题也依赖它。禁用与只读语义设置[isDisabled]true后容器宿主自动获得disabled/readonly属性且日历内容不可交互见 bs-datepicker-inline-container.component.ts 的HostBinding。datesEnabled与datesDisabled互斥官方文档明确提示两者不要同时使用否则行为不确定。minDate/maxDate双通道既可作为bsConfig字段也可作为独立Input()运行期修改独立输入会即时同步到容器。区间半选状态区间选择器在只选了起点、未选终点时不会把值写回bsValue见filter逻辑表单校验与展示逻辑应容忍这一中间态。总结Inline Datepicker 是 ngx-bootstrap Datepicker 模块中常驻式日历的标准实现它复用了弹层形态完整的日历引擎月份/年份/周视图、reducer 状态管理仅在渲染挂载方式上改为inline-blockposition: static的静态内联形态并通过bsValue/bsValueChange提供与弹层一致的双向数据流。从用例文档到演示组件、指令源码与测试套件仓库中的每一层实现都清晰可查接入成本仅需一个标签与一个初始值适合仪表盘筛选区、预订流程、活动页等需要日历直接暴露在页面中的场景。赞分享UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载相关推荐Bootstrap-Datepicker 日期选择器使用指南Bootstrap Datepicker 日期选择器使用指南 项目概述 Bootstrap Datepicker 是一个基于 Bootstrap 风格的灵活日期前端UI组件终极指南Bootstrap-datepicker日期选择器的完整使用教程终极指南Bootstrap datepicker日期选择器的完整使用教程 Bootstrap datepicker是一款专为Bootstrap框架设计的日期选前端UI组件Mac Mouse Fix为什么你的普通鼠标在macOS上总是不顺手这个免费开源工具能解决所有痛点Mac Mouse Fix为什么你的普通鼠标在macOS上总是不顺手这个免费开源工具能解决所有痛点 还在为macOS上第三方鼠标的糟糕体验而烦恼吗你可能遇桌面应用系统编程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载本文围绕 ngx-bootstrap Datepicker 模块中的Inline 内联形态展开与经典的弹层popup形态不同bs-datepicker-inline与bs-daterangepicker-inline将日历面板直接渲染在页面流中常被用于页面内常驻日历的场景。读完本文你将掌握内联日期选择器的初始化值bsValue设置、配置项bsConfig用法、与弹层形态的实现差异、双向数据流机制以及如何结合测试用例验证交互行为。从用例文档出发Inline Datepicker 的验收目标仓库中的 datepicker.examples.inline-datepicker.use-case.md 是本文的核心依据。它将该演示定义为用例5.21明确描述了其目标与主成功场景GoalShow user how to use inline datepicker, with initial state主成功场景Main success scenario用户打开 Datepicker 演示页用户点击Inline Datepicker子菜单用户看到已选中日期Today即今天的日期选择器当用户点击任意其他日期该日期被选中当用户切换到其他月份并选择该月任意日期该日期同样被选中。变化分支Variations仅有一条用户可能通过滚动定位到 Inline Datepicker 子菜单2*. User scroll to Inline Datepicker sub-menu。该用例的要点可以概括为三件事内联渲染日历直接展示、无需弹出、初始状态打开即选中今天、跨月选择切换月份后仍可正常选值。下文将逐一从源码与演示组件层面展开。演示组件剖析一行模板完成内联日历Inline Datepicker 的官方演示位于libs/doc-pages/datepicker/src/lib/demos/inline-datepicker/目录由两个文件组成。组件类 inline-datepicker.component.ts 的核心逻辑非常精简export class DemoDatepickerInlineComponent { bsInlineValue new Date(); bsInlineRangeValue: Date[]; maxDate new Date(); constructor() { this.maxDate.setDate(this.maxDate.getDate() 7); this.bsInlineRangeValue [this.bsInlineValue, this.maxDate]; } }这里体现了用例文档中初始状态的具体实现bsInlineValue new Date()内联日期选择器的初始值被设置为当前日期Today对应用例第 3 步用户看到选中今天日期的 DatepickermaxDate new Date()后调用setDate(getDate() 7)最大可选日期为今天 7 天用于构建区间bsInlineRangeValue [this.bsInlineValue, this.maxDate]内联区间选择器的初始区间为今天 → 今天后 7 天。模板 inline-datepicker.component.html 展示了两个内联控件的真实用法div classrow div classpr-3 pb-3 pe-3 w-auto bs-datepicker-inline [bsValue]bsInlineValue/bs-datepicker-inline /div div classpr-3 pb-3 pe-3 w-auto bs-daterangepicker-inline [bsValue]bsInlineRangeValue/bs-daterangepicker-inline /div /div可以看到内联形态的接入成本极低一个自定义元素标签 一个bsValue输入属性即可。该演示在文档站点中注册于 datepicker-section.list.ts 的Inline小节anchorinline-datepicker其说明文字为with initial state set bybsInlineValueproperty与用例文档的目标一一对应。注官方演示默认同时展示bs-datepicker-inline单选与bs-daterangepicker-inline区间两个控件本文以单选为重点展开区间选择器单独成节。快速上手安装与模块引入内联指令BsDatepickerInlineDirective与BsDaterangepickerInlineDirective都由BsDatepickerModule统一导出见 bs-datepicker.module.ts。引入方式与普通 Datepicker 完全一致两种方式均被支持见 usage.md。方式一ng add一键安装ng add ngx-bootstrap --component datepickerng add会自动完成模块注入与必要的样式引入。方式二手动模块 / Standalone 引入非ng add安装时需自行引入BsDatepickerModule并额外加载样式bs-datepicker.css。模块用法import { BrowserAnimationsModule } from angular/platform-browser/animations; import { BsDatepickerModule } from ngx-bootstrap/datepicker; NgModule({ imports: [ BrowserAnimationsModule, BsDatepickerModule, // ... 其他模块 ] }) export class AppModule {}Standalone 组件用法import { BrowserAnimationsModule } from angular/platform-browser/animations; import { BsDatepickerModule } from ngx-bootstrap/datepicker; Component({ // ... imports: [ BrowserAnimationsModule, BsDatepickerModule, // ... ] }) export class AppComponent {}需要注意两点BrowserAnimationsModule是必需的——BsDatepickerModule依赖 Angular 动画模块样式文件bs-datepicker.css需要以 CDN 或打包器如 Angular CLI 引入dist/ngx-bootstrap/datepicker/bs-datepicker.css方式加载否则日历可能缺乏正确的视觉样式。BsDatepickerModule的导出清单public_api.ts表明内联相关的公开 API 包括BsDatepickerInlineDirective、BsDaterangepickerInlineDirective、BsDatepickerInlineConfig、BsDaterangepickerInlineConfig以及两个内联容器组件均可在业务代码中按需引用。bsValue初始值与双向数据流用例文档第 3 步要求打开即选中今天这由bsValue输入属性完成。其底层实现在 bs-datepicker-inline.component.ts 中_bsValue?: Date; Input() set bsValue(value: Date | undefined) { if (this._bsValue value) { return; } if (!this._bsValue value !this._config.withTimepicker) { const now new Date(); copyTime(value, now); } if (value this.bsConfig?.initCurrentTime) { value setCurrentTimeOnDateSelect(value); } this._bsValue value; this.bsValueChange.emit(value); }该 setter 揭示了几个关键行为去重保护当新值与当前值相同时直接返回避免无意义的重渲染时间归一化首次赋值且未开启withTimepicker时通过copyTime将今天的当前时分秒拷贝到传入日期上保证选中日期携带当前时间initCurrentTime支持若配置了initCurrentTime: true赋值时调用setCurrentTimeOnDateSelect写入当前时刻来自 bs-calendar-utils.ts变更通知每次赋值都会触发Output() bsValueChange事件。双向数据流由initSubscribes()维护bs-datepicker-inline.component.ts模型 → 视图订阅bsValueChange将新值写入内联容器实例的value属性驱动日历重绘视图 → 模型订阅容器实例的valueChange用户在日历上点选后将选中值回写到bsValue。这正是用例第 4、5 步点击其他日期 → 该日期被选中的机制来源用户点选发生在日历视图内部经由valueChange事件回流到指令再由指令写回容器完成状态同步。这种事件驱动的环形数据流与ngModel/响应式表单的双向绑定体验保持一致。内联 vs 弹层渲染与定位的本质差异Inline 形态与经典bsDatepicker弹层形态的最大区别在于容器如何挂载。对比可见BsDatepickerDirective弹层形态依赖PositioningService将日历容器按placement定位到输入框附近容器随触发/关闭动态出现BsDatepickerInlineDirectivebs-datepicker-inline.component.ts同样注入PositioningService但其容器组件 bs-datepicker-inline-container.component.ts 在构造时强制改写样式_renderer.setStyle(_element.nativeElement, display, inline-block); _renderer.setStyle(_element.nativeElement, position, static);即内联容器以inline-block参与页面布局、position: static不做绝对定位日历常驻页面流中不会弹出、也不随外部点击关闭。这解释了用例中用户看到 Datepicker而非点击后弹出的差异。内联容器还通过HostBinding做了可访问性处理当日期选择器处于禁用状态isDisabled时宿主元素自动获得disabled与readonly属性见同一文件的disabledValue/readonlyValuegetter。此外内联容器与弹层容器共用同一套模板bs-datepicker-view.html与同一套 reducer 状态管理BsDatepickerStore、BsDatepickerEffects这意味着月份切换、年份视图、周视图等交互逻辑完全一致——这正是用例第 5 步切换到其他月份仍可选择日期得以成立的原因跨月导航能力来自共享的日历引擎与渲染形态无关。配置项详解bsConfig支持的参数内联指令通过Input() bsConfig?: PartialBsDatepickerInlineConfig接收配置bs-datepicker-inline.component.ts。BsDatepickerInlineConfig本身是一个空扩展类bs-datepicker-inline.config.ts所有配置项继承自BsDatepickerConfig因此完整参数清单见 bs-datepicker.config.ts。常用配置项如下配置项默认值说明containerClasstheme-green日历容器的 CSS 主题类内置theme-default/theme-green/theme-blue/theme-dark-blue/theme-red/theme-orangeminDate/maxDate无可选日期的最小/最大值超出范围不可选dateInputFormatL日期展示格式遵循 moment 格式串rangeInputFormatL区间输入格式区间选择器专用rangeSeparator - 区间分隔符displayMonths1同时展示的月份数区间选择器默认2startViewday初始视图模式day/month/yearminMode无允许下钻到的最小视图模式daysDisabled无禁用一周中的某些天如[0, 6]禁用周六周日0 为周日datesDisabled无禁用指定日期数组勿与datesEnabled同用datesEnabled无仅允许指定日期数组可选勿与datesDisabled同用dateCustomClasses无为特定日期附加自定义 CSS 类dateTooltipTexts无为特定日期设置 tooltip 文本selectFromOtherMonthfalse是否允许选择非本月日期selectWeekfalse点击周号选中该周第一天showWeekNumberstrue是否显示周号showTodayButton/showClearButtonfalse是否显示 Today / Clear 按钮isAnimatedfalse是否开启动画adaptivePositionfalse是否启用自适应定位useUtcfalse是否使用 UTC 时间withTimepickerfalse是否在日历下内嵌时间选择器initCurrentTime无设置bsValue时写入当前时分秒maxDateRange无区间选择器允许的最大跨度天ranges无预定义快捷区间returnFocusToInputfalse选中后是否将焦点归还输入框在 setConfig() 中指令通过一次Object.assign将指令输入属性isDisabled、minDate、maxDate、dateCustomClasses、dateTooltipTexts、datesDisabled、datesEnabled、initCurrentTime等与bsConfig合并并调用checkBsValue校验当前值是否超出maxDate随后通过ComponentLoader将合并后的配置以provide({ provide: BsDatepickerConfig, useValue: this._config })的形式注入内联容器。一个可直接复制的配置示例bsConfig: PartialBsDatepickerInlineConfig { containerClass: theme-red, dateInputFormat: DD-MM-YYYY, minDate: new Date(), maxDate: new Date(new Date().setDate(new Date().getDate() 30)), showWeekNumbers: false, showTodayButton: true, customTodayClass: my-today-class };注意minDate/maxDate等既可作为bsConfig中的字段传入也可作为指令的独立Input()使用setConfig()中两者取或关系指令输入优先。该逻辑同时体现在 ngOnChanges 中——运行期动态修改minDate、maxDate、datesDisabled、datesEnabled、isDisabled、dateCustomClasses、dateTooltipTexts时变更会即时同步到已挂载的容器实例。内联区间选择器bs-daterangepicker-inline演示模板中的第二个控件bs-daterangepicker-inline对应指令 bs-daterangepicker-inline.component.ts其bsValue类型为两个日期的数组(Date|undefined)[]初始区间即上文演示中的今天 → 今天 7 天。与单选版本相比区间版本有几个值得注意的差异配置类BsDaterangepickerInlineConfig继承自BsDatepickerConfig并覆写displayMonths 2bs-daterangepicker-inline.config.ts因此内联区间选择器默认展示两个月日历与BsDaterangepickerConfig一致见 bs-daterangepicker.config.ts区间合规校验setConfig()中调用checkRangesWithMaxDate校验预定义ranges与maxDate的关系并透传maxDateRange最大可选跨度回写过滤视图 → 模型的订阅使用filter(range range range[0] !!range[1])bs-daterangepicker-inline.component.ts只有起止日期都已选定的完整区间才会写回bsValue避免半选状态污染模型额外输入区间版本额外支持daysDisabled禁用周内某几天。测试用例行为契约的源码级佐证仓库为内联形态提供了专门的测试套件位于 src/datepicker/testing/ 下可用作验收行为的契约1. bs-inline-datepicker.spec.ts测试选择与当前年份不同的月份时年份能正确切换通过容器实例的yearSelectHandler/monthSelectHandler驱动状态流转断言state.view.date的年份等于所选择月份的年份——对应用例第 5 步跨月选择的年份正确性测试withTimepicker: true时只展示一个 timepicker且修改时间后selectedTime正确更新。2. bs-inline-daterangepicker.spec.ts验证区间选择器在跨年选择时年份切换正确验证withTimepicker模式下通过setRangeOnCalendar与timeSelectHandler修改起止时间后store 中的selectedTime数组两个元素均更新——佐证了区间 时间选择的联动。3. bs-inline-datepicker-minmode-year.spec.ts该套件以xdescribe形式被跳过但仍展示了minMode: year配置的测试意图选择年份视图中的第一年时年份列表不应发生重排。可作为阅读源码时理解minMode与年份视图交互的参考。这些测试直接使用BsDatepickerModule装配宿主组件并以bs-datepicker-inline标签渲染从侧面印证了内联指令可以脱离任何触发器独立使用——它不需要输入框、按钮或任何打开手势这与弹层形态的测试方式通常伴随 input 与 click 事件截然不同。行为验收清单对照用例逐条验证基于用例文档与源码实现整理一份可在任何使用内联 Datepicker 的应用中直接套用的验收清单用例要求验证方式源码依据页面打开即显示日历无需触发模板中放置bs-datepicker-inline后立即可见日历容器样式position: static见 bs-datepicker-inline-container.component.ts初始状态为今天传入[bsValue]new Date()日历高亮当天bsValuesetter 与copyTime见 bs-datepicker-inline.component.ts点击任意日期即选中点击后触发bsValueChange组件绑定值同步更新valueChange→bsValue回写见 bs-datepicker-inline.component.ts切换月份后仍可选值使用头部‹/›导航切换月份点击目标日期共享日历引擎BsDatepickerStore/BsDatepickerEffects与容器模板bs-datepicker-view.html初始区间为今天 → 今天7 天区间版传入[bsValue][today, todayPlus7]演示组件构造逻辑见 inline-datepicker.component.ts跨月/跨年选择年份正确从其他月份选择日期后选中值年份不变测试 bs-inline-datepicker.spec.ts常见问题与注意事项bsValue的值类型单选用Date区间选用(Date|undefined)[]两个元素的数组。类型不符会破坏日历状态同步。务必引入bs-datepicker.css内联日历同样依赖该样式文件缺失时会出现布局/主题异常配置containerClass主题也依赖它。禁用与只读语义设置[isDisabled]true后容器宿主自动获得disabled/readonly属性且日历内容不可交互见 bs-datepicker-inline-container.component.ts 的HostBinding。datesEnabled与datesDisabled互斥官方文档明确提示两者不要同时使用否则行为不确定。minDate/maxDate双通道既可作为bsConfig字段也可作为独立Input()运行期修改独立输入会即时同步到容器。区间半选状态区间选择器在只选了起点、未选终点时不会把值写回bsValue见filter逻辑表单校验与展示逻辑应容忍这一中间态。总结Inline Datepicker 是 ngx-bootstrap Datepicker 模块中常驻式日历的标准实现它复用了弹层形态完整的日历引擎月份/年份/周视图、reducer 状态管理仅在渲染挂载方式上改为inline-blockposition: static的静态内联形态并通过bsValue/bsValueChange提供与弹层一致的双向数据流。从用例文档到演示组件、指令源码与测试套件仓库中的每一层实现都清晰可查接入成本仅需一个标签与一个初始值适合仪表盘筛选区、预订流程、活动页等需要日历直接暴露在页面中的场景。赞分享UI组件前端【免费下载链接】ngx-bootstrapFast and reliable Bootstrap widgets in Angular (supports Ivy engine)项目地址https://gitcode.com/gh_mirrors/ng/ngx-bootstrap点击查看免费下载相关推荐Bootstrap-Datepicker 日期选择器使用指南Bootstrap Datepicker 日期选择器使用指南 项目概述 Bootstrap Datepicker 是一个基于 Bootstrap 风格的灵活日期前端UI组件终极指南Bootstrap-datepicker日期选择器的完整使用教程终极指南Bootstrap datepicker日期选择器的完整使用教程 Bootstrap datepicker是一款专为Bootstrap框架设计的日期选前端UI组件Mac Mouse Fix为什么你的普通鼠标在macOS上总是不顺手这个免费开源工具能解决所有痛点Mac Mouse Fix为什么你的普通鼠标在macOS上总是不顺手这个免费开源工具能解决所有痛点 还在为macOS上第三方鼠标的糟糕体验而烦恼吗你可能遇桌面应用系统编程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考