我在此插件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>
答案 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。这似乎特定于在模块特定属性中格式化日期。