WinUI 3 날짜 선택기 컨트롤 - 날짜 선택에 적합한 도구
이 블로그에서는 응용 프로그램에 WinUI 날짜 선택기 컨트롤을 포함하고 그 기능을 사용하는 방법을 배울 것이다.
응용 프로그램에 WinUI 날짜 선택기 컨트롤 추가
응용 프로그램의 XAML 파일에 WinUI 날짜 선택기 컨트롤을 수동으로 추가하려면 다음 절차를 따르십시오.
<Window
x:Class="WinUI_ DatePicker.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI_ DatePicker "
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:editors="using:Syncfusion.UI.Xaml.Editors"
mc:Ignorable="d">
<Grid>
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
VerticalAlignment="Top"
/>
</Grid>
</Window>
응용 프로그램에 WinUI 날짜 선택기 컨트롤 추가
따라서 Syncfusion WinUI 3 날짜 선택기 컨트롤이 응용 프로그램에 포함되어 있습니다.이제 놀라운 기능을 어떻게 사용하는지 살펴보자.
사용 가능한 날짜 제한
MinDate 및 MaxDate 속성을 사용하여 최소/최대 범위의 날짜 값을 선택할 수 있습니다.
기본적으로 MinDate의 값은 1/1/1921이고 MaxDate는 12/31/2121입니다.모든 여행 가입 응용 프로그램에서 이 기능을 사용하면 최소 날짜를 현재 날짜로 제한할 수 있습니다.
아래의 코드 예시를 참고하시오.
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
SfDatePicker datePicker = new SfDatePicker();
datePicker.HorizontalAlignment = HorizontalAlignment.Center;
datePicker.VerticalAlignment = VerticalAlignment.Center;
datePicker.MinDate = new DateTimeOffset(new DateTime(2021, 07, 07));
datePicker.MaxDate = new DateTimeOffset(new DateTime(2021, 09, 07));
this.Content = datePicker;
}
}
| 
|WinUI 날짜 선택기에서 최소 및 최대 날짜 설정
특정 날짜 제한
BlackoutDates 컬렉션 속성을 사용하여 드롭다운 목록에서 특정 날짜를 선택하도록 제한할 수 있습니다.
BlackoutDates 속성의 기본값은 null입니다.예를 들어, 우리는 이 기능을 사용하여 모든 여행 예약 프로그램에서 정전 날짜에 사용할 수 있는 교통수단이 없다는 것을 나타낼 수 있다.
아래의 코드 예시를 참고하시오.
public sealed partial class MainWindow : Window
{
public DateTimeOffsetCollection BlackOutDates { get; set; }
public MainWindow()
{
this.InitializeComponent();
SfDatePicker datePicker = new SfDatePicker();
datePicker.HorizontalAlignment = HorizontalAlignment.Center;
datePicker.VerticalAlignment = VerticalAlignment.Center;
datePicker.BlackoutDates = GetBlackOutDates();
this.Content = datePicker;
}
private DateTimeOffsetCollection GetBlackOutDates()
{
BlackOutDates = new DateTimeOffsetCollection();
BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 03)));
BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 07)));
BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 09, 24)));
BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 10, 07)));
BlackOutDates.Add(new DateTimeOffset(new DateTime(2021, 10, 13)));
return BlackOutDates;
}
}
WinUI 날짜 선택기에서 중단 날짜 할당
기본적으로 날짜 선택기는 SelectedDate 속성을 사용하여 편집기에서 빈 값을 설정할 수 있습니다.또한 AllowFull 속성의 값을false로 설정하여 빈 값 할당을 제한할 수 있습니다.SelectedDate 속성의 기본값은 null이고 AllowFull 속성은true입니다.
변경 중인 선택한 날짜를 취소합니다.
드롭다운 목록에서 날짜를 선택하거나 SelectedDate에서 이벤트를 변경하여 SelectedDate 속성에 새 날짜 값을 지정할 때마다 알림을 받습니다.
참고: SelectedDateChanging 이벤트는 날짜를 선택한 후 SelectedDate 속성을 업데이트하기 전에 즉시 트리거됩니다.
사용자는 아래 목록에서 정전 날짜를 선택할 수 없습니다.그러나 사용자는 편집기를 통해 텍스트 입력을 할 수 있다.현재 선택한 날짜가 올바르지 않으면, SelectedDate 변경 이벤트를 사용하여 SelectedDate 속성의 업데이트를 쉽게 취소할 수 있습니다.
SelectedDateChanged 이벤트에는 다음 속성이 포함됩니다.
private void SfDatePicker_SelectedDateChanging(object sender, DateChangingEventArgs e)
{
var oldDate = e.OldDate;
var newDate = e.NewDate;
//Cancels the selected date update.
if (newDate > new DateTimeOffset(new DateTime(2022, 01, 01)))
{
e.Cancel = true;
}
}
워터마크 표시
날짜를 선택하지 않았거나 SelectedDate 속성의 값이 비어 있는 경우 Placeholder Text 속성을 사용하여 프롬프트나 정보를 표시할 수 있습니다.
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
VerticalAlignment="Top"
PlaceholderText="Enter input here..."
/>
워터마크가 표시된 WinUI 날짜 선택기
달력 유형 변경
CalendarIdentifier 속성을 사용하여 드롭다운 목록에서 달력 유형을 쉽게 변경할 수 있습니다.CalendarIdentifier 속성의 기본값은 GregorianCalendar입니다.
아래의 코드 예시를 참고하시오.날짜 선택기를 Hijri 달력 유형으로 설정했습니다.
<Grid>
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
CalendarIdentifier="HijriCalendar"
VerticalAlignment="Center"
/>
</Grid>
Hijri 달력 유형이 있는 WinUI 날짜 선택기
참고: 자세한 내용은 날짜 선택기 컨트롤에서 지원하는 고유한 types of calendars을 참조하십시오.
언어를 바꾸다
또한 Language 속성을 사용하여 다양한 언어를 사용하는 글로벌 사용자를 돕기 위해 날짜 선택기 컨트롤을 로컬화할 수도 있습니다.Language 속성의 기본값은 en US입니다.
아래의 코드 예시를 참고하시오.여기서'ar SA'는 아랍 사우디아라비아를 뜻한다.
<Grid>
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
Language="ar-SA"
VerticalAlignment="Top"
/>
</Grid>
WinUI 날짜 선택기의 언어가 아랍어로 설정됨
참고: 자세한 내용은 날짜 선택기 컨트롤에서 지원하는 distinct types of languages을 참조하십시오.
날짜 선택기 컨트롤러는 응용 언어와 달력 유형에 따라 흐름을 직관적으로 업데이트합니다.기본적으로 FlowDirection 속성 값은 LeftToRight입니다.
아래의 코드 예시를 참고하시오.
<Grid>
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
Language="ar-SA"
FlowDirection="LeftToRight"
VerticalAlignment="Center"
/>
</Grid>
WinUI 날짜 선택기를 왼쪽에서 오른쪽으로 렌더링
날짜 선택기 사용자 정의
드롭다운 버튼과 WinUI 날짜 선택기 컨트롤의 드롭다운 메뉴를 사용자 정의하여 어플리케이션을 우아하게 설계하는 방법을 살펴봅니다.
드롭다운 버튼 사용자 정의
DropDownButtonTemplate 속성 사용자 정의 날짜 선택기 컨트롤의 드롭다운 단추를 사용할 수 있습니다.DropDownButtonTemplate의 기본값은 비어 있습니다.
아래의 코드 예시를 참고하시오.
<Grid>
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>
<editors:SfDatePicker.DropDownButtonTemplate>
<DataTemplate>
<Path Data="M4.600031,27.799988L2.6000334,29.799988 17.999978,29.799988 15.999981,27.799988z M6.499992,25.899994L5.4999934,26.899994 15.199994,26.899994 14.199995,25.899994z M16.49998,18C15.400006,18 14.400007,18.899994 14.400007,20.099976 14.400007,21.199982 15.300031,22.199982 16.49998,22.199982 17.600015,22.199982 18.600015,21.299988 18.600015,20.099976 18.600015,18.899994 17.600015,18 16.49998,18z M3.9999953,18C2.9000209,18 1.9000221,18.899994 1.900022,20.099976 1.9000221,21.199982 2.8000453,22.199982 3.9999953,22.199982 5.1000305,22.199982 6.1000291,21.299988 6.1000291,20.099976 6.1000291,18.899994 5.1000305,18 3.9999953,18z M10.999987,8.3999939L10.999987,14.799988 18.499978,14.799988 18.499978,8.3999939z M2.1000343,8.3999939L2.1000343,14.799988 9.6000253,14.799988 9.6000253,8.3999939z M0.90002347,3.7999878L3.4999958,3.7999878 16.99998,3.7999878 19.600013,3.7999878 19.600013,6.3999939 19.600013,23.299988 19.600013,25.899994 16.99998,25.899994 15.499981,25.899994 20.899999,31.299988 20.300025,32 18.900003,30.599976 18.900003,30.699982 1.900022,30.699982 1.900022,30.599976 0.70001127,31.799988 0,31.199982 4.200007,27 4.200007,26.899994 4.3000437,26.899994 5.3000422,25.899994 3.4999958,25.899994 0.90002347,25.899994 0.90002347,23.299988 0.90002347,6.3999939z M12.199998,0C13.10002,0 13.900007,0.79998779 13.900007,1.6999817 13.900007,2.5999756 13.10002,3.3999939 12.199998,3.3999939 11.300036,3.3999939 10.499988,2.5999756 10.499988,1.6999817 10.499988,0.79998779 11.199999,0 12.199998,0z M8.6000262,0C9.4999886,0 10.300037,0.79998779 10.300037,1.6999817 10.300037,2.5999756 9.4999886,3.3999939 8.6000262,3.3999939 7.7000027,3.3999939 6.9000159,2.5999756 6.9000159,1.6999817 6.9000159,0.79998779 7.6000276,0 8.6000262,0z" Stretch="Uniform" Fill="Black" Width="20" Height="20" />
</DataTemplate>
</editors:SfDatePicker.DropDownButtonTemplate>
</editors:SfDatePicker>
</Grid>
사용자 정의 WinUI 날짜 선택기 드롭다운 버튼
IsOpen 속성의 값을true로 설정하여 드롭다운 단추를 프로그래밍할 수 있습니다.기본적으로 IsOpen 특성의 값은 false입니다.
드롭다운 목록의 정렬 및 높이 변경
DropDownPlacement 속성을 사용하여 편집기에서 드롭다운 목록의 위치를 쉽게 수정할 수 있습니다.기본적으로 DropDownPlacement 속성의 값은 자동입니다.드롭다운 메뉴는 응용 프로그램의 사용 가능한 공간에 따라 정렬 방식을 유연하게 조정합니다.
드롭다운 목록의 높이를 변경하여 DropDownHeight 속성을 사용하여 표시되는 날짜 값의 수를 제한할 수도 있습니다.DropDownHeight 속성의 기본값은 NaN입니다.
아래의 코드 예시를 참고하시오.
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
VerticalAlignment="Center"
DropDownPlacement="Right"
DropDownHeight="200"
/>
WinUI 날짜 선택기의 드롭다운 높이 및 정렬 사용자 정의
드롭다운 제목 사용자 정의
ShowDropDownHeader 속성의 값을true로 설정하여 DropDownHeader 속성을 사용하여 DropDownHeader에 프롬프트를 추가합니다.DropDownHeaderTemplate 속성을 사용하여 드롭다운 목록의 제목 템플릿을 사용자 정의할 수도 있습니다.
DropDownHeader 속성의 기본값은 string입니다.비어 있습니다. ShowDropDownHeader는false이고 DropDownHeaderTemplate는null입니다.
아래의 코드 예시를 참고하시오.
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
VerticalAlignment="Top"
ShowDropDownHeader="True"
DropDownHeader="Select your birthday"
ShowColumnHeaders="True"
>
<editors:SfDatePicker.DropDownHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="DeepSkyBlue"
Text="{Binding }"
/>
<Path
Width="25"
Height="25"
Margin="5,5,5,10"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Fill="DeepSkyBlue"
Data="M13.599971,11.699997L13.599971,16.199997 4.400023,16.199997 4.400023,18 13.599971,18 13.599971,29.699997 17.700006,29.699997 17.700006,18 27.099966,18 27.099966,16.199997 17.700006,16.199997 17.700006,11.699997z M24.49999,1.5999985C23.400017,1.5999985 21.599968,2.2999954 19.999992,3.4000015 17.799982,5 16.499994,7.0999985 17.299982,7.9000015 17.400019,8 17.59997,8.0999985 17.900019,8.1999969L18.900017,8.1999969C19.999992,8 21.400017,7.4000015 22.700005,6.4000015 24.99999,4.7999954 26.200003,2.7999954 25.49999,2 25.299978,1.6999969 24.900015,1.5999985 24.49999,1.5999985z M6.400022,1.5999985C5.9999981,1.5999985 5.7000103,1.6999969 5.4000225,2 4.7000108,2.7999954 5.9999981,4.7999954 8.2000093,6.4000015 9.4999962,7.4000015 10.900021,8 11.999996,8.1999969L12.999995,8.1999969C13.200007,8.1999969 13.40002,8.0999985 13.599971,7.9000015 14.299983,7.0999985 13.099971,5.0999985 10.900021,3.4000015 9.2999849,2.2999954 7.5999727,1.5999985 6.400022,1.5999985z M5.4000225,0C7.0999732,0 9.4999962,0.90000153 11.700008,2.5 13.499995,3.7999954 14.799982,5.4000015 15.400019,6.6999969 15.999994,5.4000015 17.299982,3.7999954 19.099968,2.5 21.400017,0.90000153 23.900017,0 25.49999,0 26.299978,0 26.900015,0.19999695 27.299978,0.59999847 28.49999,2 26.900015,5 23.599968,7.4000015 23.200005,7.6999969 22.700005,8 22.29998,8.1999969L31.700001,8.1999969 31.700001,18 28.599966,18 28.599966,32 28.299978,32 3.0999741,32 3.0999741,18 0,18 0,8.1999969 8.5999727,8.1999969C8.2000093,7.9000015 7.7999849,7.6999969 7.2999854,7.4000015 4.0999741,5 2.4000234,2 3.5999741,0.59999847 3.9999986,0.19999695 4.5999741,0 5.4000225,0z"
Stretch="Uniform" />
</StackPanel>
</DataTemplate>
</editors:SfDatePicker.DropDownHeaderTemplate>
</editors:SfDatePicker>
WinUI 날짜 선택기의 드롭다운 제목 사용자 정의
드롭다운 목록의 제목 숨기기
기본적으로 날짜 선택기 컨트롤의 드롭다운 목록을 열면 각 필드 열의 제목이 표시됩니다.ShowColumnHeaders 속성의 값을false로 설정하여 이러한 열의 제목을 숨길 수 있습니다.ShowColumnHeaders 속성의 기본값은 true입니다.
아래의 코드 예시를 참고하시오.
<editors:SfDatePicker x:Name="datePicker"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ShowColumnHeaders="False"
/>
WinUI 날짜 선택기에서 드롭다운 열 제목 숨기기
드롭다운 목록에서 항목 셀의 모양을 사용자화합니다.
ItemContainerStyle 및 ItemTemplateSelector 속성을 사용하여 드롭다운 목록에서 항목 셀의 모양을 사용자 정의할 수 있습니다.이 두 속성의 기본값은null입니다.
WinUI 드롭다운 목록 항목 셀 사용자 정의
참고: 자세한 내용은 Customize the cell’s style in dropdown spinner 설명서를 참조하십시오.
또한 DateFieldPrepared 이벤트를 사용하여 드롭다운 목록의 모든 필드 열과 항목 셀을 사용자 정의할 수 있습니다.
아래의 코드 예시를 참고하시오.
private void datePicker_DateFieldPrepared(object sender, DateTimeFieldPreparedEventArgs e)
{
if (e.Column != null)
{
if (e.Column.Field == DateTimeField.Day)
{
e.Column.Format = "ddd dd";
e.Column.ShowHeader = true;
e.Column.Header = "Day";
e.Column.ItemHeight = 60;
e.Column.ItemWidth = 100;
e.Column.ShouldLoop = true;
}
else if (e.Column.Field == DateTimeField.MonthName)
{
e.Column.ShowHeader = true;
e.Column.Header = "Month";
e.Column.ItemHeight = 40;
e.Column.ItemWidth = 75;
e.Column.ShouldLoop = true;
}
else if (e.Column.Field == DateTimeField.Year)
{
e.Column.Format = "yy";
e.Column.ShowHeader = true;
e.Column.Header = "Year";
e.Column.ItemHeight = 80;
e.Column.ItemWidth = 75;
e.Column.ShouldLoop = true;
}
}
}
WinUI 날짜 선택기의 드롭다운 필드 열 및 항목 셀 사용자 정의
GitHub 참조
자세한 내용은 WinUI 3 Date Picker demos on GitHub 및 documentation을 참조하십시오.
결론
읽어주셔서 감사합니다!Dell은 WinUI Date Picker 컨트롤이 사용자가 선택한 날짜 값에 대한 기대와 요구 사항에 부합한다고 믿습니다.응답하는 날짜 선택을 위해 WinUI 날짜 선택기 컨트롤을 시도해 보십시오.
이 GitHub 저장소에서 WinUI 컨트롤의 다른 예를 다운로드할 수 있습니다.
기존 고객의 최신 버전 Essential Studio 버전은 license and downloads page에서 다운로드할 수 있습니다.고객이 아니라면 30일 동안 free trial을 사용해 보십시오.
또한 support forums, feedback portal 또는 Direct-Trac support system을 통해 문의하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!
관련 블로그
Reference
이 문제에 관하여(WinUI 3 날짜 선택기 컨트롤 - 날짜 선택에 적합한 도구), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/syncfusion/winui-3-date-picker-control-a-perfect-tool-for-date-selection-58nc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
