标签: bootstrap-datepicker

滚动模态时,bootstrap-datepicker不会滚动

我正在使用bootstrap-datepicker,并希望在bootstrap 2的模式上显示日期选择器.我得到的问题是日期选择器在滚动模态时没有相应滚动,它仍然存在.

在此输入图像描述

代码:

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
    <div style="height:300px"></div>
    <div>Choose Date:
        <input class="calendar" />
    </div>
    <div style="height:300px"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

和javascript:

var datePicker = $(".calendar").datepicker({});
Run Code Online (Sandbox Code Playgroud)

jsfiddler:http://jsfiddle.net/csrA5/

滚动模态时是否有任何解决方案使其滚动?

javascript css jquery twitter-bootstrap bootstrap-datepicker

8
推荐指数
1
解决办法
2万
查看次数

Bootstrap Datepicker在chrome中不起作用

我使用Jquery插件Bootstrap Datepicker.它在Firefox中运行良好.此外,它适用于我的网站的一些页面在谷歌浏览器(版本33.0.1750.117米).但是,有一个文本输入(name ="TravelDate"),此插件不起作用.此文本输入位于Bootstrap模式窗口中.

<script>
$(function () {
    $("#date-trip").datepicker({
        format: "dd.mm.yyyy",
        startDate: new Date(),
        todayBtn: "linked",
        language: "ru",
        autoclose: true
    });
});
</script>

