jquery-ui-datepicker 相关问题

来自jQuery-ui的日期选择器小部件，允许用户从弹出式或内联日历中选择日期

我正在尝试使用 UI 日期选择器选择日期范围。在 from 字段中，人们不应该能够查看或选择给定日期之前的日期。我的代码：我正在尝试使用 UI 日期选择器选择日期范围。在“发件人”字段中，人们不应该能够查看或选择给定日期之前的日期。我的代码： <input type="text" class="form-control" name="from_date" id="f_date" value="{{ Session::get('reviewerJoiningInfo.join_date') ? Session::get('reviewerJoiningInfo.join_date') : null }}" placeholder="From Date" onkeydown="return false" autocomplete="off"> 从会议中获取日期 $('#f_date').datepicker({ format: 'dd-mm-yyyy', }).on('changeDate', function (ev) { var rev_join_date = $('#f_date').val() var reviewer_join_date = $('#reviewer_join_date').val() if(rev_join_date < reviewer_join_date){ $('#f_date').val(reviewer_join_date) } $(this).datepicker('hide'); } ); 我使用了minDate: date但不起作用。要禁用去年日期，您可以在参数中传递年份范围。喜欢 yearRange: '1950:2013', // specifying a hard coded year range 或 yearRange: "c-100:c+0", // last hundred years and current years 示例： $(document).ready(function() { $("#date").datepicker({ changeYear:true, yearRange: "2005:2015" }); }); 过去10年和未来10年： $('#datepicker2').datepicker({ changeMonth: true, changeYear: true, minDate: 0, yearRange: 'c-10:c+20', }); 如果你想禁用过去的日期你可以传递startDate或minDate $('#date').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, minDate: new Date(), }); FIDDLE：用于禁用过去的日期 https://jsfiddle.net/p0deLk56/ 针对js/react/next用户的解决方案：使用min value属性并设置你想要的日期。在本例中，是今天的日期 <input onChange={foo} onBlur={bar} type="date" data-testid="name-input" name="name" min={new Date().toISOString().split("T")[0]} />

javascript jquery-ui-datepicker

回答 2 投票 0

React DatePicker - 点击月份之外的日期和日历自动关闭，不能不选择结束日期吗？

React DatePicker - 点击月份之外的日期和日历自动关闭，不能不选择结束日期吗？当我点击 April 30 时，React DatePicker 自动关闭。我不选择结束日期。输入图片

reactjs datepicker jquery-ui-datepicker react-datepicker react-daterange-picker

回答 1 投票 0

jQuery 日期选择器 - 设置当前日期

