React-Native: DatePickerIOS设置选择24小时

最新推荐文章于 2026-04-28 08:49:55 发布
翻译 最新推荐文章于 2026-04-28 08:49:55 发布 · 1.2k 阅读 · 0
本文介绍如何在iOS应用中实现24小时制的日期选择器，并通过使用react-native-modal-datetime-picker组件及调整moment.js的format属性来解决相关问题。

原帖：

https://github.com/mmazzarolo/react-native-modal-datetime-picker

 

DatePickerIOS选择24小时的方法：

How to set 24 hours in iOS ?

The is24Hour prop is only available on Android but you use a small hack for enabling it on iOS by setting the app's default timezone as en_GB. To do so, edit your AppDelegate.m file, and add [[UIDatePicker appearance] setLocale:[[NSLocale alloc]initWithLocaleIdentifier:@"en_GB"]]; to application didFinishLaunchingWithOptions

 

本人使用了第三方：react-native-modal-datetime-picker

因为该组件引入momentjs，同时还需要修改属性format为：format="MM-DD, HH:mm"  ，即可成功显示24小时制

详情：http://momentjs.com/docs/

详解React Native开源时间日期选择器组件(react-native-datetime)
12-10
项目介绍 该组件进行封装一个时间日期选择器,同时适配Android、iOS双平台，该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后，直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-datetime' project(':react-native-datetime').projectDi
适用于 iOS 的 React Native 自定义时间选择器（24 小时格式）
06-08
React Native TimePicker For iOS React Native 自定义时间选择器（24 小时格式）用于 iOS 截图安装 $ npm i react-native-timepicker --save 基本用法 import React, { AppRegistry, Component, View, StyleSheet } from 'react-native'; 从 'react-native-timepicker' 导入 TimePicker； 导出默认类 App extends Component { constructor() { super(); } _onValueChange = (hour, minute) => { console.log("Selected time:", hour, ':', minute); }; 渲染（）{ 返回（ ); } }; const 样式 = StyleSheet.create({ container: { flex: 1, backgroundColor: '#D9D9D9' }, picker: { b
moment 二十四小时制
weixin_45190306的博客
01-14 4285
用react时经常需要用到时间，moment是常用的： import moment from ‘moment’; moment().format(‘YYYY-MM-DD HH:mm:ss’); //当前时间 moment().add(-1,‘year’).format(‘YYYY-MM-DD HH:mm:ss’); //当前时间 前一...
react native TimePickerAndroid详解
老孟Flutter
08-04 2255
标准的Android时间选择器的对话框 open(options):打开一个标准的Android时间选择器的对话框。 options对象的key值如下： hour (0-23) - 要显示的小时，默认为当前时间。 minute (0-59) - 要显示的分钟，默认为当前时间。 is24Hour (boolean) - 如果设为true，则选择器会使用24小时制。如果
ReactNative项目OpenHarmony三方库集成实战：react-native-date-picker
2402_83107102的博客
03-27 436
日期选择是移动应用中常见的需求场景，无论是预约服务、填写表单还是记录日程，都离不开直观的日期选择组件。是一个功能丰富的日期选择器库，支持日期、时间、日期时间三种模式，提供模态框和内嵌两种使用方式，让开发者能够轻松实现原生般的日期选择体验。库名称版本信息5.0.6: 支持 RN 0.72 版本（支持 AutoLink）5.1.0: 支持 RN 0.77 版本官方仓库鸿蒙仓库主要功能📅 支持日期、时间、日期时间三种模式🎛️ 支持模态框和内嵌两种展示方式🎨 丰富的自定义主题和样式。
react native 自适应位置的下拉选择框（react-native-selfadapt-modal）
非動ご博客
06-20 9148
react native 可定位的下拉选择框 在实际开发过程中，下拉选择应该是比较常用的功能。我在项目开发中先后使用了以下两种第三方插件： react-native-popup-menu ...
React Native DatePicker高级技巧：10个实战案例深度解析
最新发布
gitblog_00411的博客
04-28 707
React Native DatePicker是一款功能强大的跨平台日期选择组件，支持Android和iOS系统，通过整合DatePickerAndroid、TimePickerAndroid和DatePickerIOS实现了一致的用户体验。本文将通过10个实用案例，帮助开发者掌握这款组件的高级用法，轻松应对各种日期选择场景。 ## 1. 快速集成：从零开始的安装步骤 要在React Nati
React Native DateTimePicker 使用指南
gitblog_00057的博客
08-09 585
React Native DateTimePicker 是一个专为 React Native 设计的时间和日期选择组件。以下是该项目的基本目录结构概述： ```markdown react-native-datetimepicker/ ├── android # Android 平台相关代码 │ └── ... # 包含Andro...
react Native 获取实时时间
weixin_47098240的博客
10-22 1195
react Native 获取实时时间 方法 this中写date:’ ', 渲染数据 效果图
《React Native Paper Dates》项目常见问题解决方案
gitblog_00236的博客
12-10 320
《React Native Paper Dates》项目常见问题解决方案 1. 项目基础介绍和主要编程语言 《React Native Paper Dates》是一个为React Native Paper提供的日期和时间选择器组件。该组件具有跨平台特性，支持Android、iOS以及Web平台。它使用了原生的日期和国际化API来实现，因此具有较好的性能和较小的包体积。项目主要使用TypeScrip...
ios UIDatePicker 显示 24小时制的方法
u013712343的博客
09-29 986
ios UIDatePicker 显示 24小时制的方法
Android开发之自定义DataTimePicker（日期时间选择器）
anwanfei的博客
09-23 5322
Android开发之自定义DataTimePicker（日期时间选择器）最近项目中，要求日期和时间在同一个页面同时选择，这个就需要自定义了，其实所谓的自定义只不过是把时间和日期对话框组合在一起而已。一、基本知识1、关于日期的几个控件： DatePicker（日期选择控件） TimePicker（时间选择控件） DatePickerDialog（日期选择对话框） TimePick
记录一次使用react设置定时器的方式
myuuniao的博客
04-10 1202
记录一次使用react设置定时器的方式 本人初次使用react，直接上代码吧 const [buttonName,setButtonName]=useState("启动定时"); const ref = useRef(); const startTimer=()=>{ if(buttonName=="启动定时") { setButtonName("结束定时") timer =setInterval(() => { console.
react实战笔记40:设置日期
qq_41632427的博客
10-18 257
前端
android自定义时间选择器、24小时时间选择
fan7983377的博客
02-12 2616
效果图： 奇葩的需求，24小时时间段选择器，GridView和RecyclerView都可以实现，但是如果需要按下移动选中会比较麻烦，这里使用自定义View实现的，代码地址：https://github.com/fan0424/TimeDemo ...
强大的JS日期/时间选择控件（精确到天、小时、分钟都可以）
热门推荐
qianjin_40的博客
07-06 2万+
"JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 * (2)选择日期和小时 * (3)选择日期和小时及分钟  *设置参数的方法
react-native-modal-datetime-picker 日期时间选择器组件
唤起鱼的记忆
12-07 2332
react-native-modal-datetime-picker 日期时间选择器组件 1、组件描述： react-native-modal-datetime-picker是基于react native的一款日期时间选择器组件，能兼容iOS和Android。详细使用方法参考地址： （1）npm 组件地址 2、组件使用： （1）先安装react-native-modal-datetime-picker $ npm install react-native-modal-datetime-picker --sa
UIDatePicker显示24小时制，去掉不显示上午下午
nick8brown的博客
12-03 5725
要想UIDatePicker显示24小时制，需要满足2个条件： ① 手机-设置-通用-时间-24小时制； ② 设置 datePicker.calendar = [NSCalendar currentCalendar]; 附：<日期时间格式> 使用 dateFormat 转换格式时， "HH:mm:ss" - 24 小时制； "hh:mm:ss" - 12 小时制; "yyyyMM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值