<!-- Modal -->
<div class="modal fade" id="createTripModal" tabindex="-1" role="dialog" aria-labelledby="createTripModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Travel creating</h4>
            </div>

            @using (Html.BeginForm("Create", "Trip", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal", role = "form"}))
            {
                @Html.AntiForgeryToken()

                @Html.ValidationSummary(true)
                <div class="modal-body">
                    <label for="date-trip">Date:</label>
                    <input name="TravelDate" type="text" id="date-trip" class="form-control" required autofocus /> …
Run Code Online (Sandbox Code Playgroud)

jquery google-chrome bootstrap-datepicker

8
推荐指数
2
解决办法
2万
查看次数

选择当前日期后,bootstrap-datepicker清空字段

如果我启用了自动关闭,并且我从已选择的日历中选择了该字段,则会清空该字段,然后按预期关闭日期选择器.我怎样才能拥有自动关闭功能,但不能将其清空?

请看演示示例,http://eternicode.github.io/bootstrap-datepicker/?markup = input&format =&weekStart =&startDate =&endDate =&startView = 0&minViewMode = 0&todayBtn = false&language = en&Orientation = auto&multidate =&multidateSeparator =&autoclose = on&keyboardNavigation = ON&forceParse =上#沙箱

  1. 确保autoclose已打开
  2. 选择一个日期.
  3. 再次打开日期选择器,再次选择当前选择的日期.
  4. 字段再次为空

谢谢

javascript jquery datepicker twitter-bootstrap bootstrap-datepicker

8
推荐指数
1
解决办法
1万
查看次数

bootstrap-datepicker全局设置语言

我正在使用bootstrap-datepaginator,里面使用bootstrap-datepicker.Utilizzanto bootstrap-datepicker作为单个组件,设置语言没有问题,但使用bootstrap-datepaginator却不是这样.我能怎么做?

我正在尝试将意大利语设置为整个项目的默认语言.在index.html我把以下脚本:

<script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendors/jquery-ui/ui/i18n/datepicker-it.js"></script>

<script>
    $(function() {
        $( "#datepicker" ).datepicker( $.datepicker.regional[ "it" ] );
    });
</script>
Run Code Online (Sandbox Code Playgroud)

但是在控制台中我得到了以下错误:

Uncaught TypeError: Cannot read property 'regional' of undefined datepicker-it.js:15
Uncaught TypeError: Cannot read property 'regional' of undefined (index):394
Run Code Online (Sandbox Code Playgroud)

我尝试了一切但我疯了!

Bootstrap Datepicker i18n


我用这种方式更改了代码:

<script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendors/bootstrap-datepicker/js/locales/bootstrap-datepicker.it.js"></script>


<script>
    $(function() {
        $.datepicker.setDefaults( $.datepicker.regional["it"] );
    });
</script>
Run Code Online (Sandbox Code Playgroud)

但现在错误如下:

Uncaught TypeError: Cannot read property 'setDefaults' of undefined
Run Code Online (Sandbox Code Playgroud)

有了这个修复:

$('.datepicker').datepicker({
    language: "it"
});
Run Code Online (Sandbox Code Playgroud)

我没有在控制台中出错,但默认情况下语言总是英文

javascript datepicker angularjs bootstrap-datepicker bootstrap-datetimepicker

8
推荐指数
1
解决办法
6万
查看次数

Bootstrap日期范围选择器移动在更改日期时突出显示上一个日期

我用引导日期范围选择器与2个日历,使人们可以选择startend日期.我做的新功能是,一旦用户选择开始日期,我就会关注结束日期,以便日历自动弹出.

小提琴?

我试图设置一个小提琴,但它只是在一个小提琴上工作,但你总是可以测试插件网站,因为它发生在原始插件上.请在此处查看日期范围选择器网站.

问题

在iPhone上,当我选择开始日期时,会自动弹出结束日历,这很棒.但问题是,它挂在我手指上的悬停.因此,如果您查看屏幕截图,我会8th在START日历上选择,当它聚焦到END日历时,它会6th自动悬停,因为我在选择时将手指放在同一区域8th.

怎么解决这个问题?我尝试了所有的ios hover issue固定插件和解决方案,但没有看到解决这个问题.

在此输入图像描述

jquery bootstrap-datepicker

8
推荐指数
1
解决办法
878
查看次数

始终显示bootstrap-datepicker,而不仅仅是焦点

我正在使用bootstrap-datepicker库来创建一个日期选择器,让用户选择日期.我想始终显示选择器,而不仅仅是当用户点击输入字段或按钮时.

我怎样才能做到这一点?

Datepicker的图片

frontend datepicker twitter-bootstrap twitter-bootstrap-3 bootstrap-datepicker

7
推荐指数
1
解决办法
1万
查看次数

以2位数年份输入时,Bootstrap Datepicker默认为1900

我在我的Bootstrap应用程序中的模态窗口中使用了一个日期选择器.我正在使用Stefan Petre的原始Datepicker.我使用鼠标在桌面和移动设备上构建它,它工作正常.

最近我有一个用户请求允许它也可以使用键盘.我删除了readonly属性以允许用户在输入字段中输入日期.日期格式设置为"mm/dd/yyyy".

当我输入像今天这样的日期时,比如这个"12/11/13"那么它将默认为1913.这不是一个大问题,因为我可以训练用户使用4位数,但我宁愿只有它默认为本世纪.

注意:这似乎只发生在4位数年份的日期格式.这似乎也在Stefan代码的新分支中以相同的方式发生.

注意:我使用的是Bootstrap 2.0.4.我正在测试Firefox.

这是它的样子:

在此输入图像描述

datepicker bootstrap-datepicker

7
推荐指数
2
解决办法
8520
查看次数

使用带有角度xeditable的bootstrap-datepicker

我有一个表,我想在该表中添加内联编辑.我开始使用ng-grid,然而,我认为虽然它运行良好,但我花了太多时间来修复样式,以便它与我网站的整体主题相匹配.我开始新鲜,我现在使用一个普通的旧html表与angularjs在幕后为其令人敬畏的双向数据绑定属性.

一切都进展顺利,除了一个事实,即我被困在试图让行内编辑与引导,日期选择器的工作:http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.我使用这个日期选择器而不是xeditable说你应该使用的ui-bootstrap datepicker的原因是因为它在我的网站中看起来或感觉不对.这是ui-bootstrap datepicker的样子http://jsfiddle.net/NfPcH/23/.我喜欢bootstrap datepicker的简单外观.

这是一个带有可编辑和日期字段的表的plunker,可以尝试编辑PLUNKER

使用bootstrap-datepicker作为输入字段工作正常,使用自定义指令正确更新模型:

editablegrid.directive('datepicker', function() {
return {
    restrict : 'A',
    require : 'ngModel',
    link : function(scope, element, attrs, ngModelCtrl) {
        $(function() {
            var dp = $(element).datepicker({
                format : 'MM dd, yyyy'
            });

            dp.on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
                scope.$apply();
            });
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

我更改了可编辑的源代码以使用bootstrap-datepicker(请参阅xeditable.js的第78-84行)

/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableBsdateNew',
      inputTpl: '<input type="text" class="form-control …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive x-editable bootstrap-datepicker angularjs-ng-model

7
推荐指数
1
解决办法
6269
查看次数

检查Bootstrap Datepicker脚本是否已加载

我收到错误:

Uncaught TypeError: undefined is not a function
Run Code Online (Sandbox Code Playgroud)

当我尝试设置datepicker时:

$('.datepicker').datepicker();
Run Code Online (Sandbox Code Playgroud)

如何确定日期选择器是否已加载?

要清楚,我没有使用jQuery UI

html javascript jquery twitter-bootstrap bootstrap-datepicker

7
推荐指数
1
解决办法
3341
查看次数

如何在rails中使用带有form_for的日期选择器?

我是铁道新手,有线索吗?如果你能建议我读什么也会更好.

我将日期选择器插件添加到现有的rails4应用程序中.我在Github上找到了这个插件.我按照说明操作并在我的应用中配置了所有内容.访问http:// localhost:3000/bookings/new看起来很好,但在我填写信息并提交后,出现错误:

ArgumentError in BookingsController#create
First argument in form cannot contain nil or be empty
Run Code Online (Sandbox Code Playgroud)

booking_controller.rb:

def new
    @booking = Booking.new
  end

  def create
    @booking = current_user.bookings.build(booking_params)    # Not the final implementation!
    if @booking.save
      flash[:success] = "You have submited the information successfully!"
      redirect_to root_url
    else
      render 'static_pages/home'
    end
  end
Run Code Online (Sandbox Code Playgroud)

new.html.rb

    <%= form_for (@booking) do |f| %>
    <%= render 'shared/errorbooking_messages' %>
      <%= f.label :date_of_tour %>
      <input data-provide="datepicker">

      <%= f.label :hotel_name %>
      <%= f.text_field :hotel_name, class: 'form-control' …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails bootstrap-datepicker

7
推荐指数
1
解决办法
2万
查看次数