如何使用ionic 2删除日期中的时间戳?

时间:2017-03-03 10:44:00

标签: angular calendar ionic2

我在此插件Ionic 2 Calender的帮助下显示日历。在这里,我在按钮中显示日历。日历显示带时间戳的日期,但我只想显示日期。

.ts

onTimeSelected(ev) {
     let data=this.isToday;
     this.viewCtrl.dismiss({"selecteddate":data});
     this.navCtrl.push(HomePage,{
     selecteddate:ev.selectedTime 
   });
}

.html

<calendar [calendarMode]="calendar.mode"       
          [currentDate]="calendar.currentDate" 
          (onCurrentDateChanged)="onCurrentDateChanged($event)" 
          [markDisabled]="markDisabled" 
          (onTitleChanged)="onViewTitleChanged($event)" 
          (onTimeSelected)="onTimeSelected($event)" 
          [eventSource]="eventSource" 
          autoSelect="false" 
          step="30"> 
</calendar>

1 个答案:

答案 0 :(得分:0)

这可以使用angular 2 date pipe

来实现

<body> <div class="container"> <header> <h1>Our Collection</h1> <nav> <ul> <li><a href="#tabs-1">Menu1</a></li> <li><a href="#tabs-2">Menu2</a></li> <li><a href="#tabs-3">Menu3</a></li> <li><a href="#tabs-3">Menu4</a></li> </ul> </nav> </header> <div class="container" id="body-layout"> <div id="left-nav-bar" class="left-nav">left nav contents</div> <div id="content" class="right-content">main content area</div> </div> <footer>Copyright under process © Company Name 2017-2020.</footer> </div> </body> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { background: #F5F4EF; margin: 0; } * { padding: 0; margin: 0; } .container { display: flex; flex-direction: column; height: 100vh; } article { flex: 1; } header, footer { padding: 1em; color: #F5F4EF; background-color: black; text-align: center; } header nav { text-align: left; } nav li { display: inline-block; } nav { margin: 0; padding: 0; overflow: hidden; background-color: black; } nav a { color: #F5F4EF; } /* Headings */ h1 { font-size: 1.651em } h2 { font-size: 1.571em } /* 22px */ h3 { font-size: 1.429em } /* 20px */ h4 { font-size: 1.286em } /* 18px */ h5 { font-size: 1.143em } /* 16px */ h6 { font-size: 1em } /* 14px */ h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; color: #F5F4EF; } .left-nav { background-color: Red; float: left; width: 30%; height: 100%; } .right-content { background-color: Aqua; margin-left: 70%; height: 100%; } 中,您可以将日期管道添加到.html属性,这会将时间戳日期转换为您要使用的格式(查看上面的链接以查看所有格式类型)

[currentDate]

还有与模块本身相关联的format options。这似乎特定于在模块特定属性中格式化日期。