物料UI选取器-日期-fns问题
是关于物料UI库中日期选择器组件的问题，同时涉及到日期处理库fns的使用。
物料UI是一套基于前端开发的UI组件库，提供了丰富的组件和样式，方便开发人员快速构建用户界面。日期选择器是其中的一个常用组件，用于用户选择日期。
fns是一个轻量级的日期处理库，提供了丰富的日期处理函数和工具，可以方便地进行日期的计算、格式化、解析等操作。
在使用物料UI的日期选择器组件时，可以通过以下步骤解决问题：
- 引入物料UI库和fns库：在项目中引入物料UI库和fns库的相关文件，可以通过CDN链接或者本地引入的方式。
- 使用日期选择器组件：在需要使用日期选择器的页面或组件中，使用物料UI提供的日期选择器组件，设置相应的属性和事件。
- 处理日期数据：在选择日期后，可以通过fns库提供的函数对日期数据进行处理。例如，可以使用fns的format函数将日期格式化为指定的字符串格式，或者使用fns的addDays函数进行日期的加减操作。
- 其他操作：根据具体需求，可以进一步对日期进行处理，例如计算日期的差值、比较日期的大小等。
物料UI日期选择器组件的优势在于其简洁易用的界面和丰富的功能，可以满足大部分日期选择的需求。它适用于各种Web应用场景，包括表单提交、日历功能、时间轴等。
腾讯云提供了一系列与云计算相关的产品，但在这个问题中不涉及具体的云计算产品。如果需要了解腾讯云的相关产品和服务，可以访问腾讯云官方网站（https://cloud.tencent.com）获取更多信息。
相关·内容
如何更改Material-UI日期选择器的语言？它似乎并不完全适用于整个日期选择器。
我当前的日期选择器是什么样子：
浏览 33提问于2018-08-10得票数 6
4回答
我正在尝试按照文档上的代码设置一个material ui日期范围选择器示例，但它给了我一个错误: TypeError: undefined is not a function。
我以前从来没有见过useState后面跟着一个组件，这就是抛出错误的原因。
React.useState<DateRange>([null, null])
完整代码：
import * as React from "react";
import { TextField } from "@material-ui/core";
import { DateRangePicker,
浏览 2提问于2020-05-14得票数 3
在互联网上最简单的事情肯定是“日期选择器”，但它太难集成来做出反应。 我的代码(部分)： ...
import DateFnsUtils from '@date-io/date-fns';
import {
DatePicker,
MuiPickersUtilsProvider,
} from '@material-ui/pickers';
...
const [selectedDate, handleDateChange] = useState(new Date());
....
return (
<MuiPickersUtilsProvi
浏览 32提问于2020-09-18得票数 1
2回答
我在react应用程序中使用material UI，但在使用material-ui-pickers示例时遇到了困难。这是Material UI的在线示例。https://codesandbox.io/s/52p74362pl 我得到的错误是： index.js:1446 ../node_modules/@date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modu
浏览 33提问于2019-01-23得票数 5
回答已采纳
我一直在努力让材料UI DatePicker组件上的DatePicker支柱按预期工作。也就是说，maxDate被禁用后的日期。
我的用例要求将maxDate设置为当前Date()中的+60 days，然后禁用日期。
请看我的答案，一个解决方案，正在我的一端工作。
浏览 10提问于2022-08-09得票数 1
回答已采纳
1回答
在物料Ui反应中更改月份名称
、、、、
我使用材料Ui的DatePicker。我需要改变这个月的名字。我该怎么做呢？
例如，我必须从8月改为Avqust，或从3月改为Mart
我的代码：
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label=""
value={selectedDate}
minDate={"02-01-1920"}
浏览 4提问于2022-04-07得票数 0
回答已采纳
嗨，我有数据报警器(基于反应日期选择包)，在材料ui Dialog.Dialog工作完美，但当我点击数据报考，它滚动，切断和滚动显示。
这是我的 --如何用css克服这一问题？
溢出滚动无法解决这个问题，因为我有一个列表项
浏览 2提问于2020-04-17得票数 1
回答已采纳
我对jQuery中的选择器有一个问题。
我有以下结构：
<div id="myDatepicker" class="hasDatepicker" style="display: inline-block;">
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<table class="ui-datep
浏览 4提问于2011-02-13得票数 0
回答已采纳
1回答
Here是codesandbox链接 function InlineDatePickerDemo(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<Fragment>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
style={{ padding: "20px" }}
浏览 19提问于2020-10-13得票数 1
回答已采纳
我在一个新项目中使用、和。我的页面非常简单，我正在使用来自Material的以下组件：
<DateTimePicker
label="Date and time"
inputVariant="outlined"
value={searchDateTime}
disablePast
onChange={handleSearchDateTimeChange}
showTo
浏览 1提问于2021-11-23得票数 2
回答已采纳
没有在vuejs中显示日期日历，则date不会在safari浏览器上显示UI。如果这个日期收到了服务的回复。
因此，在android和windows上可以显示日期日历。它不适用于ios safari、chrome或mac。这个案子有什么最好的解决办法吗？
没有在vuejs中显示日期日历，则date不会在safari浏览器上显示UI。如果这个日期收到了服务的回复。因此，在android和windows上可以显示日期日历。它不适用于ios safari、chrome或mac。这个案子有什么最好的解决办法吗？
浏览 1提问于2022-11-22得票数 0
物料UI选取器中显示的日期比所选日期晚1天：
我选择了25，formik中的值是25，但表单上显示的值是24。
"@date-io/date-fns": "^1.3.13",
"date-fns": "^2.9.0",
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
import { format,
浏览 2提问于2020-02-25得票数 5
2回答
我试图在我的基于反应的网页中使用日期-fns-tz，无法使下面的用例工作。
我有一个表单中的日期输入，该表单应该提交到将数据存储在本地时区的后端。
GMT+2时区中的用户在UI中的1/2b/2021上选择14:00，这与1612180800时间戳相关(因为UI是在GMT+2中打开的)，但是它最终应该在GMT-8中作为14:00被发送到后端，这实际上是1612216800时间戳。
怎样才能让这个转换(从1612180800 -> 1612216800 )到工作？
我试着使用各种日期-fns函数，但没有找到正确的函数。
浏览 3提问于2021-02-03得票数 6
回答已采纳
我使用的是Material UI Pickers，但当我尝试编辑单个字符时，它会进入编辑模式，先前的值将被清除，并且我必须从头开始键入日期
测试用例是由生成的
我的预期行为是在编辑时可以更改单个字符，我应该提一下，此行为在Material UI的演示站点中确实有效，但创建测试用例无法重现相同的结果
浏览 0提问于2019-12-13得票数 0
我正在使用来转换js中的时间。
根据上的页面，给出了一个如何本地化数据选择器的示例。
但没办法尝试这个例子：
import React from "react";
import ReactDOM from "react-dom";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider
} from "@material-ui/pickers";
// import dayjs from 'dayjs';
import "dayjs/locale/nl";
浏览 0提问于2019-08-28得票数 10
我正在尝试在Next.js应用程序中使用库。
我在/pages中添加了_app.js文件作为，作为放置选取器提供程序的位置：
import React from "react";
import PropTypes from "prop-types";
import { ThemeProvider } from "@material-ui/core/styles";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils
浏览 1提问于2020-08-09得票数 3
我在我的React应用程序中使用DateTimePicker。
我想在“取消按钮”的左边添加一个清除按钮。
import { MuiPickersUtilsProvider, DateTimePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
浏览 0提问于2020-05-31得票数 1
回答已采纳
如何在material-ui-pickers中将开始日期显示为星期三？
目前，它显示为周日作为一周的开始日。我们怎么能覆盖它呢？
谢谢。
浏览 0提问于2020-04-07得票数 4
2回答
我在尝试格式化jQuery UI日期选择器上的输出时遇到问题。
我希望日期格式为'ISO 8601‘格式，如下所示：
下面是我的代码：
$.datepicker.setDefaults($.datepicker.regional['nl']);
$('.datepicker').datepicker('option', {dateFormat: 'yy-mm-dd' });
浏览 2提问于2010-03-21得票数 27
回答已采纳
我不知道为什么我不能把我的头围绕着如何使用资料UI的DatePicker。文件似乎不完整吗？我说的对吗？
下面是我的基本示例：
import {DatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
import DateFnsUtils from "@date-io/date-fns";
... somewhere in the render:
<MuiPickersUtilsProvider utils={DateFnsUtils}>
浏览 2提问于2020-03-27得票数 1
我负责下面的技术栈。
React -用于前端
节点/快车-用于中间层
MongoDB -数据库
猫鼬驱动程序-将快速应用程序连接到Mongo
我使用一些日期选择器组件在UI中显示日期，用户可以更改这些日期。我想知道向服务器发送日期的最佳方式是什么，在DB中持久化，同样，如何在express应用程序中使用mongoose查询带有日期格式的集合。
请提出一致和最佳的解决方案。
浏览 0提问于2018-12-07得票数 0
我在一个网站上工作，该网站使用Jquery UI日期选择器来允许用户输入他们的出生日期。然而，由于日历(初始化如下)在1969年12月31日之前不会出现，这将阻止在此之前出生的用户注册。我怎样才能使日期像预期的那样追溯到1910年？
picker.datepicker({
defaultDate: (field.val() ? new Date(field.val() * 1000) : '-13y'),
dateFormat: '@',
changeMonth: true,
changeYear: true,
yearR
浏览 2提问于2010-10-23得票数 1
回答已采纳
有人能帮忙吗？我有一个问题-我的形成日期从'2019-03-24‘到'24.03.2019’，并将它发送到材料-用户界面选择器数据报警器。因此，我得到了这个错误
Uncaught RangeError: `options.awareOfUnicodeTokens` must be set to `true` to use `YYYY` token; see: https://git.io/fxCyr
dateInputFormat接收当前格式。我的代码如下
import React, { FC } from 'react';
import { MuiPicker
浏览 1提问于2019-03-20得票数 0
我一个月前就开始工作了。下载了一堆库，其中有些很有用。但当我试图让约会/约会-fns去工作时，我被困住了。我遇到了奇怪的错误，无法找到'Button in @material ui‘，所以我去查看我的文件夹结构，在我的项目中找到了三份package.json！当您在vscode中打开命令窗口时，我在默认文件夹中安装了软件包。不知道他们到底是谁。
另外，我决定在vscode中从头开始一个新项目，并复制我所有的源文件夹，然后重新安装我使用的所有包。我所做的是：
创建了一个新的vscode .net核心项目/redux(无redux)
将我的源文件夹从旧的项目文件夹复制到新的文件夹。替换新项
浏览 6提问于2020-06-20得票数 1
回答已采纳
2回答
引导模式中的日期时间选取器，滚动
、、、、
我有一个问题时，滚动在引导模式与日期时间选择器插件。(不是日期选择器)。
当我在模式中滚动时，日期框保持固定页面，但通常它不应该这样做
哪里有很多bootstrap-datepicker的解决方案，但是我使用bootstrap-datetimepicker，但是我找不到解决方案，或者我可能找不到它？
浏览 2提问于2015-01-22得票数 0
我在让jquery ui datepicker显示在jquery ui中动态添加的元素时遇到了问题，该元素是可选的，但仅限于Firefox。
一旦选择了其中一个可选择项，就创建动态创建的输入并将其附加到可选择项。该输入在被动态地添加到dom之前被分配为datepicker。
我已经用我的问题的例子创建了一个 ...它在Chrome上运行得很好，但Firefox不喜欢它。我所说的“不喜欢”的意思是，在选择一个可选标题后点击输入时，日期选择器不会出现。
下面是我在上面链接到的jsfiddle的原始javascript：
$(document).ready(function(){
$(
浏览 2提问于2013-02-01得票数 1
回答已采纳
我在我的项目中使用ion-datetime，这里有一些关于离子版本的信息：
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 3.2.2
下面是我的ion-datetime的一个示例：
<ion-datetime displayFormat="DD-MM-YYYY" pickerFormat="DD MM YYYY" min="{{minDate}}" max=" {{
浏览 43提问于2021-05-10得票数 0
我知道使用InputField可以向下传递variant="filled"属性来填充输入框。但是，是否也可以使用Material UI日期选择器(不使用浏览器中的原生日期选择器)向下传递具有类似效果的道具？ 填充输入示例： 📷
浏览 21提问于2020-06-27得票数 0
回答已采纳
我正在使用来自material-ui的material-ui，我希望在TextField中显示当前日期，并允许用户选择另一个日期。如果可能的话？
value={date}在使用type="date"时不会出现在TextField中。我试着在网上寻求帮助，但什么也找不到。代码如下：
，，任何帮助都是非常感谢的！提前谢谢。
import React, { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from &#
浏览 0提问于2020-04-16得票数 2
回答已采纳
我正在维护一个Sencha Touch1.1应用程序，我正在尝试解决我们在Android平板电脑上注意到的一个问题(特别是三星Galaxy Tab S，Android 3.1)。
出现的问题是登录表单上有两个字段: Sencha文本字段和Sencha日期选择器字段。当用户将文本输入聚焦，然后轻击以聚焦日期选择器字段时，虚拟键盘将折叠，并且日期选择器显示在虚拟键盘结束处的上方(大约在页面的中间)。
请注意，当用户首先关注日期选择器字段时，这不会发生；这使我相信这与Sencha没有正确处理窗口调整大小事件有关，该事件在显示或隐藏键盘时抛出，随后无法相应地重新计算包含的视图对象的尺寸。
视图扩展了E
浏览 2提问于2012-01-10得票数 0
回答已采纳
1回答
我对这个错误失去了理智。每一个解决方案都试过了，但都没有用。我正在显示一个材料-ui数据报时日历。直到今天，它一直运作得很好。我不知道发生了什么，我在代码中什么也没改变，甚至是我自己也写了这个。
RangeError:无效时间值
以下是代码：
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import React, { useState } from "react";
浏览 0提问于2019-08-16得票数 3
这是Material-Ui Pickers库：https://material-ui-pickers.dev/api/datepicker 正如您所看到的，似乎可以将日期显示为(月/日)字符串或(MM/ DD /YYYY)日期，但是我找不到任何可以将日期显示为(月/日，年)的内容。这是否可能，我是否遗漏了什么？
浏览 42提问于2019-04-18得票数 2
1回答
我对DatePicker有一个问题，如果有一个空值，它是红色的。并且将true/false传递给error没有任何效果。
我甚至试着把error传递给TextField，但没有改变任何事情。
如何控制它何时显示红色边框和错误，就像使用MUI中的任何其他表单元素一样？
<FormControl sx={{ minWidth: { xs: 230, sm: 300, md: 120 } }}>
<LocalizationProvider
dateAdapter={AdapterDateFns}
locale={mkLocale}
浏览 7提问于2021-11-08得票数 1
2回答
我正在尝试创建一个在TableView上滑动的DatePicker，以便编辑日期字段。问题是DatePicker出现在TableView后面-您可以看到它的一部分，因为TableView是透明的。
我试着给其中一个设置比另一个更高的zIndex值，两种方式都是如此，但是没有帮助。datepicker是视图中的一个选取器控件，我用动画演示了它。
如何用不同的视图覆盖TableView？
编辑:表格相当复杂，因为其中有各种类型的数据，所以复制和粘贴将是多余的。但这里是相关的部分：
var win = Ti.UI.createWindow();
var table = Ti.UI.crea
浏览 2提问于2011-04-18得票数 0
回答已采纳
13回答
由于某些原因，我无法让材料-ui数据报警器工作。每次在React中呈现数据报警器时，都会引发以下错误：
RangeError:格式字符串包含一个未转义的拉丁字母字符n
我只使用数据报警器()创建了一个stackblitz，即使在那里也会出现错误。我做错了什么？我想我遵循了安装指南中的所有说明。
指向材料的链接-ui/选择器：
浏览 1提问于2020-01-05得票数 69
回答已采纳
我遇到了一点问题，而且我没有找到解决它的办法。MUI DatePicker似乎有一个默认格式，用于将日期显示为 Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of timezone here) 但是，我需要能够以以下格式传递日期 yyyy-MM-ddThh:MM:ss+HH:mm，即(Date)T(Time)+(Timezone) 传递给组件，然后以相同的格式提交回来。 在某些情况下，此日期-时间选择器的值没有设置，在某些情况下是设置的。而且我不确定如何将格式转换为我需要的格式，因为我无法控制正在接收的日期格式。 似乎组件可以解析我提供给它的数据，并设置适当
浏览 135提问于2021-10-26得票数 0
如何将jquery UI datepicker日期格式转换为mysql-phpmyadmin datetime类型字段(默认)格式？
请帮帮忙。
谢谢。
浏览 0提问于2011-07-28得票数 9
回答已采纳
2回答
我正在使用故事书，反应am和材料-ui的应用程序。到目前为止，我正在尝试从构建数据报警器，下面是我的代码
import React, { Fragment, PureComponent } from 'react';
import {DatePicker} from 'material-ui-pickers';
class DatePickers extends PureComponent {
state = {
selectedDate: new Date(),
}
render() {
console.log(this.s
浏览 0提问于2018-05-18得票数 1
回答已采纳
4回答
原始问题如何正确格式化日期？
我需要将这个格式的日期- Fri Jul 12 2019改为这个格式的Friday, 12 Jule。
我试过使用
(原因:元素具有此格式的日期属性)
浏览 0提问于2019-07-30得票数 0
回答已采纳
1回答
无法让我的日期选择器生成日历。它只是将容器div放在我的dom中。
代码如下：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js">&l
浏览 0提问于2013-03-14得票数 2
回答已采纳
1回答
我在React项目中使用Material-UI，并使用它的日期选择器组件来呈现日期项。但是默认样式不适合我的需要，我想使用选择器作为日期选择器对话框中的日期显示，取代它的文本字段。在查看Material-UI的日期选择器相关API后，我找不到合适的方法。有什么可以帮忙的吗？这将是非常有帮助的。 下面的图片是我想要呈现的日期选择器样式： wanted style 以下图片为其默认样式，默认为文本： default style 代码如下： import { useState } from "react";
import { makeStyles } from "@mate
浏览 13提问于2021-09-15得票数 1
1回答
我目前在MonoTouch.Dialog中使用MonoTouch。当点击日期字段时，它会推动导航控制器，这样你就会向右转到一个屏幕，看到你选择日期的UIDatePicker，然后再“返回”到主屏幕。我真的很喜欢这个UI，就像我用过的其他应用程序一样，当你选择一个日期字段时，UIDatePicker会出现在当前屏幕的底部。
我想学习如何做到这一点，并将其应用于其他输入字段，在这些字段中，我可能希望使用一个自定义选取器，该选取器也显示在当前屏幕的底部。
有没有人有代码可以让UIPicker/UIDatePicker出现在活动屏幕的底部？
谢谢。
浏览 2提问于2010-08-16得票数 4
1回答
我在一个新项目中遇到了一个设计问题。我选择了卢克逊图书馆(https://moment.github.io/luxon/)，因为我认为它非常适合这个项目。日期-fns (https://date-fns.org/)也很不错，但时区支持很差。
现在，我还使用了一个名为react datepicker (https://reactdatepicker.com/)的数据报警器库。这是我的公司用的。问题是反应-数据报警器使用日期-fns在引擎盖下。当然，这两个库在这个项目中都会很好地工作，但是由于我不是唯一一个在这个项目上工作的人，这会导致混乱。例如：
在这两个库中，日期和时间格式标记可能有所不同。
浏览 0提问于2020-08-05得票数 1
我正在使用bootsrap datepicker为我的项目之一，我使用了startDate和endDate选项来启用日期在选定的intervals.it是很好的，如果只有1日期range..but我想在ajax调用内使用它，其中startDate和endDate接收为response..if只有一个日期范围它是fine.if有多个日期范围只有最后一个日期范围是可见的日历。
下面是我的代码
success: function(res) {
jQuery.each(res, function(index, value) {
var i=0;
var star
浏览 1提问于2015-09-11得票数 0
将ESLint更新到6.6.0会导致以下错误：
错误‘/节点_模块/日期-fns/ times ings.d.ts’多次导入
导入/不重复
代码：
import format from 'date-fns/format';
import getTime from 'date-fns/get_time';
import isValid from 'date-fns/is_valid';
日期-fns版本: 2.4.1
我怎么才能解决同样的问题。谢谢
浏览 4提问于2019-11-07得票数 3
回答已采纳
4回答
我想用我的React应用程序显示一个Material按钮，但是我得到了以下错误：
Failed to compile.
./node_modules/@material-ui/core/styles/index.js
Module not found: Can't resolve '/Users/hugovillalobos/Documents/Code/LumiereProject/lumiere_frontend/node_modules/react-scripts/node_modules/babel-loader/lib/index.js' in '/
浏览 0提问于2018-12-14得票数 2
回答已采纳
我试图开发一个日期选择器与选择日、月和年作为值列表，但是想要使用日历功能(日期选择和图标)，以便用户可以使用选择标签(dd - mm-yyyy)或日历来选择日期的值列表。
如何使用日历作为一个独立的，没有usign，KeyBoardDatePicker等。
我已经从这里导入了日历：
import { Calendar } from '@material-ui/pickers/views/Calendar/Calendar';
使用方法如下：
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Calenda
浏览 0提问于2019-11-11得票数 5
回答已采纳
我使用的是jQuery UI、droppable和draggable。根据在某些画布上放置的元素，调用不同的函数。所以现在是这样的：
$('#myCanvas').droppable({
drop: function (e, ui) {
if (draggableId === "idA") {
functionA();
} else if (draggableId === "idB") {
functionB();
} else if (dra
浏览 0提问于2013-05-22得票数 0
回答已采纳
我正在使用资料ui v5数据报警器，试图找出什么样的输入格式的日期，如星期六，2022年9月24日。在v4中，它是"dddd，MMMM“，但它不适用于v5。我想在v4里我们用的是MomentUtils，在v5我们用的是AdapterDayjs？有什么建议吗？我想知道如何找到所有有效的输入格式。
浏览 14提问于2022-09-23得票数 1
回答已采纳
1回答
我想使用数据表，这需要可编辑。我安装了材料表，得到了错误。
我得到的演示材料ui表(材料表)，这正好解决了我的目的。但这不起作用
我的package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@date-io/core": "^1.3.9",
"@date-io/date-fns"
浏览 0提问于2019-09-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
