Blazor에서 Timepicker UI 생성하기

날짜를 입력받는 Timepicker 생성하기

웹 페이지를 작성하다 보면 날짜를 입력받고 세팅해야 하는 상황이 생기기 마련입니다. 이때 Bootstrap에서 지원하는 datetime-local을 사용하면 간단하게 날짜를 입력받고 세팅하는 게 가능합니다.

 

예제 코드

@{
    <h1>Show a Date and Time Control</h1>

    <label for="birthdaytime">Birthday (date and time):</label>
    <input type="datetime-local" id="birthdaytime" name="birthdaytime" @bind-value=birthdaytime>
    <input type="submit">

    <p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>
}

@code
    // 초기화하지 않으면 UI에서 시간을 변경해도 정상적으로 작동하지 않는다. 꼭 초기화 해주자.
    private DateTime birthdaytime = DateTime.UtcNow;
    
    private void GetBirthdaytime()
    {
        Console.WriteLine(birthdaytime);
    }
}

 

TimePicker로 편하게 날짜 설정이 가능해졌다.