Date Duration

<et2-date-duration id="duration-basic" label="Time spent"></et2-date-duration>
<p>Value: <span id="duration-basic-out">-</span></p>
<script>
    const durationBasic = document.getElementById("duration-basic");
    const durationBasicOut = document.getElementById("duration-basic-out");
    const showDurationBasic = () => {durationBasicOut.textContent = JSON.stringify(durationBasic.value);};

    durationBasic.addEventListener("change", showDurationBasic);
    customElements.whenDefined("et2-date-duration")
        .then(() => durationBasic.updateComplete)
        .then(() => {durationBasic.value = 90;})
        // the unit selector has to catch up before value can be read back
        .then(() => durationBasic.updateComplete)
        .then(showDurationBasic);
</script>

      

      
    

<et2-date-duration id="duration-hours" label="Estimate" displayFormat="h"></et2-date-duration>
<p>Value: <span id="duration-hours-out">-</span></p>
<script>
    const durationHours = document.getElementById("duration-hours");
    const durationHoursOut = document.getElementById("duration-hours-out");
    const showDurationHours = () => {durationHoursOut.textContent = JSON.stringify(durationHours.value);};

    durationHours.addEventListener("change", showDurationHours);
    customElements.whenDefined("et2-date-duration")
        .then(() => durationHours.updateComplete)
        .then(() => {durationHours.value = 150;})
        .then(() => durationHours.updateComplete)
        .then(showDurationHours);
</script>

      

      
    

<et2-date-duration id="duration-split" label="Duration" displayFormat="hm"></et2-date-duration>
<p>Value: <span id="duration-split-out">-</span></p>
<script>
    const durationSplit = document.getElementById("duration-split");
    const durationSplitOut = document.getElementById("duration-split-out");
    const showDurationSplit = () => {durationSplitOut.textContent = JSON.stringify(durationSplit.value);};

    durationSplit.selectUnit = false;
    durationSplit.addEventListener("change", showDurationSplit);
    customElements.whenDefined("et2-date-duration")
        .then(() => durationSplit.updateComplete)
        .then(() => {durationSplit.value = 135;})
        .then(() => durationSplit.updateComplete)
        .then(showDurationSplit);
</script>

      

      
    

<et2-date-duration id="duration-8h" label="8 hour day" displayFormat="dh"></et2-date-duration>
<et2-date-duration id="duration-6h" label="6 hour day" displayFormat="dh" hoursPerDay="6"></et2-date-duration>
<script>
    const duration8h = document.getElementById("duration-8h");
    const duration6h = document.getElementById("duration-6h");

    customElements.whenDefined("et2-date-duration")
        .then(() => Promise.all([duration8h.updateComplete, duration6h.updateComplete]))
        .then(() => {
            duration8h.value = 960;
            duration6h.value = 960;
        });
</script>

      

      
    

<et2-date-duration id="duration-zero" label="Empty is 0" displayFormat="h"></et2-date-duration>
<et2-date-duration id="duration-empty" label="Empty is empty" displayFormat="h" emptyNot0></et2-date-duration>
<p>Values: <span id="duration-empty-out">-</span></p>
<script>
    const durationZero = document.getElementById("duration-zero");
    const durationEmpty = document.getElementById("duration-empty");
    const durationEmptyOut = document.getElementById("duration-empty-out");
    const showDurationEmpty = () =>
    {
        durationEmptyOut.textContent = JSON.stringify(durationZero.value) + " / " + JSON.stringify(durationEmpty.value);
    };

    durationZero.addEventListener("change", showDurationEmpty);
    durationEmpty.addEventListener("change", showDurationEmpty);
    customElements.whenDefined("et2-date-duration")
        .then(() => Promise.all([durationZero.updateComplete, durationEmpty.updateComplete]))
        .then(showDurationEmpty);
</script>

      

      
    

<et2-date-duration id="duration-short" label="Spent" shortLabels></et2-date-duration>
<script>
    const durationShort = document.getElementById("duration-short");

    customElements.whenDefined("et2-date-duration")
        .then(() => durationShort.updateComplete)
        .then(() => {durationShort.value = 45;});
</script>