.date-control {
    display: inline-block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
}

.date-control .sep {
    display: inline-block;
    cursor: default;
    color: inherit;
}

.date-control input[type='number'] {
    padding: 0;
    margin: 0;
    height: 100%;
    border: 0;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
    cursor: default;
    color: inherit;
}

.date-control input[type=number]::-webkit-inner-spin-button,
.date-control input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.date-control button {
    float: right;
    border: 0;
    background-color: transparent;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=);
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    block-size: 1em;
    inline-size: 1em;
    opacity: 1;
    outline: none;
    padding: 2px;
    max-width: 3ch;
    width: 100%;
    height: 100%;
    cursor: default;
    color: inherit;
}


.date-control .nativeDatePicker {
    visibility: hidden;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -100;
    height: 100%;
}