首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter默认日期选择器小部件中删除时间戳并仅从日期选择器获取日期

在Flutter中,默认的日期选择器小部件是showDatePicker,它返回一个Future<DateTime>对象,包含选择的日期和时间。要从日期选择器中删除时间戳并仅获取日期,您可以使用intl包中的DateFormat类来格式化日期。

首先,您需要在pubspec.yaml文件中添加intl依赖:

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

然后,在您的代码中导入必要的包:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';

在您的小部件中,您可以使用showDatePicker方法显示日期选择器,并使用DateFormat类将选择的日期格式化为所需的格式:

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  DateTime _selectedDate;

  Future<void> _selectDate() async {
    final DateTime pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );

    if (pickedDate != null) {
      setState(() {
        _selectedDate = pickedDate;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          onPressed: _selectDate,
          child: Text('Select Date'),
        ),
        Text(
          _selectedDate == null
              ? 'No date selected'
              : DateFormat.yMd().format(_selectedDate),
        ),
      ],
    );
  }
}

在上面的代码中,我们创建了一个MyWidget小部件,并使用_selectedDate变量来存储选择的日期。 _selectDate方法显示日期选择器并将选择的日期存储在_selectedDate中。 Text小部件用于显示选择的日期,使用DateFormat.yMd()格式化日期。

注意:在使用DateFormat类之前,您需要在应用程序中的任何位置调用initializeDateFormatting()方法来初始化日期格式。

这里是腾讯云相关的产品介绍链接地址:腾讯云Flutter开发

请注意,以上提供的答案仅供参考,具体实现可能因您的项目需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter日期、格式化日期日期选择器组件在

今天我们来聊聊Flutter日期日期选择器。...Flutter日期时间 使用代码如下: //将时间转换成时间 var nowTime = DateTime.now();//获取当前时间 print(nowTime...有些情况下,后台可能会将所有的时间都转换成时间返回给我们前端,这是我们就需要将时间转换成时间,并将时间进行格式化。...":", ss])); 打印结果如下: 2019-08-28 Wednesday 14:27:29 在开发项目的时候,我们经常会遇到选择时间或者选择日期的场景,接下来我将为大家介绍Flutter自带的日期选择器时间选择器...Flutter的国际化 Flutter日期选择器默认是英文的,如下: ? 那么,如何将其改成中文展示呢?这就需要用到国际化配置。

