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. 昨天521表白失败,我想用Python分析一下...表白记录和聊天记录

    昨天跟喜欢的妹子表白了. 失败了!.下面是表白的聊天记录: (跟妹子已经认识一段时间) 我:灭嘤嘤,我喜欢你. 妹子:你干嘛? 我:今天520,跟你表白鸭. 妹子:那....有多喜欢? 我: 有很多很 ...

  2. jade变量声明和数据传递

    声明一个变量 - var course = 'jade'; 取得一个变量 #{course} 大括号里面写入变量命,前面加个#号就可以取得变量 在括号里面可以进行诸多都运行操作,比如大小写 #{cou ...

  3. P2002 消息扩散[SCC缩点]

    题目描述 有n个城市,中间有单向道路连接,消息会沿着道路扩散,现在给出n个城市及其之间的道路,问至少需要在几个城市发布消息才能让这所有n个城市都得到消息. 输入格式 第一行两个整数n,m表示n个城市, ...

  4. python实现字符串中如果遇到连续重复的字符只出现一次非去重

    需求:在一个字符串中, 如果遇到连续重复的字符只出现一个,(不是去重) 例:str1 = 'aabbccddaabbccdd' 输出结果为:‘abcdabcd’ 具体实现代码如下: def func( ...

  5. idea在src/main/java下新建包后项目中只显示src/main,后面的东西不显示,但在本地磁盘中是存在的

    去掉图中的勾

  6. theme-sodareload sublime编辑器主题插件还不错,不是语法高亮

    theme-sodareload   sublime编辑器主题还不错,不是语法高亮

  7. DIV半透明层

    想使用DIV半透明层时 只需加一个filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5    0.5为半透明系数 使用前 使用后 style=& ...

  8. 001_git: 版本控制软件

    一.基础配置 1.安装]# yum install -y git 2.配置用户信息配置用户联系方式:名字.email]# git config --global user.name "Mr. ...

  9. 百度UE编辑器从word粘贴公式

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  10. java+下载+大文件断点续传

    java两台服务器之间,大文件上传(续传),采用了Socket通信机制以及JavaIO流两个技术点,具体思路如下: 实现思路:1.服:利用ServerSocket搭建服务器,开启相应端口,进行长连接操 ...