syncfusion_flutter_datepicker | Flutter package

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

英俊的红酒 · Spark窗口函数及应用 - 观远 BI ...· 1 周前 ·

傻傻的大熊猫 · MySQL时间转换（timestamp与da ...· 6 天前 ·

俊逸的奔马 · (转)ABAP ...· 6 天前 ·

听话的跑步鞋 · SAP ABAP 日期和时间_w3cschool· 6 天前 ·

豁达的枇杷 · SAP ABAP日期函数介绍 – 奇想西卡· 6 天前 ·

爱热闹的竹笋 · Unreal C++ VScode 配置 ...· 5 月前 ·

帅呆的小马驹 · 中共杭州市委 ...· 7 月前 ·

体贴的李子 · 六年轮回 | 国关男足终局之战_决赛· 11 月前 ·

逃课的登山鞋 · 如何新建、定义和删除命名空间_服务网格(AS ...· 1 年前 ·

买醉的野马 · mybatis之数组与BLOB数据转换_my ...· 1 年前 ·

</noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"/><a class="logo" href="/"><img class="site-logo" src="/static/hash-r66mmnh6/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"/><div class="site-header-mask"/><div class="site-header-search"><form action="/packages" method="GET"><input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/></form></div><nav class="site-header-nav scroll-container"><div class="nav-login-container"><button id="-account-login" class="nav-main-button link">Sign in</button></div><div class="nav-container nav-help-container hoverable"><button class="nav-main-button">Help</button><div class="nav-hover-popup"><div class="nav-table-columns"><div class="nav-table-column"><h3>Pub.dev</h3><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div><div class="nav-table-column"><h3>Flutter</h3><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div><div class="nav-table-column"><h3>Dart</h3><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Pub.dev <img class="foldable-icon" src="/static/hash-r66mmnh6/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Flutter <img class="foldable-icon" src="/static/hash-r66mmnh6/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Dart <img class="foldable-icon" src="/static/hash-r66mmnh6/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></nav></div><div id="banner-container"/><main class="container"><div class="detail-wrapper -active -has-info-box"><div class="detail-header -is-loose"><div class="detail-container"><div class="detail-header-outer-block"><div class="detail-header-content-block"><h1 class="title">syncfusion_flutter_datepicker 24.2.9 <span class="pkg-page-title-copy"><img class="pkg-page-title-copy-icon" src="/static/hash-r66mmnh6/img/content-copy-icon.svg" alt="copy &quot;syncfusion_flutter_datepicker: ^24.2.9&quot; to clipboard" width="18" height="18" title="Copy &quot;syncfusion_flutter_datepicker: ^24.2.9&quot; to clipboard" data-copy-content="syncfusion_flutter_datepicker: ^24.2.9" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">syncfusion_flutter_datepicker: ^24.2.9</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="Mar 5, 2024" aria-label="7 days ago" aria-role="button" role="button" data-timestamp="1709623698022">7 days ago</a></span> • <a class="-pub-publisher" href="/publishers/syncfusion.com"><img class="-pub-publisher-shield" src="/static/hash-r66mmnh6/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>syncfusion.com</a><span class="package-badge" title="Package is compatible with Dart 3.">Dart 3 compatible</span></div><div class="detail-tags-and-like"><div class="detail-tags"><div class="-pub-tag-badge"><span class="tag-badge-main">SDK</span><a class="tag-badge-sub" href="/packages?q=sdk%3Aflutter" rel="nofollow" title="Packages compatible with Flutter SDK">Flutter</a></div><div class="-pub-tag-badge"><span class="tag-badge-main">Platform</span><a class="tag-badge-sub" href="/packages?q=platform%3Aandroid" rel="nofollow" title="Packages compatible with Android platform">Android</a><a class="tag-badge-sub" href="/packages?q=platform%3Aios" rel="nofollow" title="Packages compatible with iOS platform">iOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Alinux" rel="nofollow" title="Packages compatible with Linux platform">Linux</a><a class="tag-badge-sub" href="/packages?q=platform%3Amacos" rel="nofollow" title="Packages compatible with macOS platform">macOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Aweb" rel="nofollow" title="Packages compatible with Web platform">web</a><a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a></div></div><div class="detail-like"><button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package"><img class="mdc-icon-button__icon" src="/static/hash-r66mmnh6/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/><img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-r66mmnh6/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">1.3k</span></span></div></div></div></div></div></div><div class="detail-container"><div class="detail-lead"><div class="detail-metadata-toggle"><div class="detail-metadata-toggle-icon">→</div><h3 class="detail-lead-title">Metadata</h3></div><p class="detail-lead-text">The Flutter Date Range Picker widget allows users to easily select dates or a range of dates. It has four built-in views that allow quick navigation to the desired date.</p><p class="detail-lead-more"><a class="detail-metadata-toggle">More...</a></p></div></div><div class="detail-body"><div class="detail-tabs"><div class="detail-tabs-wide-header"><div class="detail-container"><ul class="detail-tabs-header"><li class="detail-tab tab-button detail-tab-readme-title -active">Readme</li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/syncfusion_flutter_datepicker/changelog" role="button">Changelog</a></li><li class="detail-tab tab-link detail-tab-example-title"><a href="/packages/syncfusion_flutter_datepicker/example" role="button">Example</a></li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/syncfusion_flutter_datepicker/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/syncfusion_flutter_datepicker/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/syncfusion_flutter_datepicker/score" role="button">Scores</a></li></ul></div></div><div class="detail-container detail-body-main"><div class="detail-tabs-content"><section class="tab-content detail-tab-readme-content -active markdown-body"><p><img src="https://cdn.syncfusion.com/content/images/FTControl/Flutter/datepicker.jpg" alt="syncfusion_flutter_datepicker_banner"/></p> <h1 class="hash-header" id="flutter-date-range-picker">Flutter Date Range Picker <a href="#flutter-date-range-picker" class="hash-link">#</a></h1> <p>The Flutter Date Range Picker is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. Date Picker provides month, year, decade, and century view options to quickly navigate to the desired date. It supports minimum, maximum, blackout and disabled dates to restrict date selection.</p> <p><strong>Disclaimer</strong>: This is a commercial package. To use this package, you need to have either a Syncfusion commercial license or <a href="https://www.syncfusion.com/products/communitylicense" rel="ugc">Free Syncfusion Community license</a>. For more details, please check the <a href="https://github.com/syncfusion/flutter-examples/blob/master/LICENSE" rel="ugc">LICENSE</a> file.</p> <h2 class="hash-header" id="table-of-contents">Table of contents <a href="#table-of-contents" class="hash-link">#</a></h2> <li><a href="#date-range-picker-features">Date range picker features</a></li> <li><a href="#get-the-demo-application">Get the demo application</a></li> <li><a href="#other-useful-links">Useful links</a></li> <li><a href="#installation">Installation</a></li> <li><a href="#getting-started">Getting started</a> <li><a href="#add-date-range-picker-to-the-widget-tree">Add date range picker widget to widget tree</a></li> <li><a href="#change-different-date-range-picker-views">Change different date range picker views</a></li> <li><a href="#change-first-day-of-week">Change first day of week</a></li> <li><a href="#date-selection">Date selection</a></li> <li><a href="#limit-the-date-selection-range">Limit the date selection range</a></li> <li><a href="#support-and-feedback">Support and feedback</a></li> <li><a href="#about-syncfusion">About Syncfusion</a></li> <h2 class="hash-header" id="date-range-picker-features">Date-range-picker features <a href="#date-range-picker-features" class="hash-link">#</a></h2> <li><strong>Multiple picker views</strong> - Display month, year, decade, and century views that allow users to easily select and navigate between built-in views. Supports programmatic navigation.</li> <li><strong>Multi-date picker view</strong> - Display two Date Range Pickers side by side, allowing you to select ranges of dates within two separate months easily.</li> <p><strong>Vertical picker</strong> - Displays two Date Range Pickers side by side in the vertical direction, allowing you to select date ranges between two months easily. Also enable or disable the view navigation using swipe interaction along with snap and free scroll picker view navigation modes.</p> <p><strong>Hijri date picker</strong> - In addition to the Gregorian calendar, the date range picker supports displaying the Islamic calendar (Hijri date picker).</p> <p><strong>Quick navigation</strong> - Navigate back and forth the date-range views and between different view modes.</p> <p><strong>Enable/disable built-in view switching</strong> - Restrict users from navigating to different picker views by disabling view switching. Select values in terms of month, year, or decade with this feature enabled.</p> <p><strong>Extendable range selection direction</strong> - Allows the Date Range Picker to extend the range selection based on the direction.</p> <p><strong>Action buttons</strong> - Display action buttons to confirm or cancel the selected date values in SfDateRangePicker and SfHijriDateRangePicker.</p> <p><strong>Change first day of week</strong> - Customize the first day of the week as needed. The default first day is Sunday.</p> <p><strong>Selectable day predicate</strong> - Allows you to decide whether a cell is selectable or not.</p> <p><strong>Appearance customization</strong> - Change the look and feel of the date range picker by customizing its default appearance and style using Flutter decorations.</p> <p><strong>Builder</strong> - Allows you to design and set your own custom view to the month and year cells of the date range picker.</p> <h2 class="hash-header" id="other-useful-links">Other useful links <a href="#other-useful-links" class="hash-link">#</a></h2> <p>Take a look at the following to learn more about the Syncfusion Flutter DateRangePicker.</p> <li><a href="https://www.syncfusion.com/flutter-widgets" rel="ugc">Syncfusion Flutter widgets product page</a></li> <li><a href="https://help.syncfusion.com/flutter/introduction/overview" rel="ugc">User guide documentation</a></li> <li><a href="https://www.syncfusion.com/kb" rel="ugc">Knowledge base</a></li> <h2 class="hash-header" id="installation">Installation <a href="#installation" class="hash-link">#</a></h2> <p>Install the latest version from <a href="">pub</a>.</p> <h2 class="hash-header" id="getting-started">Getting started <a href="#getting-started" class="hash-link">#</a></h2> <p>Import the following package.</p> <pre><code class="language-dart">import 'package:syncfusion_flutter_datepicker/datepicker.dart'; <h3 class="hash-header" id="add-date-range-picker-to-the-widget-tree">Add date range picker to the widget tree <a href="#add-date-range-picker-to-the-widget-tree" class="hash-link">#</a></h3> <p>Add the SfDateRangePicker widget as a child of any widget. Here, the SfDateRangePicker widget is added as a child of the scaffold widget.</p> <pre><code class="language-dart">@override Widget build(BuildContext context) { return Scaffold( body: Container( child: SfDateRangePicker(), <h3 class="hash-header" id="change-different-views">Change different views <a href="#change-different-views" class="hash-link">#</a></h3> <p>The SfDateRangePicker widget provides four different types of views to display. It can be assigned to the widget constructor by using the view property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.</p> <pre><code class="language-dart">@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.year, <h3 class="hash-header" id="change-first-day-of-week">Change first day of week <a href="#change-first-day-of-week" class="hash-link">#</a></h3> <p>The DateRangePicker widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the <code>firstDayOfWeek</code> property.</p> <pre><code class="language-dart">@override Widget build(BuildContext context) { return Scaffold( body: SfDateRangePicker( view: DateRangePickerView.month, monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1), <h3 class="hash-header" id="date-selection">Date selection <a href="#date-selection" class="hash-link">#</a></h3> <p>The DateRangePicker supports selecting single, multiple, and range of dates. It also supports programmatic selection.</p> <p>The selected date or range details can be obtained using the <code>onSelectionChanged</code> callback of date range picker. The callback will return the <code>DateRangePickerSelectionChangedArgs</code> which contains the selected date or range details.</p> <pre><code class="language-dart">void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) { // TODO: implement your code here @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfDateRangePicker( onSelectionChanged: _onSelectionChanged, selectionMode: DateRangePickerSelectionMode.range, <h2 class="hash-header" id="support-and-feedback">Support and Feedback <a href="#support-and-feedback" class="hash-link">#</a></h2> <li>For any other queries, reach our <a href="https://support.syncfusion.com/support/tickets/create" rel="ugc">Syncfusion support team</a> or post the queries through the <a href="https://www.syncfusion.com/forums" rel="ugc">Community forums</a> and submit a feature request or a bug through our <a href="https://www.syncfusion.com/feedback/flutter" rel="ugc">Feedback portal</a>.</li>