wpf datepicker 选择时分秒_[Angular 组件库 NG-ZORRO 基础入门] - DatePicker

最新推荐文章于 2024-05-09 19:53:44 发布
最新推荐文章于 2024-05-09 19:53:44 发布
阅读量663 收藏
点赞数
文章标签： wpf datepicker 选择时分秒 wpf datepicker显示时分秒 zorro table设置动态高度

前言回顾

经过几天的学习，我们完成了 nz-table 相关知识的初步了解，当然还有很多情况我们没有顾及到，有兴趣的同学可以前往官方文档去查看剩余的示例说明。

今天我们继续介绍之前项目中涉及的组件：DatePicker。

组件介绍

背景

想必大家对日期组件绝对不会陌生，它在非常多的业务场景中被需要，我们今天也会介绍 nz-date-picker 组件及其相关组件。
日期类组件包括以下四种形式：nz-date-picker：日期选择组件 nz-month-picker：月份选择组件nz-range-picker：日期范围选择组件 nz-week-picker：周选择组件

注意： 所有输入输出日期对象均为 Date，你可以通过 date-fns 工具库获得你需要的数据。

使用 nz-date-picker

<nz-date-picker></nz-date-picker>
<nz-date-picker [(ngModel)]="today"></nz-date-picker>
<nz-date-picker formControlName="today" nzFormat="yyyy-MM-dd"></nz-date-picker>

014dcb481c1b8ed5dbe81c5fbff8b6f8.png

可以看到，日期组件的使用非常方便，并且可以在不同环境下使用，不论是双向绑定还是 Form 组件，还可以通过 nzFormat属性来渲染显示格式，那么我们下面来看几个有意思的例子。

在此之前，需要说明的是，nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持，需要在 app.module.ts 文件中 引入相应的 Angular 语言包。 例如：

import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

禁选指定日期 - nzDisabledDate

我们在 待办事项 - Form 篇使用了日期组件，当时我们在选择待办任务预期完成时间时，需要限制用户不得选择今天以前的日期，这是个很普遍的需求，在 nz-date-picker 里也非常容易实现。

它已经为我们提供了 nzDisabledDate、nzDisabledTime 属性来限制可供选择的日期和时间，先来看一下这两个属性的定义：

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| nzDisabledTime | 不可选择的时间	 | (current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds } |
| nzDisabledDate | 不可选择的日期	 | (current: Date) => boolean |

nzDisabledDate 接受一个返回 boolean 值的方法，而 nzDisabledTime 则返回一个带有时分秒的变量。
看一下我们的使用方式：

<nz-date-picker
    formControlName="deadline"
    nzFormat="yyyy-MM-dd HH:mm:ss"
    [nzDisabledTime]="disabledRangeTime"
    [nzDisabledDate]="disabledDate"
></nz-date-picker>

ts 文件：

disabledDate = (current: Date): boolean => {
  // Can not select days before today and today, `differenceInCalendarDays` is in date-fns
  return differenceInCalendarDays(current, this.today) < 0;
}

disabledDateTime = (): object => {
  return {
    nzDisabledHours: () => this.range(0, 24).splice(4, 20),
    nzDisabledMinutes: () => this.range(30, 60),
    nzDisabledSeconds: () => [55, 56]
  };
}

我们可以在 nzDisabledDate、disabledDateTime 属性对应的方法中对日期或时间做任何比较操作，然后返回一个 boolean 值来告诉日期组件是否禁用某些时间。

格式化显示 - nzFormat

对于日期组件来说，格式化显示是不可或缺的，毕竟不是任何人都希望组件显示 2019-09-11 12:30:00 这种格式，还记得我无法找到合适的格式化类型，强制使用了讨厌的格式化 MMMMd日 HH:mm 吗？不过仍然不建议加文字在格式化里哈哈，看一下几种常见的格式化的使用方式吧（更多格式可参看 Angular DatePipe）：

<nz-date-picker [(ngModel)]="today" nzFormat="yyyy-MM-dd HH:mm"></nz-date-picker>
<nz-date-picker [(ngModel)]="today" nzFormat="dd/MM/yy HH:mm"></nz-date-picker>
<nz-date-picker [(ngModel)]="today" nzFormat="EE MM-dd"></nz-date-picker>

自定义日期样式 - nzDateRender

