如何从JS中的日期选择器中获取(MM-DD-YYYY)形式的日期值
要从JavaScript中的日期选择器获取(MM-DD-YYYY)形式的日期值，你可以使用HTML的<input type="date">元素结合JavaScript来处理日期格式。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Picker Example</title>
</head>
<body>
<input type="date" id="datePicker">
<button onclick="getFormattedDate()">Get Date</button>
<p id="formattedDate"></p>
<script src="script.js"></script>
</body>
</html>JavaScript部分 (script.js)
function getFormattedDate() {
const datePicker = document.getElementById('datePicker');
const selectedDate = datePicker.value;
const formattedDate = formatDate(selectedDate);
document.getElementById('formattedDate').innerText = formattedDate;
}
function formatDate(dateString) {
const date = new Date(dateString);
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
return `${month}-${day}-${year}`;
}解释
- HTML部分:
- 使用
<input type="date">元素创建一个日期选择器。 - 添加一个按钮，点击按钮时调用
getFormattedDate函数。 - 使用
<p>元素显示格式化后的日期。
- 使用
- JavaScript部分:
getFormattedDate函数获取日期选择器的值，并调用formatDate函数进行格式化。formatDate函数将日期字符串转换为Date对象，然后提取月份、日期和年份，并格式化为MM-DD-YYYY形式。
应用场景
这种日期格式常用于表单提交、数据存储和显示等场景。例如，在用户注册、订单提交或日历应用中，需要将用户选择的日期以特定格式传递给后端服务器或进行本地处理。
可能遇到的问题及解决方法
- 日期格式不一致:
- 确保所有日期都按照
MM-DD-YYYY格式进行处理，避免不同格式导致的解析错误。 - 使用
padStart方法确保月份和日期始终是两位数。
- 确保所有日期都按照
- 浏览器兼容性:
- 不同浏览器对日期选择器的支持可能有所不同，确保在目标浏览器上进行测试。
- 使用Polyfill或第三方库（如Moment.js）来处理日期格式化和兼容性问题。
通过以上方法，你可以从JavaScript中的日期选择器获取并格式化日期值，确保数据的一致性和准确性。
相关·内容
当我以这种格式从日期选择器输入的值(Tue Mar 24 2020 17:00:00 GMT-0800(PST) )中提取值时，我需要将其转换为(MM-DD-YYYY) 下面是我的代码中获取日期值的部分我不知道如何实现 "toLocaleDateString()"
浏览 24提问于2020-01-31得票数 0
2回答
在我的javascript代码中，我有一个MM/DD/YYYY格式的日期。我需要通过请求URL将其传递给spring控制器。我尝试以字符串的形式传递，但是因为/不能这样做。我尝试从js以MM-DD-YYYY的形式从js代码发送日期，在spring控制器中，我在声明参数时使用了@DateTimeFor
浏览 1提问于2017-05-27得票数 0
1回答
shrink: true, />
我从物料UI的文本字段的代码中收到的默认日期格式是：'dd-mm-yyyy‘。但由于我的要求，我希望格式是‘MM-dd-yyyy’的形式。我已经尝试使用材料Ui日期选择器，但这打破了我目前的</
浏览 2提问于2020-04-13得票数 2
1回答
我正在使用JavaScript库从我的jQuery UI日期选择器中获取日期。数据选择器目前正在使用mm/dd/YYYY格式，以便向用户显示值，因此今天将显示为：12/17/2013。我需要使用YYYYmmdd格式在XHR请求中提交此日期，因此上面的示例将转换为20131217。我试着利用这样的时刻：
var t_date = moment($("#
浏览 2提问于2013-12-17得票数 0
回答已采纳
我有一个bean vacationRequestBean，它具有startdate和java.util.Date类型的enddate字段。对于这些字段，我在index.xhtml中使用了index.xhtml日期选择器。日期选择器的格式是MM-dd-yyyy。"date" class="datepicker" value="#{vacationRequestBean.startdate}">
&l
浏览 3提问于2014-08-08得票数 1
回答已采纳
我正在使用bootstrap-datepicer.js，它工作得很好。-02-2012" size="16"><i class="icon-th"></i></div>
我想在rails中以我的形式使用它Trash
</div>
浏览 1提问于2012-08-23得票数 3
回答已采纳
2回答
在我的网页中，我有很多数据范围选择器。当用户从日期选择器中选择日期范围时，我需要将选定的日期传递给分配给该component.Please的特定角度控制器。请参阅以下代码，当用户从日期范围选择器中选择日期范围并单击应用时，我将使用$broadcast将选定的日期传递给另一个控制器。html file.and中有
浏览 0提问于2017-06-01得票数 1
我有一个文本字段，其中填充了jQuery UI日期选择器中的日期。根据用户在我的网站上的个人资料中选择的日期格式，日期选择器将使用DD-MM-YYYY或MM-DD-YYYY填写文本字段。如果日期填写为DD-MM-YYYY，则Ruby on Rails会正确地解释这一点，并且日期会被正确存储。但是当它是MM-DD-YYYY时，Ru
浏览 0提问于2010-10-30得票数 0
回答已采纳
2回答
我有一个Rails 4应用程序，在其中我们必须向用户呈现一个日期选择器，但选择的日期显示应该是MM-DD-YYYY格式。JS如下： pickTime: false(显示效果与出现的极好的日期选择器配合使用时效果很好('%m-%d-%Y&#
浏览 0提问于2017-08-26得票数 0
我正在使用jQuery日期选择器，问题是日期的格式，我希望格式与MySQL日期格式相同，因为我在MySQL表中没有得到正确的日期值，我粘贴了下面的代码。code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.
浏览 0提问于2014-05-15得票数 0
回答已采纳
我有一个名为MyDate的日期/时间字段。最初，它的格式是mm/dd/yyyy，没有输入掩码。日期选择器也已设置。然后我使用Short date添加了输入掩码，将默认的输入maks更改为(99-99-0000;;_)，并将格式更改为mm-dd-yyyy。但是，当我切换到DataSheet视图时，我的所有日期都从mm/dd/yyyy更改为mm-dd-yyyy (这是正确
浏览 0提问于2010-11-11得票数 1
回答已采纳
我需要设置日期选择器的初始日期为03/20/2010，格式为mm-dd-yyyyy。以及选择日期值<input id='datepicker' type='text' value='03/20/2010' />
日期选择器正在将3月20日填充为选定日期和突出显示的当前日期
浏览 8提问于2010-03-12得票数 14
回答已采纳
2回答
我正在尝试输出用户从日期选择器日历中选择的日期，格式为“清华2014年3月25日”。问题是1) datepicker以'mm-dd-yyyy‘格式发送给我，我需要通过strtotime传递这个字符串，以便用作date()函数的输入，而strtotime将使用'-’作为分隔符的日期视为国际格式所以问题是，我如何将字符串'mm-dd-yyyy‘切换为'dd-mm-
浏览 1提问于2014-03-29得票数 2
我正在尝试从实现datepicker，并相应地将所有文件复制到js和css文件夹中，并尝试调用此页面上的datepicker，但它没有显示。以下是页面的代码：echo $this->Html->script('jquery-1.9.1.js');echo $this->Html->script('boots
浏览 1提问于2013-09-17得票数 1
1回答
我有一个Oracle过程，我必须从基本日期选择器中传递一个日期时间值，我将其赋值为bdp1。如何从VB.net传递此值。当我传递日期时，它执行函数
Dim queryString As Stri
浏览 1提问于2013-06-06得票数 0
1回答
我试图更改我的角垫数据选择器格式，所以我在输入控制台中成功地打印了日期值格式时使用了“更改”方法，但是我不能传递到反应性形式控制器中的值，任何人都会帮助我做错了什么。我想看起来像这样的格式: DD/MM/YY <mat-form-field>
<input formControlName=; /
浏览 1提问于2018-10-31得票数 1
回答已采纳
我想将日期格式更改为dd-MM-yyyy当前我的jQuery日期选择器的日期格式是MM-dd-yyyy下面是我在asp webforms中的代码，但它不起作用 <link href="../Contents/js/jquery-1.8.2.js"></script>
<script src="
浏览 38提问于2016-11-10得票数 0
回答已采纳
我有一个函数，返回在{ dateFormatter.dateFormat = "MM-dd-yyyy
浏览 2提问于2015-02-06得票数 1
我从API获取这些格式中的一种"mm-dd-yyyy"或"mm/dd/yyyy"，这些都是字符串，我想将它们从string解析为js date对象。因此，当我执行new Date('12/07/2021')或new Date('12-07-2021')时，会得到输出日期，该日期比2021-12-06T18:30:00
浏览 11提问于2021-12-07得票数 -4
嘿，伙计们，我正在尝试比较我的数据库中的date和我从日期选择器中选择的日期范围。它无法进行比较，因为两者的格式不同。我的数据库中的date具有YYYY-MM-DD格式，而来自日期选择器的格式是MM-DD-YYYY。我正在尝试将日期选择器的格式转换为与我<e
浏览 0提问于2018-07-02得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
