在javascript中更改输入type=date的最小属性
在JavaScript中，要更改输入类型为"date"的最小属性，可以使用HTMLInputElement对象的min属性。该属性用于指定输入字段中可接受的最小日期值。
以下是完善且全面的答案：
在JavaScript中，要更改输入类型为"date"的最小属性，可以通过以下步骤实现：
- 获取对应的输入字段元素，可以使用document.getElementById()或document.querySelector()等方法获取到该元素的引用。
- 使用获取到的元素引用，访问其min属性，该属性用于设置输入字段中可接受的最小日期值。
- 将min属性设置为所需的最小日期值。日期值的格式应为"YYYY-MM-DD"，例如："2022-01-01"。
以下是一个示例代码：
// 获取输入字段元素的引用
var dateInput = document.getElementById("dateInput");
// 设置最小日期值
dateInput.min = "2022-01-01";在上述示例中，我们假设存在一个id为"dateInput"的输入字段，通过document.getElementById()方法获取到该元素的引用，并将其min属性设置为"2022-01-01"，即可更改输入类型为"date"的最小属性为指定的日期。
应用场景：
- 在表单中需要限制用户选择的日期范围时，可以使用该属性来设置最小日期，以确保用户选择的日期不早于指定的日期。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mwp
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
1回答
在HTML5网站中，我使用新的datetime输入类型字段和旧浏览器的替代方案。
在我的例子中，日期时间字段用于设置即将到来的事件，因此不可能设置过去定义的日期时间。min属性应该允许我这样做，但它似乎不起作用，而它可以在日期或时间输入字段上完成这项工作。
这是我的代码(编辑视图，但在添加视图中也有同样的问题)：
<input type="datetime-local" id="EventDatetime" name="data[Event][datetime]" step="900" min="<?php e
浏览 4提问于2012-10-01得票数 1
2回答
当前正在为窗体创建一个react组件。我正在通过一个常规的javascript文件将数据报警器应用到我的输入中，这些输入都是在react (jsx)中呈现的。
当从数据报警器中选择日期时，我试图从输入中提取状态。不幸的是，react并没有拿起价值。我知道这可能与调用常规javascript文件中的datepicker到呈现的输入有关。问题是，一旦我选择了一个日期，当我在输入上调用一个常规的.val时，它会给我一个值。
还应该提到，我使用的是引导-数据报警器。
如有任何意见或建议，不胜感激:)
form.js.jsx
var StepOne = React.createClass({
get
浏览 2提问于2016-02-24得票数 0
回答已采纳
这是工作样本。
<tr>
<td><input type="text" name="date_day1" id="date_day1" value=" size="1"></td>
</tr>
<tr>
<td><input type="text" name="date_day2" id="date_day2" value=" size="1">
浏览 6提问于2013-04-15得票数 0
回答已采纳
我已经在我的html页面输入type="date"，我想通过JavaScript禁用特定的日期。我该怎么做呢？
我曾尝试禁用使用getElementById，但它禁用了完整的日期输入。
浏览 0提问于2017-10-31得票数 1
为了确保签出日期的用户输入是在签入日期的用户输入之后，我需要为min限制添加什么？
<form>
Enter Check-In Date:<br>
<input type="date" name="checkin"><br>
Enter Check-Out Date:<br>
<input type="date" name="checkout"><br>
</form>
这是否可以仅用HTML5完成，还是需
浏览 4提问于2016-11-07得票数 1
回答已采纳
1回答
我有一个可以在所有浏览器中工作的输入类型date ( Chrome的HTML5，还有一些让它在IE11和火狐中工作的javascript )。
<input type="date" name="Date" id="Date" min="2016-10-19" max="2016-11-03"/>
但是一件奇怪的事情正在发生。如果我在Chrome中选择一个日期，它就会发布到我的数据库中，但如果我在IE11或火狐中选择一个日期，它就会因为格式无效而被拒绝。
我的脚本当前在HTML中，这就是它看起来像这样的原
浏览 0提问于2016-10-20得票数 0
我有两个输入字段：
<input type="date" id="start">
和
<input type="date" id="end">
是否可以根据用户在“开始”输入上选择的日期，禁用"end“输入字段中的前一个日期。
例如:如果用户在开始输入字段中选择" 2022/01/11“，则应自动禁用结束输入字段中所有以前的日期(只允许用户选择2022/01/11或更高日期)。
所有这些都使用javascript。
我试过的是：
$(function(){
var dtToday =
浏览 6提问于2022-01-11得票数 0
回答已采纳
我有一个问题，这里有人知道如何禁用日历中的日期吗？
<input type="date">
从数据库里的记录？
*广泛：
插入日期->数据库->从数据库->读取日期输入type=" date“日历中的禁用日期
浏览 11提问于2017-08-04得票数 1
2回答
我在我的表单中有一个输入域日期，并希望添加Javascript验证，以确保它总是晚于今天的日期。我尝试了以下方法，但当用户单击输入字段并进行更改时，似乎不会调用该函数。
<input type="text" name="InsertRecordGuestOrders_Delivery_date" id="InsertRecordGuestOrders_Delivery_date" value=""/>
<script type="text/javascript">
function va
浏览 0提问于2013-04-04得票数 0
回答已采纳
我是经典ASP和javascript的新手。我试图验证一个日期是mm/dd/yyyy格式，一旦用户在文本框中输入它。但是每次我在date字段中输入两个数字时，它都会触发日期验证(ValidateExpFromDt)，并说它是一个无效的日期。我知道这与触发javascript函数的OnKeyUp事件有关，但是相同的事件适用于不同的帐号文本字段(validateAccNum(此))，.How只能在用户输入完整的日期而不仅仅是一个数字之后才能验证吗？这是asp的片段
<td width="145" align="left" class="text"
浏览 0提问于2013-11-06得票数 2
2回答
请您告诉我如何限制用户在“姓名”字段中不输入十个字符？如果用户输入的字符超过10个，他将无法输入该字符。请给我一个更好的建议？
我有一个name字段，在这个字段中，用户只输入10位数的名称，不超过这一点。如果用户尝试输入更多内容，则不允许。
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType!='DATE'">
<div class="form-gr
浏览 0提问于2018-11-12得票数 1
回答已采纳
我有两个使用datepicker的html输入字段。
<input id="startdate" type="date" onchange="handler(event)" />
<input id="enddate" type="date" onchange="handler(event)" />
javascript在输入中的样子--启动日期--从今天起禁用所有过去的日期，在第二次启用时，只比实际日期提前2天。
浏览 5提问于2017-08-20得票数 0
1回答
我使用的是jQuery UI数据报警器，在我的datepicker输入字段中添加了日期验证，这是我的数据报警器的javascript代码('start_date‘是数据报警器输入字段的id )：
$('#my-form').validate({
rules: {
start_date: {
required: true
}
},
mess
浏览 2提问于2011-02-16得票数 1
1回答
我的html使用
<input runat="server" id="dateid" maxlength="50" size="10" type="date" name="dateid" />
我有一个jquery日期选择器，所以第一个问题是在某些浏览器上，比如google，它提供了自己的日期选择器。我阅读时不使用输入类型日期，但这种方式简化了jquery代码，将日历应用于所有日期。因此，我找到了现代化，它似乎工作，它不显示我的日历，当浏览器支持自己的日历。
我使用的是现代化版本2.6.
浏览 3提问于2013-09-16得票数 0
回答已采纳
2回答
我有一个代码，就在去年，它还在运行。它的作用是禁止用户选择未来的日期。现在已经是一月份了，它似乎不起作用。我不明白为什么。请帮我解决这个问题。您的帮助我们将不胜感激。
这是输入：
<input id="reqDate" class="form-control col-md-7 col-xs-12" name="reqDate" required="required" type="date">
Javascript：
<script type="text/javascript">
浏览 5提问于2016-01-03得票数 2
2回答
是否可以禁用我附加了datepicker的输入文本框，而只允许通过单击Jquery UI datepicker的按钮/图标面板进行输入。
$(function(){
var opt = {
buttonImage: "images/cal.png",
buttonImageOnly: true
};
$("#date").datepicker(opt);
});
我的意思是，图标在那里，但用户仍然可以键入无效的日期。假设我的格式是"mm/dd/yyyy"，但我可以直接键入并将其设置为16/1
浏览 1提问于2010-09-24得票数 0
回答已采纳
我需要一个功能，我们应该不能选择(禁用)在开始日期之前的结束日期使用javascript或jquery，但不依赖于任何jquery-ui或datepicker插件。请帮我拿到这个，提前谢谢。 我已经做了在线搜索，但一切都依赖于其他插件，有没有机会完成没有插件。 <div class="row">
<div class="col-md-6">
<label for="startDate">Start date&
浏览 22提问于2021-10-14得票数 0
回答已采纳
下面是我的代码：
<script type="text/javascript" src="calendar_date_picker.js"></script>
<script type="text/javascript">
var cdp1 = new CalendarDatePicker();
var props = {
debug : true,
excludeDays : [6,0,1],
excludeDates : ['20
浏览 1提问于2011-07-07得票数 0
我有一个带有type=DateTimeLocal的asp文本框。我试图验证它，以确保它的日期时间值大于当前日期时间。我已经尝试过在aspx和vb(服务器)端比较验证器加载值。我已经尝试过范围验证器和自定义验证器。我的自定义验证器从不触发。范围和比较总是返回无效的。
如何验证在文本框中输入的带有type=DateTimeLocal的文本是否大于当前日期时间？
ASPX页面
<asp:TextBox CssClass="form-control" ID="txtStartDate" TextMode="DateTimeL
浏览 3提问于2013-11-12得票数 1
我在一个项目中工作，其中用户可以输入他们的证书，其中有到期日。我正在使用ionic datepicker，它对于获得证书的完成日期非常有效，但我在选择到期日期时遇到了一个问题。datepicker的年份选项不会超过2020年。例如，如果用户的证书将于2022年到期。有没有办法将未来年份添加到滚动选项中？这是我当前的代码：
<ion-datetime display-format="MM/DD/YYYY" picker-format="MM DD YYYY" type="date" formControlName="dateE
浏览 5提问于2020-06-11得票数 1
我正在对一个客户的网站进行升级，我发现了以下挑战：
该客户有一个由两个日期输入标记组成的预订系统，用于确定他/她进入酒店房间的日期。我知道有一些jQuery甚至是纯javascript驱动的插件(如DHTMLX套件甚至jQuery EasyUI控件)在这方面做得很好，但我想知道是否可以将日期阻塞功能添加到一个普通的<input type="date">标记中。
到目前为止，我已经使用<datalist>标记添加了预定义的日期，并将其与带有list属性的日期输入一起使用，但仅此而已。
有没有可能用javascript阻止日期？
浏览 1提问于2014-03-06得票数 1
1回答
我正在使用jQuery UI数据报警器小部件(请参阅)，但是我们的可访问性检查程序正在抱怨它插入的按钮映像。特别是，它标记"buttonText“属性在按钮图像上同时用作"alt”和"title“。
输入：
<input type='text' name='from' id='from' value=''>
<script type='text/javascript'>
$(document).ready(function() {
$( '#from
浏览 2提问于2016-10-07得票数 1
回答已采纳
我对我一直在做的一个函数有个问题。此函数的目的是获取两组文本输入框中的日期，计算两组文本输入框之间的差异，然后将天数放入第三组框中。我的函数如下所示。
function daysBetween() {
for (var i = 0; i < 8; i++) {
//Get the value of the current form elements
var start = namestart[i];
var end = namend[i];
var out = names[i];
//Duration of a day
var d = 1000
浏览 1提问于2012-11-21得票数 1
回答已采纳
1回答
我在一个laravel项目中工作，我想在输入字段中显示一个日期，我可以显示数据库中的所有行，但不能显示日期字段。我已经尝试用type="text“和type="date”在输入中显示它，但都不起作用。
下面是我单击以获取模式的按钮：
<a type="button" class="detail-modal"
data-dateFin="{{$voiture->dateFin}}" >
<h5>DETAIL</h5>
</a>
我的模式：
浏览 0提问于2018-08-15得票数 0
2回答
我尝试通过jquery将输入类型从"date_calendar“替换为"date”。输入的名称是"DateOfBirth"，但由于某种原因，它不能与下面的代码一起工作。
我是jquery/javascript的新手，也许我错过了一些东西。我该怎么做呢？我错过了什么？这是当前的代码：
$(document).ready(function() {
$('input[name=DateOfBirth[0]]').attr('type', 'date');
});
HTML：
<input min="1938
浏览 0提问于2013-04-28得票数 0
回答已采纳
我有以下代码来隐藏/显示元素，具体取决于在sharepoint表单的下拉列表中选择的值。
它工作得很好，但我想添加一些验证它(必填字段)，这取决于在下拉列表“级别”中选择的内容。
Sharepoint有一个名为PreSaveItem()的默认函数，我必须调用它才能不提交页面。
<script type="text/javascript">
//Items to hide when page first loads
$(document).ready(function ($) {
$('nobr:contains("Vision")'
浏览 0提问于2010-08-16得票数 0
回答已采纳
所以我有这样的代码：
<input name="date" v-model="date" id="date" type="text" value="" />
...then在其他地方：
<li><b>Date:</b> {{ date }}</li>
...And Vue：
var vueapp = new Vue({
el: '#form'
,data:{
date:''
}
});
通常，当用户输入输
浏览 0提问于2018-07-03得票数 0
回答已采纳
我有以下表格：
Start Date and Time: <input type="text" name="startDate" id="startDate" placeholder="July 21, 1983 13:15:00"><br />
End Date and Time: <input type="text" name="endDate" id="endDate" placeholder="July 21, 1983 14:15:00
浏览 7提问于2014-01-25得票数 1
回答已采纳
我使用jquery plugin pickaday根据用户对日期的选择将值分配给输入字段。我正在使用下面的输入字段，它具有id datepicker，并且使用javascript，我试图将格式化日期赋给输入的value字段。但我没有看到值发生变化，我使用console.log检查了输出，它显示了正确的值，但赋值没有发生。当我刷新此页面时，我还看到对象文本作为输入。
我也使用moment.js进行日期格式化，下面是包含文件
<script type="text/javascript" src="/jscripts/moment.js"></scr
浏览 1提问于2018-01-07得票数 0
在Firefox中，当单击输入字段时，数据报警器不会显示。在Chrome或IE中没有问题。
这是我的HTML：
<div class="input-append">
<input id="start_date" name="start_date" class="date_field" type="text">
<span class="add-on"><i class="icon-calendar"></i>
浏览 2提问于2015-10-26得票数 0
回答已采纳
3回答
有人知道在bootstrap/razor html代码中实现日期/时间选择器的最简单方法是什么吗？通过直接输入以下命令，我目前可以让程序正常运行：
<div class="editor-label">
@Html.LabelFor(model => model.date)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.date)
@Html.Validation
浏览 5提问于2013-03-28得票数 0
回答已采纳
3回答
我正在尝试使用jQuery.Gantt插件与IkiWiki。我的代码创建了以下HTML片段：
<script src="./jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.fn.gantt.js" type="text/javascript" charset="utf-8"></script>
<script
浏览 0提问于2013-12-04得票数 0
用户必须输入Date From字段和Date to字段。“结束日期”字段必须在“起始日期”之后。如何在JQuery中强制执行此操作？我当前的代码不能工作，甚至不能给出默认日期。
<script type="text/javascript" language="javascript">
$('#DateFrom').datepicker({ dateFormat: 'dd-MM-yy', changeMonth: true, changeYear:true, yearRange: 'c-1:c+1'
浏览 0提问于2011-01-25得票数 1
回答已采纳
我目前正在学校学习Javascript，所以我的代码可能看起来像是初学者的编码风格。
当我选中复选框输入时，我希望浏览器上的列表(数组)发生变化。但是，当我选中复选框时，它会显示"Uncaught : renderIncomes.overIncome is not a function at HTMLInputElement“。在我的html文件中，我将输入设置为复选框类型。在我的javascript文件中，当我选中复选框时，我添加了一个要更改的eventlistener。只有当收入大于300时，浏览器上的列表才会更改。下面是html和javascript文件的代码。
let us
浏览 0提问于2018-10-22得票数 0
2回答
我无法设置100%的高度，我的DIVs，尽管设置min-height的IE。下面分别是CSS和HTML。截图也附呈。
如您所见，左边的滚动条没有100%显示。
CSS
body
{
margin:0;padding:0;
min-height:100%;
height:100%;
}
#container
{
background-color: "#FFF";
width:100%;
margin: 1%;
overflow:auto;
min-height:100%;
height:100%;
浏览 1提问于2013-06-28得票数 1
回答已采纳
我有一个输入文本字段，当用户单击特定按钮时，输入文本字段将自动填充，但是如果用户手动更改或删除字段中的文本，则函数在重新单击按钮时不再工作！
代码：
/* The JavaScript function that should be re-executed */
function getUnixTime(){
var date = new Date();
var unixTime= date.getTime();
var datepack = [unixTime, date];
return datepack;
}
function setTimeUnix(element
浏览 1提问于2016-06-23得票数 0
回答已采纳
下面是在firefox中启用数据交换的代码
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribu
浏览 0提问于2017-06-02得票数 1
2回答
我是一个服务器端的人，试图教自己一些CSS，Javascript，jQuery等。我写了一个小测试项目，加载一个模型，并在简单的文本框中显示值。工作正常，如您所见：
但当然，我想适当地显示这些日期。因此，让我将这些输入类型更改为"date“。这是Razor代码：
@Html.TextBoxFor(m => m.Date, new { @type="date", @id="ondate" })
好吧，这起作用了..。说大也大吧。我是说，它现在显示为一个日期选择者..。但它不再显示模型的日期了！
我做错了什么？
浏览 3提问于2015-02-05得票数 3
回答已采纳
我正在做一个使用j2ee的网络项目。无论如何，在我的jsp页面中，我有一个包含两个类型为datetime-local的输入的表单，其中一个必须大于另一个，这就像验证开始和结束日期时间一样，所以在提交之前我不知道如何进行此测试。我在提交按钮onclick中尝试了一个javascript代码，我试图使第二个日期的输入字段为空，如果它低于另一个，但它不起作用。有谁可以帮我？
我在jsp页面中的表单
<form id="tab" action="AjouterMCorr" method="GET">
<div class=
浏览 0提问于2016-03-10得票数 0
2回答
我正在使用这些脚本( jquery-ui[].custom.js是datepicker插件)：
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.13.custom.js" type="text/javascript"></script>
<script id="formvalidati
浏览 3提问于2011-05-26得票数 6
回答已采纳
我想要创建一个输入字段和date，但是当用户键入他的名称进行搜索时，它也可以在同一个字段中工作。
更具体地说，我希望在JavaScript中的搜索筛选按钮中创建一个带有文本和date输入字段的动态输入字段。
是否可以创建一个包含日期的字段，以及当用户想要按名称进行搜索时，他可以在同一个字段中搜索名称，如果他想按日期搜索筛选器，也可以在同一字段中搜索。
如果可能的话，我该怎么做呢？
浏览 3提问于2022-01-21得票数 0
回答已采纳
1回答
我无法使引导程序阻止用户输入日期最大值，而不是今天是日期--这是我的功能
$('#datetimepicker3').datetimepicker({
format: 'yyyy-MM-dd',maxDate:new Date()
});
剩下的只是文献的输入和导入。
<div id="datetimepicker3" class="input-append date">
<input type="text" name="datewo" value="&l
浏览 1提问于2017-03-13得票数 1
回答已采纳
2回答
我使用的是Angular 1.6，我想直接将字符串绑定到date类型的输入，而不是将date转换为Date，然后再绑定到输入。原因是我从服务器获取JSON (以及其他数据)，我不想只为日期创建一个中间变量，我想直接使用JSON，因此当输入字段中有修改时，我可以按原样回发我的JSON，而不需要使用ng-change和转换日期并将其放入我的JSON，等等。我有我的问题。
下面是html：
<body ng-app="plunker" ng-controller="MainCtrl">
<form name="myForm">
浏览 0提问于2017-08-04得票数 1
我希望发生两件事。
一
当选定项生成时，输入字段将更新为总计，
二
复选框是动态生成的，有时可能高达6个，有时甚至低到一个产品。
这是我做的，但我做不到。
<script type="text/javascript">
function updateTotal(){
document.getElementById('total').value =
(document.getElementById('date0').checked?
parseFloa
浏览 0提问于2012-06-07得票数 2
回答已采纳
JQuery验证只适用于表单中的第一个元素，验证不会检查第二个元素。需要找出丢失了什么。将输入交换为text1和date2，验证仍然适用于第一个。
<!DOCTYPE HTML>
<html lang="en-US">
<head><title>
</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<scr
浏览 1提问于2012-07-18得票数 11
3回答
我使用输入文本日期类型，当输入文本被填充或在输入中单击某个值时，我试图获取值，在输入中需要捕获值的事件是什么？
我从jquery中输入了一个键，但只有当有人按下键时才能使用它，但是在这个字段中，您可以在箭头中单击它，我的值不会更新，当我从数据库中得到值时，这个值也不会更新。
<script type="text/javascript">
$(document).ready(function(){
$("input#name").on("keyup",function(){
var valor= $(this).va
浏览 0提问于2019-01-16得票数 0
回答已采纳
我有一个名为“date”的DateField模型的Django管理页面：
# models.py
class Article(models.Model):
date = models.DateField(
help_text="Article publication date"
)
# admin.py
@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
change_form_template = "article_extension.html"
浏览 0提问于2020-06-04得票数 0
回答已采纳
3回答
我正在尝试禁用表单中的输入字段，该表单基于用户使用javascript输入。只有在复选框id为" DD“时，才需要启用字段DD Number、Bank、date和branch。我试着这样做，但不起作用。
<script type="text/javascript">
function paycheck()
{
var pay=document.getElementById("DD");
var bank=document.getElementById("bank");
var ddno=
浏览 0提问于2016-02-17得票数 0
1回答
当用户输入文本框时，我将显示“自动完成列表”。当usr输入时，我调用AJAX调用并从服务器获得结果，然后在自动完成中显示结果。在文本框中输入2或3个字符后，一切正常工作，将显示“自动完成列表”。但是，如果我只输入一个字符，那么列表就不会显示。我跟踪了我的代码，ajax调用被成功地调用，但未能显示自动完成。这是我的密码：-
$('.search_').each(function () {
var id=this.id;
$('#'+this.id).unbind("proper
浏览 2提问于2015-01-22得票数 2
我有一个input元素，它带有一个使用创建的附加datepicker。
<div class="well">
<div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd">
<input type="text" id="date-daily">
<span class="a
浏览 15提问于2013-06-09得票数 74
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