对于一些特殊情况，我们希望给予用户特殊的视觉强调，比如选择日期时强调每月第一天（如下图）该怎么做呢？

70769016bd824365d7cce9712d8a5047.png

实际上这非常容易，nz-date-picker 已经为我们准备好了 nzDateRender 属性来自定义日期单元格的内容（month-picker/year-picker不支持喔），它将上下文属性 $implicit 当前日期暴露出来供用户使用，看一下如何使用它：

<nz-date-picker [nzDateRender]="tplRender"></nz-date-picker>
<ng-template #tplRender let-current>
  <div class="ant-calendar-date" [class.first-day]="current.getDate() === 1">
    {{ current.getDate() }}
  </div>
</ng-template>

是不是很简单，我们甚至可以在 template 里做一些更多的操作，比如添加特殊日期介绍说明等等。

国际化 i18n

我们在之前项目中已经介绍了如何在 app.module.ts 中配置国际化的方式，那么是否可以在项目里动态切换呢？答案是可行的，NG-ZORRO 的国际化已经提供了运行时动态切换的方法 setLocale：

import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';
...
constructor(private i18n: NzI18nService) { }
switchLanguage() {
  this.i18n.setLocale(en_US);
}

724ba9be16445ca2153603375bbd83f9.gif
Tips：有时我们会发现某些版本里（最新版本已经解决），切换一些语言会报如下错误，这种情况可以参考这个 #4080 issue，我们也可以参考之前我们完成的 locale 设定 一部分解决。 
NzXXXComponent.html:12 ERROR Error: Missing locale data for the locale "zh-cn".
    at findLocaleData (core.js:28663)
    at getLocaleId (common.js:974)
    at getNamedFormat (common.js:1523)
    ...
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)
    at checkAndUpdateView (core.js:38382)
    at callViewAction (core.js:38742)

使用 nz-year-picker / nz-month-picker / nz-week-picker

这些我们就不一一介绍了，它们和 nz-date-picker 拥有 共同的 API，每个组件又拥有自有的属性，我们在后面遇到的时候也会附带讲解一下，有兴趣的同学可以自行学习这部分的使用方式。

<nz-date-picker></nz-date-picker>
<nz-month-picker nzPlaceHolder="Select Month"></nz-month-picker>
<nz-week-picker nzPlaceHolder="Select Week"></nz-week-picker>

084b8faf613230a5ae7596dd2cbede09.png

总结 & 预告

我们今天介绍了 nz-date-picker 日期组件的基本使用方式和几种常见的场景，实现了日期组件的日期范围禁用、自定义模板、动态切换语言等功能，日期 / 时间组件还有不少值得我们关注的属性及使用方法，但是我们第一部分旨在带领大家学习基本的组件知识，每一个属性都去介绍说明显然是不现实的，在后面的项目遇到的话我们会进行介绍，如果大家有兴趣可以去官方网站了解更多的知识和在线示例，想必会有更多的收获。

明天会继续讲解 NG-ZORRO 的另一个组件 Drawer 抽屉组件，感兴趣的同学可以先行查看一下。

相关资料

  • iThelp 文章地址：
[Angular 元件庫 NG-ZORRO 基礎入門] Day 10 - DatePicker - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天​ithelp.ithome.com.tw
f3681d72ea4fb0ef2f801fea576e4e8e.png
  • 今日 github 代码：
simplejason/ng-zorro-ironman2020​github.com
ff3a0abfd7f1380efc7a0f01a6e7066a.png
  • Date 日期组件：
日期选择框 DatePicker - NG-ZORRO​ng.ant.design
  • i18n 国际化设置：