25.8K52
  • 你真的会用Flutter日期类组件吗

    老孟导读:Flutter系统提供了一些日期选择类组件,比如DayPicker、MonthPicker、YearPicker、showDatePicker、CupertinoDatePicker等,其中前...DayPicker 显示给定月份的日期允许选择一天。这些天以矩形网格排列,一周的每一天都有一列。...builder参数可用于包装对话框窗口小部件以添加继承的窗口小部件,例如Theme,设置深色主题用法如下: showDatePicker( builder: (context, child) {...: time:只显示时间,效果:4 | 14 | PM date:只显示日期,效果:July | 13 | 2012 dateAndTime:时间日期都显示,效果:Fri Jul 13 | 4 | 14...true), child: child, ); }); 效果如下: CupertinoTimerPicker CupertinoTimerPicker 是ios风格的时间选择器

    2.3K20

    Flutter 组件集录 | 日期范围组件 - DateRangePickerDialog

    原来 Flutter 早已将 日期范围选择器 内置了,可能有些小伙伴已经知道,但应该还有一部分朋友不知道。想当年,为了日期范围选择可吃了不少坑。...日期范围选择器的使用 如下所示,是最简单的日期选择器操作示意:点击选择按钮时,触发下面代码的 _show 方法: 图片 showDateRangePicker 是 Flutter 内置的方法,用于弹出日期范围的对话框...日期范围选择器的语言 默认情况下,你会发现选择器是 英文 的(左图),怎么能改成中文呢?...日期范围选择器的其他参数 除了默认的必需参数外,还有一些参数用于指定相关文字。...下面三张图中标注了相关文本对应的位置,如果需要修改相关文字,设置对应参数即可: 图片 ---- 另外,showDateRangePicker 方法可以传入 initialDateRange 设置弹出时的默认时间范围

    4K12

    基于Flutter手把手教你实现一个日期选择(日历形式)

    所以,读完本文,你讲学会两个大的知识点:如何在flutter上做一个自定义组件如何开发插件并发布到 pub.dev因为是操作实战,所以,我会给出完整的实现过程来,首先,我们确定的是需要创建一个自定义组件...Flutter,创建自定义组件(也称为自定义widget)主要有三种方式:通过组合其他组件,自绘和实现RenderObject。...Flutter框架提供了大量的内置组件,文本、图像、按钮等。你可以通过组合这些内置组件来创建自己的自定义组件。这种方式的优点是简单易用,适用于大多数场景。...使用内置组件组合的方式实现一个日期选择器要实现这个日期选择器,首先我们对需求进行分析之后,提炼出这些功能点需要有一个日历展示视图来讲日期已日历的方式渲染出来需要有一个向左向右的切换按钮方便快速切换到下一个月...如何发布插件开发完毕,剩下的过程是发布了,首先你需要检查下有没有语法问题,使用以下命令来分析你的代码,确保没有任何语法错误:flutter analyze运行测试:flutter test确保所有测试都通过

    2.2K50

    Zabbix4.0要来啦!!!先来看看新功能盘点!

    新版本中支持设置为基于日期的索引。详见请▼ 更多Elasticsearch配置信息 #4 仪表盘前端全新模式: Kiosk!...重新设计的日期选择器 日期选择器已重新设计,允许通过键盘选择年、月和日期。 可以使用 Tab 和 Shift + Tab 在年/月/日期块之间切换。 允许通过键盘箭头或箭头按钮选择所需的值。...Ⅳ 更便捷的“主机批量操作”表单 添加了新的复选框 删除主机组 自动填写字段。从现在开始,用户可以从主机删除特定的主机组。...颜色选择器中新增158种颜色 3. 过滤器功能改进 4. 小部件、图形元素和报告重新命名 5. 事件状态颜色自定义 6. “主机批量操作”和“用户媒介”表单更便捷 7....小部件的图形显示增强 9. 纯文本小部件改进 10. 可配置的会话 Cookie 名称 …… 更多Zabbix 4.0 前端更新详情传送门 #11 性能提升 Ⅰ.

    1.6K20

    Vue+ElementUI 搭建后台管理系统(实战系列三)

    ---- Vue+ElementUI 搭建后台管理系统(实战系列三)- 时间和日历组件的处理 在文档里面,关于日期的组件,涉及到了单独的年月日日期选择器组件DatePicker,还有单独的时分秒时间选择器...1:在这三个组件里面,获取到当前系统的时间获取当前的时间,渲染在界面,这里用日期时间选择器来具体操作一下。...即DateTimePicker 日期时间选择器默认获取当前日期 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照...获取默认时间之后,在提交获取时间的格式的时候,也会遇到这样的问题,以什么样的格式提交的问题,一般默认的是为 Date 对象。...优点: 不依赖任何第三方库 支持字符串、Date、时间以及数组等格式 可以同时在浏览器和node环境中使用 前后端通用,文档也很详细 方便了日常开发时间的操作,提高了开发效率

    1.7K10

    iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

    4.3.3 日期时间选择器 日期时间选择器展示关于日期时间的组件,比如小时,分钟,天,以及年。 ? API注释 想要了解如何在代码定义添加日期时间选择器,请参考UIDatePicker....日期时间选择器: 最多可以展示4个独立的滑轮,每一个滑轮表示一个不同的值,比如月份或小时等 在每个滑轮的中央使用深色字体来表示当前选中的值 日期时间选择器的大小与iPhone键盘的大小相同,并且不可更改...日期时间模式(默认模式)包含日期、小时、和分钟,以及一个可选的AM/PM值。 时间时间模式包括小时和分钟,以及可选的AM/PM值。 日期日期模式包括月份,天以及年三个值。 倒计时器。...你可以精确地设定总共的倒计时间,倒计时的最大值为23小时59分钟。 使用日期时间选择器来让用户选择时间,而不是让用户自己输入一个包含了日期时间等多个部分的时间值。...尽量地让用户在当前内容中使用日期选择器。最好避免用户在使用日期选择器的时候要进入另外一个界面。在水平方向的常规环境,日期时间选择器可能会出现在一个浮层,或者嵌入在当前内容里。

    13.2K30

    Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单需要用户输入日期时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题...一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示。...编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker。 ?...,美观的日期时间选择器就出现了,如下图所示: ?...总结 到此这篇关于Django 如何使用日期时间选择器规范用户的时间输入的文章就介绍到这了,更多相关 Django 如何使用日期时间选择器规范用户的时间输入内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

    6.1K20

    Flutte部件目录-Material Components 顶

    实现Material Design指南的视觉,行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录的更多小部件。...导航栏的背景色是默认的材质背景色ThemeData.canvasColor(实质上是不透明的白色)。 BottomNavigationBarType.shifting,有四个或更多项目时的默认值。...Switch小部件实现这个组件。 ? Slider 通过移动滑块,滑块可让用户从一系列值中进行选择。 ? Date & Time Pickers 日期选择器使用对话窗口在移动设备上选择一个日期。...时间选择器使用对话框在移动设备上选择单个时间(以小时:分钟格式)。 ? 对话框,弹出框和面板 SimpleDialog 简单的对话框可以提供有关列表项的其他详细信息或操作。...信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ? Chip 一个Material Design芯片。 芯片代表小块的复杂实体,联系人。 ?

    9.5K40

    Flutter 时间选择组件

    Flutter 应用开发过程,或多或少的都会涉及到时间选择器相关的内容。...Flutter默认提供了DatePicker日期选择器,如果对样式没有特殊的要求,那么可以使用它来进行时间的选择,默认的样式如下所示。...通常在移动应用开发,App的涉及多是参考iOS的设计来的,所以这时候,多半需要进行自定义组件了。...不管,为了快速的进行开发我们可以选择一些第三方的组件库,flutter_custom_calendar,此库具有如下的功能: 支持公历,农历,节气,传统节日,常用节假日 日期范围设置,默认支持的最大日期范围为...跳转到指定日期默认支持动画切换 自定义日历Item,支持组合widget的方式和利用canvas绘制的方式 自定义顶部的WeekBar 根据实际场景,可以给Item添加自定义的额外数据,实现各种额外的功能

    3.6K30

    【JS实用技巧篇】03-封装思想

    ,即能抽取关键信息,聚焦重点,而我们本篇所讲的封装思想便是这种思想的一部分,通常需要经过长期锻炼才能达到根深蒂固的程度,所以需要慢慢理解加以实践——多敲 主要内容 随机数or字符串获取 随机数获取 /...,精确到纳秒 国际标准,已全面使用UTC时间,而不再使用GMT时间 GMT和UTC时间在文本表示格式上是一致的,均为星期缩写, 日期 月份 年份 时间 GMT,例如: Sun, 23 Aug 2020...1日凌晨作为起始时间,到指定时间经过的秒数(毫秒数) 常用日期API Date()构造函数: new Date(); // 得到一个当前日期对象 new Date(value); // 根据时间得到一个日期对象...() 得到毫秒 无参;本地时间; Date.prototype.toLocaleString() 得到日期本地的表示方式 时间格式化 /** * 传入某一时刻的时间,返回当前具体时间 * @param...Date对象,然后再分别获取当前时间对象的年月日…:date.getFullYear()获取的结果是number类型,所以我们将其转换成string类型以便能使用padStart(),对不足两位的用“

    2.4K20

    Wijmo 更优美的jQuery UI部件集:发现 Wijmo

    jQuery 选择器 在开始使用jQuery之前,你需要理解jQuery 选择器的核心概念。 jQuery 选择器利用了CSS的语法,从而使得开发人员能够精确的选择一个元素修改其显示效果。...不同类型的选择器列举如下: jQuery 元素选择器 在 jQuery ,你可以使用CSS选择器来选择特定的DOM元素,例如: $(this) 选择当前的DOM元素。...jQuery 选项 jQuery 选项是作为参数传递给一个部件的简单属性。每一个Wijmo 部件具有一个选项的默认配置;当然,会有一些情况,你希望覆盖这些定制部件的属性的默认值。...如果你现在通过浏览器打开你的工程,你将发现一个功能完整的日历部件,如下图所示: 但是如果该工程希望制定今天之前以及随后的几个月的日期不显示在日历上,应当如何做呢?显然删除它们不是一个明智选择。...然而,这个例子仅从表面揭示了通过Wijmo部件你能做什么。 关于Wijmo部件的更详细的信息,请访问 Wijmo 文档,在那里,你可以找到每一个独立的部件的介绍和API参考。

    2.7K90

    微信程序官方组件展示之表单组件picker源码

    以下将展示微信程序之表单组件picker源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见程序开发文档。功能描述:从底部弹起的滚动选择器。...multiSelector多列选择器time时间选择器date日期选择器region省市区选择器disabledbooleanFALSE否是否禁用1.0.0bindcanceleventhandle否取消选择时触发...当 range 是一个 Object Array 时,通过 range-key 来指定 Object key 的值作为选择器显示内容valuearray[]表示选择了 range 的第几个(下标从...:mode = time属性名类型默认值说明最低版本valuestring表示选中的时间,格式为"hh:mm"startstring表示有效时间范围的开始,字符串格式为"hh:mm"endstring表示有效时间范围的结束...,字符串格式为"hh:mm"bindchangeeventhandlevalue 改变时触发 change 事件,event.detail = {value}日期选择器:mode = date属性名类型默认值说明最低版本

    1K40

    程序picker的使用|日期时间、省市区联动都可以用它实现

    知晓程序员,专注微信程序开发的程序员!...今天来说一下程序picker组件的使用,官方说明如下:从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器时间选择器日期选择器,省市区选择器默认是普通选择器...1、普通选择器 普通选择器更像是HTML的select标签,主要实现单选功能,直接看官网示例就可以明白,很简单,以下是我写的demo~ WXML: <...选择开始时间和结束时间都可以用,此选择器接收字符串格式为"hh:mm"的时间,最小只能选择到分钟~ WXML: <picker mode="time" value="{{startTime}}" bindchange...(options) { } }) 3、日期选择器 日期选择器也是比较常用的,可以设置最小时间/最大时间,超出这个时间段是无法选择的~ WXML: <picker mode="date" value

    3K60
    领券