bootstrap-datepicker 相关问题

bootstrap-datepicker是由uxsolutions（eternicode）使用Twitter的bootstrap库的datepicker小部件。（从eyecon分叉）

如何在Bootstrap Datepicker中设置maxViewMode（使用JS Fiddle）

我有一个简单的 Bootstrap Datepicker 安装： HTML： JS： $("#datepicker").datepicker( {minViewMode: "天", maxViewMode: "天"}); 我正在努力

javascript jquery twitter-bootstrap datepicker bootstrap-datepicker

回答 2 投票 0

我有一个使用引导日期选择器的输入，但我希望输出格式类似于（日 - 月#，年）例如：周三至 2025 年 1 月 1 日。我有一个使用 bootstrap datepicker 的输入，但我希望输出格式类似于（日 - 月#，年）例如：Wednesday - January 1, 2025。 <div class="col-md-6"> <div class="form-group"> <label>Date</label> <div class="date input-group"> <input type="text" class="datepicker form-control" id="date-input" /> </div> </div> </div> 这是我用于更新输入值的脚本 $(document).ready(function () { $("#date-input").datepicker( { format: "mm/dd/yyyy", autoclose: true, }); $(".datepicker").on("changeDate", function (e) { const selectedDate = e.date; // Get selected date as JavaScript Date object const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" }; const formattedDate = selectedDate.toLocaleDateString("en-US", options); $("#date-input").datepicker("update", formattedDate); }); }); 但它不会更新输入值。但它在我的 console.log 上显示了正确的输出您向日期选择器提供了 fomat: "mm/dd/yyyy"。如果您想要（日 - 月 #、年），只需按照文档进行更改即可。 https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format. fomat: "DD - MM d, yyyy" 您可以使用toDisplay功能，实现【自定义】您需要的格式。 $(document).ready(function () { $("#date-input").datepicker({ format: { toDisplay: function (date, format, language) { const options = { weekday: "long", month: "long", day: "numeric", year: "numeric" }; return new Date(date).toLocaleDateString("en-US", options).replace(",", " -"); }, toValue: function (date, format, language) { return new Date(date); }, }, autoclose: true, }); }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="date-input">Date</label> <div class="input-group"> <input type="text" class="form-control datepicker" id="date-input" placeholder="Select a date" /> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

javascript html jquery bootstrap-datepicker

回答 2 投票 0

日期选择器不刷新数据