国际化 - NG-ZORRO​ng.ant.design
weixin_39595271
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【愚公系列】2023年10月 WPF控件专题 DatePicker控件详解
时光隧道
08-08 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF自定义DatePicker实现仿HTML5日期选择控件功能
dnazhd的博客
01-14 1418
最近重写了WPF自带的DatePicker控件样式，可响应鼠标滚轮、键盘等事件修改日期，效果如图： 话不多说，直接上源码： 1、主窗体xaml： <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
带有“年月日时分秒”的时间选择器
web
07-13 1675
效果： 说明：我用的是Ant Design of Angular组件库，我的项目使用是Angular CLI 9.0.7。效果是这个组件库里的效果，我在这里想说的是：使用过程中遇见的bug 1、官网实例 地址：https://ng.ant.design/components/date-picker/zh 算了，copy一份吧 import { Component } from '@angular/core'; import differenceInCalendarDays from 'date-fns/
WPF,datepicker加上时分秒的选择，年月日时分秒
qq_42707143的博客
10-22 5091
自定义控件 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.Primitives; namespace LAP_A.Resource.Controller {
WPF中的日期控件Calendar和DatePicker
qq_3517289697的博客
05-09 668
Calendar允许用户使用可视的日历显示来选择日期，DatePicker允许用户选择日期的控件。
DatePicker 高级版实现（支持时分秒选择）
weixin_41045657的博客
11-04 1127
DatePicker 高级版本实现（支持时分秒选择）实现效果DatePicker.XAMLCalendar XAMLCalendarAttrach.cs WPF 自带日期控件功能太差了，而且Calendar是不可以继承的，思而再三，手撸一个 实现效果 DatePicker.XAML 中间穿插了几个自定义扩展样式（相对比较简单，自行实现） <ControlTemplate x:Key="IMS.ControlTemplate.DatePick" TargetType="{x:Type Dat
WPF 自定义DateTimePicker（带时分秒选择）
热门推荐
我们都有一个家名字叫中华
08-04 1万+
大家好，好久不写博客了，这几天比较闲在，想了想把最近学习WPF和项目中用到的一些控件啊和知识分享给大家。 在项目中我们经常用到时间选择器，winfrom中就有datetimepicker这个控件，但是wpf中只能选择到天，不能选择时分秒，在网上找了半天也没有发现一个合适的，于是准备自己写一个，但是呢自己写又觉得可能不是很美观就想着从GitHub上找一个模板来自己改一下，我在GitHub上边是这样搜索的： 然后选择关于C#的那一栏，然后就开始了漫长的寻找之旅......... 最终，我找到了一个
WPF DatePicker与Calendar的使用和样式修改
lvxingzhe3的博客
01-03 3266
WPF DatePicker与Calendar的使用和样式修改(可选择日期和时间)
WPF DatePicker自定义样式
jsrgckf的专栏
09-19 3271
效果图： <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns...
WPF -- 设置 DatePicker 的日期时间显示格式
小小的熊的博客
06-20 1万+
&lt;Style TargetType="DatePickerTextBox"&gt;      &lt;Setter Property="Control.Template"&gt;          &lt;Setter.Value&gt;              &lt;ControlTemplate&gt;                  &lt;TextBox Text="
WPF自定义DatePicker日期样式，并且加“今天”按钮
鸣的博客
06-13 1305
1.界面 2.资源字典DatePickerStyle 3.事件类DatePickerCommand-今天按钮
WPF_Themes_HR.zip_-csdn_WPF_wpf 主题_wpf主题_wpf项目
07-15
6. **控件库**：主题可能包含对各种常见控件的样式定制，如Button、TextBox、ComboBox、DatePicker等，以及一些自定义的或第三方的控件样式。 7. **响应式设计**：现代应用程序往往需要适应不同的屏幕尺寸和设备，...
WPF.UI-master.zip_WPF_WPF UI_WPF-UI_master ui_wpf.ui
09-24
总结来说，WPF.UI-master.zip包含了一个与WPF UI相关的项目或库，可能包含了各种预定义的UI控件、样式、模板或者其他帮助开发者快速构建WPF应用程序的资源。利用WPF提供的特性，开发者可以创建出既美观又实用的桌面...
WPF.rar_WPF_Wpf 参考_vista_wpf开发入门
09-14
WPF入门参考,中文参考。适应于vista下面的开发。
WPF类似DatePicker的只可以选择年月的年月选择控件
07-24
这是一个类似DatePicker的只可以选择年月的年月选择控件，基于ComboBox控件，用于MVVM中的取值绑定例如：DateText="{Binding Path=xxx, Mode=OneWayToSource}".
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
wpf datepicker 月份选择
10-18
在WPF中，DatePicker控件可以用于选择日期，包括年、月和日。要选择月份，可以使用DatePicker控件的DisplayMode属性。 DisplayMode属性有两个选项：DatePickerDisplayMode和DatePickerTextBoxDisplayMode。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值