我有一个离子模态,呈现一个为锦标赛创建的模态。在模型内部,我希望有一个通过datetime-button
呈现的日期时间选择器,这样用户就可以选择 * 何时 * 比赛将发生。现在,如果我删除日期时间选择器,它可以完美地加载。当我添加它时,它加载一个空白点,页面底部在渲染器底部的下方(在本例中,我使用的是Firefox开发工具模拟iPhone SE)我将包括一些图片,但代码如下
下面是显示的控制台错误,以及相关代码:TypeError: baseParts is undefined
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { p as printIonWarning } from './index6.js';
/**
* Returns true if the selected day is equal to the reference day
*/
const isSameDay = (baseParts, compareParts) => {
return (baseParts.month === compareParts.month && baseParts.day === compareParts.day && baseParts.year === compareParts.year);
};
/**
* Returns true is the selected day is before the reference day.
*/
// This is the function that errors
const isBefore = (baseParts, compareParts) => {
return !!(baseParts.year < compareParts.year ||
(baseParts.year === compareParts.year && baseParts.month < compareParts.month) ||
(baseParts.year === compareParts.year &&
baseParts.month === compareParts.month &&
baseParts.day !== null &&
baseParts.day < compareParts.day));
};
<ion-col class="createTournyModal__content--col" size="12">
<ion-item class="createTournyModal__content--item">
<ion-input
label="Tournament Name"
labelPlacement="floating"
name="name"
type="text"
autofocus
required
v-model="tournamentInputs.name"
class="createTournyModal__content--input"
/>
</ion-item>
<div
class="createTournyModal__errors input-errors"
v-for="error of tournament$v.name.$errors"
:key="error.$uid"
>
<div class="error-msg">{{ error.$message }}</div>
</div>
</ion-col>
<ion-col class="createTournyModal__content--col" size="12">
<ion-item class="createTournyModal__content--item">
<ion-input
label="Game"
labelPlacement="floating"
name="game"
type="text"
required
v-model="tournamentInputs.game"
class="createTournyModal__content--input"
/>
</ion-item>
<div
class="createTournyModal__errors input-errors"
v-for="error of tournament$v.game.$errors"
:key="error.$uid"
>
<div class="error-msg">{{ error.$message }}</div>
</div>
</ion-col>
<ion-col class="createTournyModal__content--col" size="12">
<ion-item class="createTournyModal__content--item">
<ion-datetime-button
datetime="tournyDatetime"
color="primary"
></ion-datetime-button>
</ion-item>
<ion-popover :keep-contents-mounted="true">
<ion-datetime
id="tournyDatetime"
:min="now"
v-model="tournamentInputs.date"
></ion-datetime>
</ion-popover>
<div
class="createTournyModal__errors input-errors"
v-for="error of tournament$v.date.$errors"
:key="error.$uid"
>
<div class="error-msg">{{ error.$message }}</div>
</div>
</ion-col>
我在它上面包含了输入,错误div是针对vuelidate
的,这是一个验证包,问题是它看起来像这样与日期时间选择器
,这是它看起来像没有它
2条答案
按热度按时间toiithl61#
您是否尝试将
<ion-popover>
从<ion-grid>
中移出?只需将其放在<ion-grid>
之前或之后,或者一直放在<ion-content>
标记的开始或结束处(在其内部)。mwyxok5s2#
问题是变量的默认值正在加载到
date
组件中,并且在加载React变量之前无法协调默认值。一旦我将默认值从luxon
设置为DateTime.now().toISO()
,它就解决了这个问题