我一直在努力解决一个问题，我正在解决下一个问题：我有 2 个日期选择器：交货日期选择器：我一直在努力解决一个问题，我正在解决下一个问题：我有 2 个日期选择器：交货日期选择器： <div class="input-group date form_datetime times" id="date_entrega"> <input type="text" placeholder="Fecha de entrega" size="16" readonly class="form-control" ng-model="reserva.fechasalida" name="date_fecha_entrega"/> <span class="input-group-btn"> <button class="btn default date-set" type="button"> <i class="fa fa-calendar"></i> </button> </span> </div> 并返回日期选择器： <div class="input-group date form_datetime times" id="date_devolucion"> <input type="text" placeholder="Fecha de devolución" size="16" readonly class="form-control" ng-model="reserva.fechaentrada" name="date_fecha_devolucion" ng-disabled="cobroOFacturaAlquiler"/> <span class="input-group-btn"> <button class="btn default date-set" type="button" ng-disabled="cobroOFacturaAlquiler"> <i class="fa fa-calendar"></i> </button> </span> </div> 然后在 Controller.js 中，我有这个： function getDaysClosedFromLocation(locationId) { LocationDaysService.getPeriodsDaysClosedFromLocation( locationId, function (response) { if (response.success) { $scope.periodDelivery = response.data; $scope.periodReturn = response.data; $("#date_entrega") .datepicker({ language: "es", format: "dd/mm/yyyy", autoclose: true, todayHighlight: true, orientation: "left", beforeShowDay: beforeShowDayDatePickerDelivery, }) .on("changeDate", function (ev) { $scope.configuracionCambioFechaHora("date_entrega"); }); $("#date_devolucion") .datepicker({ language: "es", format: "dd/mm/yyyy", autoclose: true, todayHighlight: true, orientation: "left", beforeShowDay: beforeShowDayDatePickerReturn, }) .on("changeDate", function (ev) { $scope.configuracionCambioFechaHora("date_devolucion"); }); } }, ); } function beforeShowDayDatePickerDelivery(date) { return beforeShowDay(date, $scope.periodDelivery); } function beforeShowDayDatePickerReturn(date) { return beforeShowDay(date, $scope.periodReturn); } function beforeShowDay(date, periods) { let day = date.getDay(); // 0 (Sunday) ... 6 (Saturday) for (let i = 0; i < periods.length; i++) { let period = periods[i]; if (date >= period.start && date <= period.end) { if (period.daysToDisable.includes(day)) { return false; // Disable this specific date } } } return true; // Enable all other dates } 此功能用于阻止日历上的特定日期和时间段，效果非常好。但是，当我更改位置时，#date_devolucion 会立即正确更新，但 #date_entrega 不会。它仅在我切换月份然后返回时更新。没有可见的控制台错误，所以我不认为这是代码中的逻辑错误。最有可能的是 AngularJS 更新问题。我尝试了各种方法，例如在重新创建之前使用销毁功能进行销毁，使用日期选择器的刷新方法，或者确保仅在它们不存在时才创建它们，但这些都不起作用。有谁知道为什么会发生这种情况以及如何解决它？提前致谢！我找到了解决方法： $scope.updateDatePicker = function () { setTimeout(function () { $("#date_entrega").datepicker("update"); $("#date_devolucion").datepicker("update"); }, 0); }; 然后在getDaysClosedFromLocation最后调用它！我不知道这是否是一个好的解决方案，但它解决了我的问题！

javascript jquery angularjs jquery-events bootstrap-datepicker

回答 1 投票 0

在 Angular 17 中，如果我尝试将变量与“未定义”进行比较，则编译时会自动将“未定义”替换为“null”

我使用了Bootstrap DatePicker，它在清空时返回未定义的事件。当在我的 TS 文件中时：我尝试比较事件是否未定义，它永远不会进入该 if 块。因为在我的浏览器中，当我...

angular bootstrap-datepicker angular17

回答 1 投票 0

如何自定义ngxbootstrap daterangepicker？

我正在使用 ngx bootstrap datepicker 我需要显示多个日期范围是日历。当打开日历视图时应该是显示所选多个月份的月份。单击所选...

bootstrap-datepicker ngx-bootstrap angular16

回答 1 投票 0

Bootstrap datepicker 超过 minDate 的年份

我的 boostrap 日期选择器有问题。我将日期选择器设置为 minDate: '-11m' 并且日期选择器仅显示今天之前的 11 个月（在本例中：2023 年 7 月 - 2024 年 6 月），但是日期选择器...

bootstrap-datepicker

回答 1 投票 0

当引导日期选择器显示字母而不是数字时如何修复它？

我尝试在许多论坛中搜索但一无所获。也许我使用了错误的关键字。我用一个按钮来显示日期选择器，我注意到一开始它显示正确，但是大约0之后......

javascript bootstrap-datepicker slim-lang

回答 1 投票 0

为什么bootstrap-datepicker显示时会触发'show.bs.modal'？

我有一个模态，如下图所示，当我选择包含日期选择器的输入字段时，会触发引导模式事件 .on('show.bs.modal') ，这是非常有问题的，因为我

twitter-bootstrap bootstrap-datepicker

回答 4 投票 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

只有年份的日期选择器

我正在尝试在我的 asp.net-mvc 项目中实现一个输入日期选择器，该项目仅显示创建/编辑模型新值的年份。我希望日期和月份始终相同（31/12/年）...

c# asp.net-mvc datetime datepicker bootstrap-datepicker

回答 3 投票 0

将自定义样式应用于 Bootstrap Datepicker 中的活动日期

我目前正在使用 Bootstrap-datepicker 和 Bootstrap 5。我正在尝试修改日期选择器中活动日期的背景颜色。不过，我的自定义造型好像是……

bootstrap-5 bootstrap-datepicker

回答 1 投票 0

Bootstrap 日期选择器默认为今天而不是输入值日期

我正在使用 Bootstrap 4 日期选择器，日历弹出窗口默认为今天的日期，而不是输入字段中设置的日期。我在这个表单中还有多个日期字段，所有字段都使用日期选择器，所以我想...

datepicker bootstrap-datepicker

回答 1 投票 0

如何调整同一行中的两个 React 日期选择器而不改变它们的位置

我是 ReactJS 世界的新手，如何调整日期选择器字段，要求是开始日期和结束日期应在同一行。我能够创建开始日期和结束日期两个字段。当我选择...

reactjs react-native uidatepicker bootstrap-datepicker react-css-modules

回答 5 投票 0

为什么 Angular 日期选择器这么慢？

为什么 Angular JS 日期选择器使用如此多的 CPU？当页面上有几个这样的内容时，它们会显着降低网站速度。有什么办法可以缓解这种情况吗？例如，官方 Angular 的

javascript angularjs datepicker bootstrap-datepicker

回答 2 投票 0

今天默认引导日期选择器

我正在使用这个引导日期选择器作为我的日期选择器。我希望日期选择器选择“今天”作为开始日或默认日。我不知道如何自动设置“今天”，所以我做了一个

javascript html date bootstrap-datepicker

回答 14 投票 0

容器 div 隐藏的引导日期选择器

我有一个生日输入文本，我使用 Bootstrap datepicker v4。表格位于容器内。如图所示，日期选择器日历被“”边框隐藏我有一个生日输入文本，我使用 Bootstrap datepicker v4。表格位于<div class="media">容器内。如图所示，日期选择器日历被“媒体”div 的边框隐藏，我无法用 z-index 解决这个问题，它不起作用。当我对媒体和选项卡内容这两个类使用 overflow: visible 时，字段失去了宽度并且显示布局发生了变化（参见第二张图）。 <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> <div class="tab-wrap"> <div class="media"> <div class="parrent pull-left"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><?= lang('BASIC_INFO'); ?></a></li> <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02"><?= lang('PUBLIC_PROFILE'); ?></a></li> <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><?= lang('INTERESTS'); ?></a></li> <li class=""><a href="#tab4" data-toggle="tab" class="tehnical"><?= lang('FOTOS'); ?></a></li> </ul> </div> <div class="parrent media-body"> <div class="tab-content"> <div class="tab-pane fade active in" id="tab1"> <div class="media"> <div class="media-body"> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' id='bdate' name='bdate' class="form-control" value="<?= $userProfile ? $userProfile['bdate'] : '' ?>"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> 起诉后的结果overflow: visible; 在父容器（例如 overflow: hidden;）上查找 .media，并查看是否可以覆盖它或将其删除（如果已设置）（overflow: visible; 将是覆盖）。我只是猜测，因为我不知道你的完整 CSS 是什么样子，但另一种可能性可能是你尝试应用的 z-index 被覆盖，因为你使用的规则不如 Bootstrap CSS 中的规则具体。检查浏览器开发人员工具中应用的样式，以验证您提供的 z-index 是否优先。你可以试试这个 $('selector').datetimepicker().on('dp.show',function(){ $('.media').css({'overflow':'visible'}); }).on('dp.hide',function(){ $('.media').css({'overflow':'hidden'}); }) 按照@trungbadao的回答，即使日期时间选择器有更新，我们也需要将溢出设置为隐藏，因此他的答案可以这样更新： $('selector').datetimepicker().on('dp.show',function(){ $('.media').css({'overflow':'visible'}); }).on('dp.hide',function(){ $('.media').css({'overflow':'hidden'}); }).on('dp.change',function(){ $('.media').css({'overflow':'hidden'}); }) 经过 4 小时的搜索和尝试，这对我有用，我有一个祖先，它的位置相对溢出 x 隐藏，所以我将其直接父 .date 位置设为静态，并固定了实际的日期时间选择器位置。 .date{ position: static; } .bootstrap-datetimepicker-widget{ position:fixed } $(".date").datetimepicker({ locale: "{{ LANGUAGE_CODE }}-ca", keepOpen: false, format: "YYYY-MM-DD HH:mm", });

css twitter-bootstrap-3 bootstrap-datepicker eonasdan-datetimepicker

回答 4 投票 0

如何在引导日期选择器中自动选择当前日期或选定日期

$('.datepicker').datepicker({ 格式：“年-月-日”，强制解析：假，自动关闭：真，默认日期：'现在'， }); $('.datepicker').datepicker({ 格式：“年-月-日”，强制解析：f...

bootstrap-datepicker

回答 1 投票 0

将 bootstrap-datepicker 与 HTMX 结合使用

我正在尝试将 bootstrap-datepicker 与 HTMX 一起使用。关于日期更改，我想使用日期作为 hx-post 的参数，但我不知道如何处理这个问题。我有一个带有工作靴的 JSFiddle...

post events bootstrap-datepicker htmx

回答 2 投票 0

如何删除显示引导程序上最后使用日期的工具提示？

我用引导程序创建了一个日期选择器。它主要按照我的意愿工作，但每次我单击该字段时，它都会显示我选择的最后几年。这会阻止日历视图，也不会重新...