Aurelia 验证一个日期时间大于另一个日期时间

Aurelia validate one datetime is greater than the other

提问人:Clare Barrington 提问时间:2/29/2016 最后编辑:Clare Barrington 更新时间:3/24/2016 访问量:1321

问:

我有两个来自数据库的日期/时间,但是它们在视图上被分成四个(两个日期和两个时间),日期和时间都是自定义元素。见下文。

enter image description here

我的问题是我的开始日期/时间不能大于我的结束日期/时间。我知道如何在 c# 中做到这一点:

  • 检查日期字符串是否包含默认时间 00:00:00,如果是,请删除。
  • 在新的日期时间中解析日期/时间字符串
  • 重复第二个日期/时间
  • 验证是否从 < 到 (return from < to)

但是我不知道如何在不进行 API 调用的情况下在 Aurelia 中做到这一点。我已经注意到,但是我需要先将字符串解析为日期时间,然后才能这样做。isLessThan

      bind(){
            return this.dataContext.getContent(this.id)
                .then(baseContent => {
                    this.baseContent = baseContent;
                     this.validator = this.validation.on(this)                                         
    .ensure('baseContent.ValidFromDate').isNotEmpty()
                            .ensure('baseContent.ValidFromTime').isNotEmpty()
                            .ensure('baseContent.ValidToDate').isNotEmpty()
                            .ensure('baseContent.ValidToTime').isNotEmpty()
.ensure('baseContent.ValidFromDate / baseContent.ValidFromTime').isLessThan('baseContent.ValidToDate / baseContent.ValidToTime')
;
                }); }

我知道上述内容不起作用,我是 Aurelia 的新手,但仍然在使用它。

更新

我尝试了以下方法,但收到了:

未处理的 promise 拒绝 TypeError:path.split 不是函数

我认为问题是它不知道将错误消息分配给什么,但我可能是错的。

.ensure(this.datetimeformat.format(baseContent.ValidFromDate, baseContent.ValidFromTime)).isLessThan(this.datetimeformat.format(baseContent.ValidToDate, baseContent.ValidFromTime));

import moment from 'moment';

export class DateTimeFormat {
    format(date, time) {

        if (date.indexOf("T") > -1) {
            date = date.split('T')[0];
        }

        return moment(date + 'T' + time, 'DD/MM/YYYY HH:mm:ss');
    }
}

我注意到其中一个答案使用了 computedFrom,但是因为我需要先将它们更改为 DateTime,然后解析回来,我不知道我应该在哪里提供什么。

更新

.ensure('baseContent.ValidFromDate', (config) => { config.computedFrom(['baseContent.ValidFromDate', 'baseContent.ValidFromTime', 'baseContent.ValidToDate', 'baseContent.ValidToTime']) }).isNotEmpty().passes(() => {
                        return this.datetimeformat.format(this.baseContent.ValidFromDate, this.baseContent.ValidFromTime) < this.datetimeformat.format(this.baseContent.ValidToDate, this.baseContent.ValidToTime);
                    })

我想我越来越近了,但仍然没有工作:-(

我也试过了

.ensure('baseContent.ValidFromDate', (config) => { config.computedFrom(['baseContent.ValidFromDate', 'baseContent.ValidFromTime', 'baseContent.ValidToDate', 'baseContent.ValidToTime']) }).if(() => {
                        return this.baseContent.ValidFromDate !== null && this.baseContent.ValidFromTime !== null && this.baseContent.ValidToDate !== null && this.baseContent.ValidToTime !== null})
                        .passes( () => {return this.datetimeformat.format(this.baseContent.ValidFromDate, this.baseContent.ValidFromTime) < this.datetimeformat.format(this.baseContent.ValidToDate, this.baseContent.ValidToTime)})
                    .endIf().isNotEmpty()

开发人员工具没有错误。

function validateFromDateTimeIsBeforeToDateTime(dateFrom, timeFrom, dateTo, timeTo) {
        debugger;
        if (dateFrom !== null && dateFrom !== undefined &&
        timeFrom !== null && timeFrom !== undefined &&
        dateTo !== null && dateTo !== undefined &&
        timeTo !== null && timeTo !== undefined) {

            return this.datetimeformat.format(dateFrom, timeFrom) < this.datetimeformat.format(dateTo, timeTo);
    } 
    else {
        return true;
    }
}

                    .ensure('baseContent.ValidFromDate').isNotEmpty().passes(validateFromDateTimeIsBeforeToDateTime(this.baseContent.ValidFromDate, this.baseContent.ValidFromTime, this.baseContent.ValidFromDate, this.baseContent.ValidFromTime))
                    .ensure('baseContent.ValidFromTime').isNotEmpty()
                    .ensure('baseContent.ValidToDate').isNotEmpty().passes(validateFromDateTimeIsBeforeToDateTime(this.baseContent.ValidFromDate, this.baseContent.ValidFromTime, this.baseContent.ValidFromDate, this.baseContent.ValidFromTime))
                    .ensure('baseContent.ValidToTime').isNotEmpty()

但是,这会引发“未处理的承诺拒绝 TypeError:无法获取未定义或 null 引用的属性 'datetimeformat'”

验证日期 时间 aurelia custom-element

评论


答:

0赞 Todd Price 3/1/2016 #1

在这种情况下,我建议使用 ubiquitous moment.js 库:

jspm install moment

然后像这样使用它,例如:

import moment from 'moment';

export class MyViewModel {
  date1 = "2016-02-29";
  time1 = "09:00:00";
  date2 = "2016-03-01";
  time2 = "13:00:00";

  myMethod() {
    let isValid = moment(`${this.date1 this.time1`).isBefore(moment(`${this.date2 this.time2`));
    alert(isValid);
  }
}

评论

0赞 Clare Barrington 3/9/2016
如果我在父项中创建它,我如何称呼它?即 this.validator = this.validation.on(this).ensure(myMethod)?对不起,我对此很陌生,我花了一段时间才弄清楚。
-1赞 user5246190 3/4/2016 #2
.ensure('toDate', (config) => {config.computedFrom(['fromDate'])})
   .isGreaterThan( () => {return this.fromDate}, 'the entered Date');

评论

0赞 Clare Barrington 3/9/2016
如何连接日期和时间?
0赞 Clare Barrington 3/24/2016 #3

经过大量调查,修复了这里和那里的错误,我注意到突出的问题来自我的格式化类,它没有正确创建日期/时间(使用 moment.js)(在用户从日历中选择之后),这意味着它返回了您无法比较的“无效日期”:-|

这将起作用:

this.validator = this.validation.on(this)
                    .ensure('baseContent.ValidFromDate', (config) => { config.computedFrom(['baseContent.ValidFromDate', 'baseContent.ValidFromTime', 'baseContent.ValidToDate', 'baseContent.ValidToTime']) })
                        .if(() => {
                            return this.baseContent.ValidFromDate !== null && this.baseContent.ValidFromTime !== null && this.baseContent.ValidToDate !== null && this.baseContent.ValidToTime !== null })
                            .passes( () => { return this.datetimeformat.format(this.baseContent.ValidFromDate, this.baseContent.ValidFromTime) < this.datetimeformat.format(this.baseContent.ValidToDate, this.baseContent.ValidToTime) })
                            .withMessage('< Valid To')
                        .endIf()