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

时间:2019-04-22 03:56:51

标签: javascript angular typescript ionic-framework ionic4

我正在使用NgModel在ionic4中使用ion-datetime绑定到属性,但是,无论我在格式中包括了哪些选项,我总是会获得包含时间戳记的时间。 ¿如何才能从结果中删除时间戳,以使我的媒体资源的最终价值类似于“ 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”

8 个答案:

答案 0 :(得分:1)

您可以使用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
}

答案 1 :(得分:1)

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

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

[pickerOptions]="customPickerOptions"

和您的.ts文件中

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

希望这会有所帮助

答案 2 :(得分:1)

您可以使用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'));
}

此答案可能有帮助。我知道找到我们正在寻找的答案可能会令人沮丧。

答案 3 :(得分:0)

String input = "2019-04-22T08:45:41.243-05:00";
DateFormat inputFormatter = new SimpleDateFormat("YYYY-MM-DD HH:mm:ss.SSS");
Date date = inputFormatter.parse(input);

DateFormat outputFormatter = new SimpleDateFormat("YYYY-MM-DD");
String output = outputFormatter.format(date);

答案 4 :(得分:0)

编辑:来自Ionic文档

  

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

这是一个更好的答案:

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

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

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

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

  2. 从“date-fns”导入{格式};在您的 .ts 文件中

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

  4. format(new Date(date_x), "yyyy-MM-dd"); 您应该在控制台中得到结果 => '2019-11-29'

答案 7 :(得分:0)

<块引用>

这是获取准确时间的最佳方式 首先像这样创建$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