How can we setup minDate for datetime-local dynamically?-CodePudding

I have two inputs one start date and other end date and I want end Date to have min as Start date. How can I populate end date to be same as start date when start date is filled and the min to be start date as well and disabled otherwise

<div>
    <small id="inputHelp" >Enter Time (UTC Format)</small>
</div>
<div>
    <label for="startTime">Start Time:</label>
    <input type="datetime-local"  id="startTime" ng-model="startTime" max="{{maxDate | date: 'yyyy-MM-ddTHH:mm:ss'}}">
</div>
{{startTime}}
<div>
    <label for="endTime">End Time:</label>
    <input type="datetime-local"  id="endTime" ng-model="endTime" [disabled]="!startTime">
</div>

The endDate is disabled as of now. New to angular not sure how to handle the same

CodePudding user response：

Please check below working code:

function handler(e) 
{
    document.getElementsByName("endTime")[0].min = e.target.value;
        document.getElementsByName("endTime")[0].value = '';
        document.getElementsByName("endTime")[0].disabled = false;
    }

<div>
        <small id="inputHelp" >Enter Time (UTC Format)</small>
    </div>
    <div>
        <label for="startTime">Start Time:</label>
        <input type="datetime-local"  id="startTime" ng-model="startTime" max="{{maxDate | date: 'yyyy-MM-ddTHH:mm:ss'}}" onchange="handler(event)">
    </div>
    {{startTime}}
    <div>
        <label for="endTime">End Time:</label>
        <input type="datetime-local"  name="endTime" id="endTime" ng-model="endTime" disabled>
    </div>

Rest I know you will manage from your end the framework part. Please let me know if you find any issues with the code