ion-datetime:如何获取没有时间戳的日期值?

Posted

技术标签:

【中文标题】ion-datetime:如何获取没有时间戳的日期值?【英文标题】:ion-datetime: How to get date value without timestamp? 【发布时间】:2019-09-11 07:46:27 【问题描述】:

我在 ionic4 中使用 ion-datetime 并使用 NgModel 绑定到一个属性,但是,无论我在格式中包含哪些选项,我总是会得到包含时间戳的时间。 ¿如何从结果中删除时间戳,以便我的属性的最终值类似于“2019-04-22”而不是“2019-04-22T08:45:41.243-05:00”?

我试过了:但是,我仍然得到时间戳

 <ion-datetime max="2030" min="2019" [(ngModel)]="mydate" display-format="MMM DD, YYYY"></ion-datetime>

我希望结果类似于:“2019-04-22”,但我不断得到:“2019-04-22T08:45:41.243-05:00”

【问题讨论】:

您能否更具体地了解您在哪里获得时间戳?你能展示产生它的代码吗?我猜它在您的打字稿中,您尝试访问mydate 【参考方案1】:

这是获得准确时间的最佳方式 首先像这样创建 $event 方法

    changeTime(e) 
        this.sentTempTime = "";
        let hoursMinutes = e.split(':');
        this.sentTime = this.formatTime(hoursMinutes);
    

然后像这样创建 formatTime() 方法

formatAMPM(date) 
    var hours = date[0].toString().split('T'); //22
    var minutes = date[1]; //11
    var ampm = hours[1] >= 12 ? 'pm' : 'am'; //22 >=12 yes == pm
    hours =  hours[1] >= 12 ? hours[1] - 12 : hours[1]; //22 >= 12 ? 22-12=10 
    var strTime = hours + ':' + minutes + ampm;
    return strTime;
  

之后你可以得到像这样的时间 08:15pm

【讨论】:

【参考方案2】:

    通过 npm i --save date-fns 安装 date-fns

    从“日期-fns”导入格式;在你的 .ts 文件中

    让 date_x = "2019-11-30T14:42:30.951+08:00";

    格式(新日期(date_x),“yyyy-MM-dd”); 您应该在控制台中得到结果 => '2019-11-29'

【讨论】:

【参考方案3】:

你可以使用 moment.js

在您的 file.page.html

    <ion-datetime [(ngModel)]="mydate" placeholder=""></ion-datetime>

在您的 file.page.ts 中

import moment from 'moment';

<!-- to pass data to your API -->
mydate = moment(mydate).format('YYYY-MM-DD');

<!-- to view in console -->
yourFunction(mydate) 
    console.log('date', moment(mydate).format('YYYY-MM-DD'));

希望这个答案有所帮助。我知道找到我们正在寻找的答案是多么令人沮丧。

【讨论】:

【参考方案4】:

您可以使用自定义选择器选项来设置自定义按钮,它会返回一个对象,其中所有变量都位于单独的键中,因此可以更轻松地编辑您想要的显示方式

为此,您可以将其插入到您的 ion-datetime 中

[pickerOptions]="customPickerOptions"

在您的 .ts 文件中

this.customPickerOptions = 
            buttons: [
                
                    text: 'Save',
                    handler: (time) => 
                        console.log('time', time);
                    
                ,
                
                    text: 'Cancel',
                    handler: e => 
                        modalCtrl.dismiss(e)
                    
                
            ]
        

希望对你有帮助

【讨论】:

【参考方案5】:

Edit2:toLocaleFormat 未被广泛接受。 Here 是关于替代品的帖子。您可以将其拆分为 T

const dateArray = fullDateString.split('T');
if (dateArray.length > 0)
    const partYouWant = dateArray[0];

编辑:来自 Ionic 文档

同样重要的是要注意 displayFormat 或 pickerFormat 可以设置日期时间值的输出,也就是值 由组件的 ngModel 设置。格式仅用于 将值显示为文本和选择器的界面,但 日期时间的值始终作为有效的 ISO 8601 日期时间保留 字符串。

这是一个更好的答案:

const dateObject = new Date(this.mydate);
const dateString = dateObject.toLocaleFormat('%Y-%m-%d');

new Date 的输入可以是 date string,定义为:

代表日期的字符串值。字符串应该是一个格式 由 Date.parse() 方法识别(符合 IETF 的 RFC 2822 时间戳和 ISO8601 版本)。


我猜你正试图在你的代码中访问this.mydate

您有多种选择,最好的代表是this stack overflow post。

this.mydate.toLocaleFormat('%Y-%m-%d');

此函数将采用Date 对象并将其转换为您请求格式的字符串。您可以在选项中输入的所有选项都是here。

上面的堆栈溢出帖子中还显示了许多其他选项。

【讨论】:

我进入控制台:“.toLocaleFormat 不是函数”可能 不返回日期对象 TypeError: eventDay.toLocaleFormat 不是函数 它是一个日期对象吗?你用的是什么浏览器? 编辑我的答案只是为了拆分字符串以获得您想要的值并解释为什么 toLocaleFormat 未被广泛接受。【参考方案6】:

如果你只想要日期,那么我认为 split() 方法可能有效,因为我们从 ion-datetime 得到的值是一个字符串。所以我们使用 split 方法将字符串拆分并将其转换为数组,你可以得到日期或者在索引的帮助下你想要的时间如下:

     var dateFormat = mydate.split('T')[0]; 
     console.log(dateFormat);
     // 2019-04-22

【讨论】:

【参考方案7】:

您可以使用 Moment.js 格式化日期。

<ion-datetime displayFormat="MMM DD, YYYY" max="2030" min="2019" [(ngModel)]="mydate" (ionChange)="doSomething(this.mydate)"></ion-datetime>

import * as moment from 'moment';

doSomething(date) 
   console.log('date', moment(date).format('YYYY-MM-DD')); // 2019-04-22

【讨论】:

ion-datetime 有 1-12 个月,moment 有 0-11 个月。没用。

以上是关于ion-datetime:如何获取没有时间戳的日期值?的主要内容,如果未能解决你的问题,请参考以下文章

Java程序获取没有时间戳的当前日期

在 DB2 中获取没有时间戳的日期

ionic 2 ion-datetime ISO 格式问题

如何以毫秒为单位获取带有 unix 时间戳的人类可读日期? [复制]

php获取今天某个时间的时间戳的方法

我如何将 Bootstrap 3 Datepicker 自定义为仅没有时间戳的日期