Remove value from HTML5 date input using TestCafe?

Question

I can't seem to remove the value in an HTML5 date input with TestCafe after it's been set. I've tried typeText and pressKey so far; typeText works for setting a new date but can't input an empty string, while using delete and backspace with pressKey doesn't remove the value as it does when manually performing the same action. I also can't/don't know how to click the x on the field itself.

Is there something I'm missing/doing wrong, or is this not possible?

typeText

test('typeText', async t => {
    await t
        .typeText('#dateField', '', { replace: true });

    await t
        .expect(Selector('#dateField').value).eql('');
});

1) The "text" argument is expected to be a non-empty string, but it was "".

pressKey

test('pressKey', async t => {
    await t
        .click('#dateField')
        .pressKey('delete'); // 'backspace' also does not work

    await t
        .expect(Selector('#dateField').value).eql('');
});

1) AssertionError: expected '2019-05-02' to deeply equal ''

Answer 1

According to TestCafe's typing formats for HTML5 inputs, you can use the typeText action the following way:

test('test', async t => {
    await t
        .typeText('#start', '2017-12-23')
        .expect(Selector('#start').value).eql('2017-12-23')
 
        .typeText('#start', '    -  -  ')
        .expect(Selector('#start').value).eql('');
});