flutter开发实战-生日等日期选择器DatePicker

这篇具有很好参考价值的文章主要介绍了flutter开发实战-生日等日期选择器DatePicker。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flutter开发实战-生日等日期选择器DatePicker

在开发遇到设置生日等信息需要选择日期,这里用到的是CupertinoDatePicker

iOS效果的日期、时间选择器

一、效果图

运行后效果图如下

flutter开发实战-生日等日期选择器DatePicker,flutter,flutter开发实战,移动开发,flutter,日期选择器,时间选择器,DatePicker

二、代码实现

我们需要调用底部弹窗显示

//显示底部弹窗
  static void bottomSheetDialog(
    BuildContext context,
    Widget widget, {
    bool? isScrollControlled,
    bool? enableDrag,
    Color? backgroundColor,
  }) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: isScrollControlled ?? true,
      enableDrag: enableDrag ?? true,
      backgroundColor: backgroundColor ?? Colors.white,
      builder: (ctx) {
        return widget;
      },
    );
  }

生日日期选择
ProfileBirthdayPicker

class ProfileBirthdayPicker extends StatefulWidget {
  const ProfileBirthdayPicker({
    Key? key,
    required this.confirmPressed,
  }) : super(key: key);

  final Function(String date) confirmPressed;

  
  State<ProfileBirthdayPicker> createState() => _ProfileBirthdayPickerState();
}

class _ProfileBirthdayPickerState extends State<ProfileBirthdayPicker> {
  String _datePickerDate = "";

  
  Widget build(BuildContext context) {
    return Container(
      height: 256.0,
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          _buildButtonRow(context),
          Expanded(
            child: CupertinoDatePicker(
              dateOrder: DatePickerDateOrder.ymd,
              mode: CupertinoDatePickerMode.date,
              initialDateTime: DateTime.now(),
              onDateTimeChanged: (date) {
                print('onDateTimeChanged - $date');
                String dateString =
                    DateUtil.formatDate(date, format: "yyyy-MM-dd");
                _datePickerDate = dateString;
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildButtonRow(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        ButtonWidget(
          width: 80,
          height: 50,
          onPressed: () {
            DialogUtil.pop(context);
          },
          child: Text(
            "取消",
            textAlign: TextAlign.center,
            softWrap: true,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              fontStyle: FontStyle.normal,
              color: ColorUtil.hexColor(0xA1A1A1),
              decoration: TextDecoration.none,
            ),
          ),
          highlightedColor: ColorUtil.hexColor(0xf7f7f7),
          bgColor: ColorUtil.hexColor(0xffffff),
          bgHighlightedColor: ColorUtil.hexColor(0xf7f7f7),
          enabled: true,
          bgDisableColor: Colors.grey,
          borderRadius: 8.0,
        ),
        ButtonWidget(
          width: 80,
          height: 50,
          onPressed: () {
            widget.confirmPressed(_datePickerDate);
            DialogUtil.pop(context);
          },
          child: Text(
            "确定",
            textAlign: TextAlign.center,
            softWrap: true,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w400,
              fontStyle: FontStyle.normal,
              color: ColorUtil.hexColor(0x338FFF),
              decoration: TextDecoration.none,
            ),
          ),
          highlightedColor: ColorUtil.hexColor(0xf7f7f7),
          bgColor: ColorUtil.hexColor(0xffffff),
          bgHighlightedColor: ColorUtil.hexColor(0xf7f7f7),
          enabled: true,
          bgDisableColor: Colors.grey,
          borderRadius: 8.0,
        ),
      ],
    );
  }
}

三、小结

flutter开发实战-生日等日期选择器DatePicker。iOS效果风格的日期选择器:CupertinoDatePicker。

学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-565797.html

到了这里,关于flutter开发实战-生日等日期选择器DatePicker的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI DatePicker 日期范围选择动态设置禁选日期

    今天在工作时,后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后,只能选择 13 号前一周和后一周的日期,其他日期处于禁止选择状态。 先去看了下 element 的相关文档,找到了一个 当前时间日期选择器特有的选项picker-options, 传送门

    2024年02月12日
    浏览(36)
  • antd的DatePicker日期选择框实现日期的回显与改变

    核心就是让DatePicker的value属性的值变为受控 但是有一个缺点,必须要给一个默认时间(我这里用的当前时间) 代码如下 效果如下

    2024年02月07日
    浏览(41)
  • Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

    花了一个下午才解决,官方组件文档里面是没有处理方案说明的。 项目版本:Ant Design Vue 2.0.2 前端部分代码: 前端点击选择日期后,点击提交按钮提交表单时,发现传给后台的日期参数格式有问题,跟前端显示的效果不一致 要么前端传之前处理,要么后端接收后处理。 我参

    2024年02月11日
    浏览(39)
  • element的datepicker日期选择器选择周一到周日并实现上一周和下一周

    页面初始化效果 点击上一周 点击下一周 1、采用el-date-picker组件,类型使用 week 但是范围是从周日开始,从周一开始需要将 firstDayOfWeek 设置为 1 2、框里还需要展示周一和周日的范围,设置两个新的属性startDate和endDate 根据model属性(默认是星期二),来算出展示的星期一和周

    2024年02月14日
    浏览(41)
  • vuejs-datepicker|简单易用的Vue.js日期选择组件

    vuejs-datepicker是一个简单易用的Vue.js日期选择组件。它使用了Bootstrap 4的样式,支持多种语言,具有直观的界面,易于配置和扩展。 👉 效果演示 👉 如果您想使用vuejs-datepicker,首先您需要安装它: 然后,在您的Vue.js项目中导入组件: 接下来,您可以在模板中使用组件: vu

    2024年02月04日
    浏览(48)
  • Element-UI的DatePicker禁用日期选择(type=date/daterange)

    \\\"element-ui\\\": \\\"^2.15.13\\\", 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 选择日,效果:    选择日期范围,效果: 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 选择日,效果:  选择日期范围,效果: 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 例如:可选今天、今天前一周

    2024年02月10日
    浏览(41)
  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

    设置:picker-options=\\\"pickerOptions\\\" 然后在data里面设置 源代码

    2024年02月06日
    浏览(55)
  • ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

    未选择时间时,最初选择时间不能超过今天 选择初始时间后,第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。 例如:点击7月15日后,在8月14日往后的日期全部禁止选中 7月15日前一个月的6月15日之前的日期也全部禁止选中 选好起始时间和结束

    2024年02月14日
    浏览(38)
  • Flutter之日期选择器 calendar_date_picker2

    calendar_date_picker2主要由两个小部件组成: 1、 CalendarDatePicker2 ,此小部件仅包含日历 UI,并且每当用户点击不同的日期时就会发出事件。 2、 CalendarDatePicker2WithActionButtons ,此小部件包括日历 UI 和操作按钮(取消和确定)。仅当用户点击“确定”按钮时,此小部件才会发出更新

    2024年02月07日
    浏览(44)
  • K12351 生日日期

    小科的生日是YY年MM月DD日,他想知道自己出生第10000天纪念的日期,出生日算第0天 输入三个整数,分别表示YY,MM,DD,其中 1949≤YY≤2016 输出小科身体第一万天以后的日期,格式为YY-MM-DD 输入输出样例     是日期类的题目,编写一个函数(或者直接在for循环写)把日期挪到下一

    2024年02月16日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包