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) 日期组件的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  3. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  4. Android开发1:基本UI界面设计——布局和组件

    前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望 ...

  5. 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(六)Picker View视图 学习笔记

    想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...

  6. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  7. amazeui-js插件-ui增强-日期组件如何使用(把实例做一下)

    amazeui-js插件-ui增强-日期组件如何使用(把实例做一下) 一.总结 一句话总结:需要jquery.js和amazeui.js一切才能使用 1.amazeui中的各种js效果要怎么才能使用? ...

  8. 拒绝卡顿——在WPF中使用多线程更新UI

    原文:拒绝卡顿--在WPF中使用多线程更新UI 有经验的程序员们都知道:不能在UI线程上进行耗时操作,那样会造成界面卡顿,如下就是一个简单的示例: public partial class MainW ...

  9. 在Android Studio中进行单元测试和UI测试

    本篇教程翻译自Google I/O 2015中关于测试的codelab,掌握科学上网的同学请点击这里阅读:Unit and UI Testing in Android Studio.能力有限,如有翻译 ...

随机推荐

  1. 剖析.o文件ELF组成

    ELF文件结构组成 ①总共13个节 ②每个节都有一个编号.从ELF头开始编号,编号从0开始,编号的作用就是用来索引(找到)不同节的. ③每个.o的都是这样的结构.链接时要做的就是,将ELF格式的.o全 ...

  2. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  3. React 零碎笔记

    1.对数组的操作(添加.更新.删除) const posts = [...this.state.posts]; posts.push(post); this.setState({posts}); =& ...

  4. 集成百度编辑器 ueditor 后端配置项没有正常加载,上传插件不能正常使用!

    项目要用到编辑器,于是集成了ueditor,集成ok,但一直显示 ‘’后端配置项没有正常加载,上传插件不能正常使用!‘’ 各种查: 网上说的无非就是那么集中情况 1. 因为百度官方的问题,php/co ...

  5. urlrewrite与struts2结合使用基本配置

    1.更改web.xml,,,在struts2拦截器前面添加urlrewrite配置信息,,默认是forward的 <filter> <filter-name>UrlRewrit ...

  6. Solr添加paoding分词器

    1.Solr3.6.2 并可运行 paoding-analysis3.0.jar  下载 2.1 解压{$Solr-Path}/example/webapp 下的solr.war文件,解压到当前文件夹 ...

  7. python - threading.local

    import time import threading try: # 线程和协程都可处理 import greenlet get_ident = greenlet.getcurrent except ...

  8. ES6遍历器 生成器 学习整理

    遍历器[迭代器](Iterator) 就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所 ...

  9. 约瑟夫问题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[ ...

  10. 46、[源码]-Spring容器创建-注册BeanPostProcessors

    46.[源码]-Spring容器创建-注册BeanPostProcessors 6.registerBeanPostProcessors(beanFactory);注册BeanPostProcesso ...