Ionic4.x 中的 UI 组件(UI Components) 日期组件
1、日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime
模板中:
<ion-datetime display-format="YYYY-MM-DD" [(ngModel)]="day"></ion-datetime>
<ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY"></ion-datetime>
业务逻辑中:
引入第三方模板把时间戳转化成 年-月-日的格式
import sd from 'silly-datetime';
constructor() {
this.day=sd.format(new Date(), 'YYYY-MM-DD');
}
2、自定义日期组件的 Options
<ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" ></ion-datetime>
public customPickerOptions = {
buttons: [{
text: '取消',
handler: () =>
console.log('Clicked Save!')
},
{
text: '保存',
handler: () => {
console.log('Clicked Log. Do not Dismiss.'); }
}] }
实例:
https://www.npmjs.com/package/silly-datetime 引入第三方格式化模块
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
</ion-buttons>
<ion-title>datetime日期组件</ion-title>
</ion-toolbar>
</ion-header> <ion-content padding> <ion-list>
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" placeholder="选择日期"></ion-datetime>
</ion-item>
</ion-list> <br> <ion-list>
<ion-item>
<ion-label>双向数据绑定</ion-label>
<ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" [(ngModel)]="day"></ion-datetime>
</ion-item>
</ion-list> <ion-list>
<ion-item>
<ion-label>显示当前日期</ion-label>
<ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" [(ngModel)]="nowDay" (ionChange)="datetimeChange($event)"></ion-datetime>
</ion-item>
</ion-list> <ion-list>
<ion-item>
<ion-label>汉化日期按钮</ion-label>
<ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" picker-format="YYYY MM DD" [(ngModel)]="nowDay" (ionChange)="datetimeChange($event)"></ion-datetime>
</ion-item>
</ion-list> {{day}}
</ion-content>
import { Component, OnInit } from '@angular/core'; //格式化日期的第三方模块 引用 cnpm import sd from 'silly-datetime'; @Component({
selector: 'app-datetime',
templateUrl: './datetime.page.html',
styleUrls: ['./datetime.page.scss'],
})
export class DatetimePage implements OnInit { day = '2019-02-13' public nowDay; //自定义option
public customPickerOptions = {
buttons: [{
text: '取消',
handler: () => console.log('Clicked 取消!')
}, {
text: '确认',
handler: () => {
console.log('Clicked 确认');
// return false;
console.log(this.nowDay);
}
}]
}
constructor() {
//var d=new Date();
//Thu Feb 14 2019 15:57:43 GMT+0800 (中国标准时间)
this.nowDay = sd.format(new Date(), 'YYYY-MM-DD');
}
ngOnInit() {
}
datetimeChange(e) {
console.log(e.detail.value);
console.log(this.nowDay);
}
}
效果:
Ionic4.x 中的 UI 组件(UI Components) 日期组件的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- 【shadow dom入UI】web components思想如何应用于实际项目
回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...
- Android开发1:基本UI界面设计——布局和组件
前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(六)Picker View视图 学习笔记
想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...
- 第32讲 UI组件之 时间日期控件DatePicker和TimePicker
第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置, Time ...
- amazeui-js插件-ui增强-日期组件如何使用(把实例做一下)
amazeui-js插件-ui增强-日期组件如何使用(把实例做一下) 一.总结 一句话总结:需要jquery.js和amazeui.js一切才能使用 1.amazeui中的各种js效果要怎么才能使用? ...
- 拒绝卡顿——在WPF中使用多线程更新UI
原文:拒绝卡顿--在WPF中使用多线程更新UI 有经验的程序员们都知道:不能在UI线程上进行耗时操作,那样会造成界面卡顿,如下就是一个简单的示例: public partial class MainW ...
- 在Android Studio中进行单元测试和UI测试
本篇教程翻译自Google I/O 2015中关于测试的codelab,掌握科学上网的同学请点击这里阅读:Unit and UI Testing in Android Studio.能力有限,如有翻译 ...
随机推荐
- 剖析.o文件ELF组成
ELF文件结构组成 ①总共13个节 ②每个节都有一个编号.从ELF头开始编号,编号从0开始,编号的作用就是用来索引(找到)不同节的. ③每个.o的都是这样的结构.链接时要做的就是,将ELF格式的.o全 ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- React 零碎笔记
1.对数组的操作(添加.更新.删除) const posts = [...this.state.posts]; posts.push(post); this.setState({posts}); =& ...
- 集成百度编辑器 ueditor 后端配置项没有正常加载,上传插件不能正常使用!
项目要用到编辑器,于是集成了ueditor,集成ok,但一直显示 ‘’后端配置项没有正常加载,上传插件不能正常使用!‘’ 各种查: 网上说的无非就是那么集中情况 1. 因为百度官方的问题,php/co ...
- urlrewrite与struts2结合使用基本配置
1.更改web.xml,,,在struts2拦截器前面添加urlrewrite配置信息,,默认是forward的 <filter> <filter-name>UrlRewrit ...
- Solr添加paoding分词器
1.Solr3.6.2 并可运行 paoding-analysis3.0.jar 下载 2.1 解压{$Solr-Path}/example/webapp 下的solr.war文件,解压到当前文件夹 ...
- python - threading.local
import time import threading try: # 线程和协程都可处理 import greenlet get_ident = greenlet.getcurrent except ...
- ES6遍历器 生成器 学习整理
遍历器[迭代器](Iterator) 就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所 ...
- 约瑟夫问题O(n)/O(mlogn)
题面 略 题解 约瑟夫问题.编号000~n−1n-1n−1,每次拿第mmm个. O(n)O(n)O(n):f[n]f[n]f[n]表示幸存的人的编号,f[n]=(f[n−1]+m)%nf[n]=(f[ ...
- 46、[源码]-Spring容器创建-注册BeanPostProcessors
46.[源码]-Spring容器创建-注册BeanPostProcessors 6.registerBeanPostProcessors(beanFactory);注册BeanPostProcesso ...