HTML JavaScript $( 函数() { $( "#datepicker" ).datepicker({ 日期格式: 'mm-dd-yy', 最短日期：...</desc> <question vote="1"> <p><strong>HTML</strong></p> <pre><code><input type="text" id="datepicker"> </code></pre> <p><strong>javaScript</strong></p> <pre><code><script> $( function() { $( "#datepicker" ).datepicker({ dateFormat: 'mm-dd-yy', minDate: "today", maxDate: "+30d", setDate: "+1d" }); }); </script> </code></pre> <p><strong>回复：</strong></p> <p><a href="https://i.stack.imgur.com/oIsji.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL29Jc2ppLnBuZw==" alt=""/></a></p> <p><strong>选择当前日期的预期响应：</strong></p> <p><a href="https://i.stack.imgur.com/6kmg5.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZrbWc1LnBuZw==" alt=""/></a></p> </question> <answer tick="true" vote="1"> <p><pre><code>setDate</code></pre>是你的朋友。 <pre><code>"setDate", "0"</code></pre> 是今天的日期。您可以根据需要增加和减少数量。</p> <p><pre><code>$("#datepicker").datepicker("setDate", "1");</code></pre></p> <p>示例：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(function() { $("#datepicker").datepicker({ dateFormat: 'mm-dd-yy', minDate: "today", maxDate: "+30d", }); $("#datepicker").datepicker("setDate", "1"); });</code></pre> <pre><code><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.min.js"></script> <input type="text" id="datepicker"></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(function() { $("#datepicker").datepicker({ dateFormat: 'dd-mm-yy', minDate: "today", maxDate: "+30d", }); $("#datepicker").datepicker("setDate", "1"); });</code></pre> <pre><code><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.min.js"></script> <input type="text" id="datepicker"></code></pre> </div> </div> <p></p> </answer> </body></html>

jquery datepicker jquery-ui-datepicker

回答 0 投票 0

如果太早打开，为什么我的 Bootstrap 日期选择器会被重复？

我的代码中有一个日期选择器，当我在所有请求完成之前打开日期选择器时，它会在我的日期选择器下拉列表中添加一个内联日期选择器，这是我的代码我的代码中有一个日期选择器，当我在所有请求完成之前打开日期选择器时，它会在我的日期选择器下拉列表中添加一个内联日期选择器，这是我的代码 <div class="hand-date-picker mr-3"> @Html.TextBox("InHandDate", "", new { @class = "datepicker", @group = "inhanddate", @data_date_format = HelperMethods.GetDateFormat(), @data_test_selector = "txtInHandDate" }) <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span> </div> 并在课堂上初始化 $("#InHandDate").datepicker({ //@ts-ignore daysOfWeekDisabled: '0,6' }); $("#InHandDate").datepicker('setDaysOfWeekDisabled', [0, 6]) 并在脚本元素中 $(document).ready(function () { let minDate; if ($("input[class='PickUpShipping']").is(":checked")){ $(".CashOnPickup").show(); $("#warehouses-select").css("display", "block"); minDate = '@(HelperMethods.GetDateTime())'; } else { $(".CashOnPickup").hide(); $("#warehouses-select").css("display", "none"); minDate = '@(HelperMethods.GetDateTime().AddDays(1))'; } $("#InHandDate").datepicker('setStartDate', new Date(minDate)) }); $("input[name='ShippingOptions']").on("click", function (ev) { let minDate; if ($(this).data('shippingcode') === 'Pickup') { $(".CashOnPickup").show(); $("#warehouses-select").css("display", "block"); minDate = '@(HelperMethods.GetDateTime())'; } else { $(".CashOnPickup").hide(); $(".CashOnPickup input").prop('checked', false); $("#warehouses-select").css("display", "none"); minDate = '@(HelperMethods.GetDateTime().AddDays(1))'; } $("#InHandDate").datepicker('setStartDate', new Date(minDate)) }); $("input[name='ShippingOptions']").on("change", function (ev) { $("#InHandDate").datepicker('setDate', ""); }); 我尝试用多种方式来阻止它。但到目前为止还没有运气显然这是因为没有设置 minDate 属性。添加'@minDate =“”' HTML 解决了问题

jquery bootstrap-4 datepicker jquery-ui-datepicker bootstrap-datepicker

回答 1 投票 0

Jquery 日期选择器在日期更改时不执行回发

我在我的项目中使用这个日期选择器（http://keith-wood.name/datepick.html）我在 asp:TextBox 控件上使用它，问题是该控件失去了 AutopostBack 功能。我希望...

jquery vb.net jquery-ui-datepicker autopostback

回答 1 投票 0

联系表格7日期选择器，日期范围在2个日期之间

我希望在我的 WordPress 联系表 7 中有两个日期字段。开始日期和结束日期。这些字段将是“Contact Form 7 Datepicker”插件中的日期选择器。当访客选择...

wordpress datepicker jquery-ui-datepicker contact-form-7

回答 6 投票 0

如何在单击按钮时显示日期选择器？

我正在尝试向 jQuery 日期选择器的按钮面板添加一个自定义按钮。当我应用以下代码时，虽然没有任何反应： $('.date-picker').datepicker( { 更改月份：正确， ...