Jquery-Ui Datepicker在页面加载时已经可见，而不是按预期单击
Jquery-Ui Datepicker是一个常用的日期选择器插件，用于在网页中方便地选择日期。在页面加载时，如果希望Datepicker组件已经可见，而不是需要用户单击才能显示，可以通过以下步骤实现：
- 引入Jquery和Jquery-Ui的相关库文件。可以在页面的
<head>标签中添加以下代码：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>- 在页面加载完成后，使用JavaScript代码初始化Datepicker组件，并设置其显示方式。可以在页面的
<script>标签中添加以下代码：
$(document).ready(function() {
$("#datepicker").datepicker({
showOn: "both",
buttonText: "选择日期",
dateFormat: "yy-mm-dd",
showAnim: "fadeIn",
autoSize: true
}).datepicker("setDate", new Date());
});上述代码中，#datepicker是指定的Datepicker组件的选择器，可以根据实际情况进行修改。showOn: "both"表示在输入框和按钮上都显示日期选择器，buttonText: "选择日期"设置按钮上显示的文本内容，dateFormat: "yy-mm-dd"设置日期的格式，showAnim: "fadeIn"设置显示动画效果为淡入，autoSize: true表示根据内容自动调整组件的大小。
- 在页面中添加一个用于显示日期的输入框和一个用于触发日期选择器的按钮。可以在页面的合适位置添加以下代码：
<input type="text" id="datepicker">
<button id="datepicker-button">选择日期</button>上述代码中，#datepicker是用于显示日期的输入框的选择器，#datepicker-button是用于触发日期选择器的按钮的选择器，可以根据实际情况进行修改。
通过以上步骤，页面加载完成后，Jquery-Ui Datepicker组件将会在页面中可见，而不需要用户单击才能显示。用户可以直接在输入框中选择日期，或者点击按钮触发日期选择器进行选择。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/metaverse
相关·内容
我有两个日期选择器。第一个日期选择器是开始日期，第二个日期选择器是结束日期。 我的年份范围是 2018-2019 (Last date is 31-03-2019)
2019-2020 (My start date is 01-04-2019 and the end date is 31-03-2020)
2020-2021 (My start date is 01-04-2020 and the end date is 31-03-2021)
//and so on 现在按照当年，我们在2018-2019的范围内。 所以我的结束日期是2019年3月31日。 如何显示31-03- ye
浏览 25提问于2019-01-19得票数 0
我有一个php变量用于日期，它来自应该放在minDate中的数据库。
示例：
Php代码
<?php
//Example variable in PHP that was from the database
$get_frm_database = "2016-10-20";
?>
HTML表单
<html>
<head>
</head>
<body>
Datepicker:
<input type="text" name="" id="datepicker">
浏览 2提问于2016-10-16得票数 0
回答已采纳
1回答
我有一个财务会计网站的每个页面上都包括一个日期选择器的形式。日期选取器设计为允许用户为要显示的数据选择日期范围。
不是最优的。
表单如下：
<li data-data-theme='b' >
<label for="from">From</label>
<input type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label fo
浏览 0提问于2012-06-22得票数 0
2回答
我在日期选择器里面有自定义按钮。按钮文本:完成。
要求：当我点击文本框时，日期选择器应该显示并选择一些日期。单击“完成”按钮后，选定的日期应显示在文本框中，日期选择器应关闭。
我已经将自动关闭设置为false。
实际输出：在textbox上单击"Done“按钮时得到日期选择器，但是每当我选择任何日期时，日期选择器都会关闭。
我是不是做错了什么或者必须追加更多的代码。
$(function () {
$(".datepicker1").datepicker({
showButtonPanel: true,
autoclose: false,
浏览 5提问于2017-07-11得票数 1
我正在使用带有西班牙语和法语的Jquery datepicker。它可以工作，除了当我切换到法语或西班牙语时，日期字段旁边的按钮消失，当我切换到英语时，它又回来了。下面是我的代码：
$(function () {
var loclanguage = $("#ddlLanguages").val().substr(0, 2);
$.datepicker.setDefaults($.datepicker.regional['']);
if (loclanguage == 'es') {
$(".date
浏览 0提问于2011-07-30得票数 1
回答已采纳
5回答
我有一个这样的场景，
for( int i=0; i < 5; i++)
{
<input type="text" id="t"+i val=""/>
}
我想为所有的文本日期选择器boxes...How..？
是否可以在页面加载的时候..？
我试过这样，
选择日期后，应在相关文本框中进行设置
for( int i=0; i < 5; i++)
{
<input type="text" id="t"+i val=""/>
<input
浏览 0提问于2013-09-11得票数 0
我有一个按钮，当点击它时，会弹出一个jquery-ui日期选择器。这是完美的工作，定位正确，以及所有有趣的东西。日历并不是用来做任何特定的事情的--它只是在人们需要查看日历时作为参考。问题是，我想把图标日历放在单词“日历”左边的按钮上(中间有一个或两个空格)，并且我想让按钮的样式与它旁边的按钮相匹配(css id="headerbutton")。每当我通过css或html来实现这一点时，我的按钮就消失了！任何帮助都将不胜感激。
$("#hiddenField").datepicker({
showOn: "button",
butto
浏览 0提问于2017-12-07得票数 0
回答已采纳
好吧，我正在使用jQuery UI日期选择器作为可怕的AjaxToolkit日期选择器的替代品，但我遇到了一个问题。
由于某些原因，datepicker的prev/next按钮不再显示正确的行为，而是从本月(选择为默认值)移动到1899年12月的上一个按钮和1900年1月的下一个按钮。
有没有人能告诉我为什么会发生这种情况？
绑定代码如下：
$('.jQueryCalendarComponent').live('click', function() {
$(this).removeClass('hasDatepicker').datepi
浏览 1提问于2010-04-01得票数 2
对jQuery来说是个新手，所以请耐心听我说…
当我点击一个按钮时，我想要显示日期选择器。日期选择器应显示为弹出窗口，并将所选日期分配给变量。
我到目前为止的尝试
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button><input type="hidden" id="button_snapshot" />
<script src="ht
浏览 2提问于2018-04-25得票数 0
2回答
我需要帮助。datepicker不能处理laravel视图文件，请帮助如何使其工作
对于Live文件，我使用了以下代码：
{!! Html::script('http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css') !!}
{!! Html::script('https://code.jquery.com/ui/1.12.1/jquery-ui.js') !!}
<style>
col-sm-2 control-label{
text-align: left !
浏览 3提问于2017-07-19得票数 0
回答已采纳
我正在用datepicker做一个网页。到目前为止，datepicker已经在其他页面上工作，但这些页面的顶部没有主菜单。datepicker的代码如下：
<input type="text" ID="txtMSStart" runat="server" onkeypress="return ReturnNothing()"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/bas
浏览 2提问于2013-06-04得票数 0
3回答
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg",
buttonImageOnly: true,
dateFormat: '
浏览 1提问于2011-06-21得票数 2
3回答
向嵌套表单域添加日期选取器
、、、、
我试图将jquery-ui日期选择器添加到应用程序的嵌套表单字段中，但是，当我使用新字段更新DOM时，日期选择器并没有显示在创建的字段中。下面是我为应用程序工作的代码。
<%= form_for(@load) do |f| %>
<%= f.error_messages %>
<%= f.fields_for :destinations do |builder| %>
<%= render "destination_fields", :f => builder %>
<% end %>
浏览 0提问于2012-05-31得票数 2
回答已采纳
1回答
我已经为表(习惯性)房间中的每个id生成了按钮。
当我单击一个按钮时，它应该显示特定的datepicker，并禁用该ID的日期。为此，我放置了一个Ajax函数，并根据ID显示表单，但没有显示。
我的带有按钮的代码：
<div type="text" id="datepicker9" /></div>
<?php
include "controlreservas/conexion.php";
$user_id=null;
$sql1= "select id_habitacion from habitacione
浏览 2提问于2016-12-19得票数 1
1回答
数据报头图标未与文本框正确对齐
、、、、
我有两个文本框与数据，目前我正在使用按钮图标选择日期。我的问题是按钮直接出现在文本框下面，而我希望它直接与文本框的右侧对齐。我相信我需要在CSS上工作才能取得成果。
$('#datepicker1').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyph
浏览 2提问于2018-11-29得票数 0
回答已采纳
我需要一个日期选择器来将其添加到PHP文件中，用于在数据库表中选择不同的时间范围。我过去经常手动输入这些信息，但是由于我需要频繁地选择它，所以我想要创建一个更快、更干净的版本。我通过这个网站找到了一个数据报警器的源代码。
它给了我下面的代码.
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
$( function() {
$( "#datepicker2" ).datepicker();
} );
</script&g
浏览 3提问于2017-01-08得票数 0
回答已采纳
我需要向html页面添加两个日历jQuery对象。我有下面的日期选择设置。具有打开日历对象的图标图像。若要绝对定位图标图像，请执行以下css datepicker-触发器覆盖操作。如果我有两个日历对象，那么如何为类创建两个重写，因为重写类命名约定的名称不具有id名称。粘贴中的代码
.ui-datepicker-trigger {
position:absolute;
left:330px;
top:300px;
}
$("# datepicker ").datepicker({ //显示:两者都会出现-数据报警器将来单击输入框，以及日历图标//显示按钮
浏览 1提问于2013-11-18得票数 1
回答已采纳
我有个奇怪的问题。我希望jQuery UI DatePicker具有下拉的日期格式。
我找到了，并在页面加载时进行了测试和工作。但是，当我通过ajax调用加载页面时，相同的代码不起作用。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src=
浏览 0提问于2019-06-28得票数 0
回答已采纳
1回答
我的页面上有几个输入框，类名为DP。每个工具都附加了日期选择器部件。在我的每个输入中，我都有一个带有日期的数据属性: ie data - What =“2017-05-25”我想要做的是将默认日期设置为每个Datepicker实例上的数据，我的代码如下所示：
$('.DP').datepicker({
beforeShow: function(){
td = $(this).attr( "data-dformat" ) ;
},
showOn: "button",
buttonT
浏览 3提问于2017-01-07得票数 0
回答已采纳
2回答
我有以下用于jQuery UI日期选择器的代码：
$(function() {
$(".date").datepicker({
showOn: 'button',
buttonText: "Choose Date",
dateFormat: 'yy-mm-dd'
});
});
它在文本框的一侧创建一个按钮，以便人们可以单击该框并选择日期。是否可以将类应用于创建的按钮，以便我可以对其应用CSS样式？
浏览 2提问于2010-10-14得票数 12
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
