标签: bootstrap-datepicker

是否有可用的bootstrap日期选择器支持显示多个月？jquery-ui datepicker中有一个选项:numberOfMonths.

我需要这样的东西:http://jqueryui.com/resources/demos/datepicker/multiple-calendars.html

我想按升序对数组进行排序.日期是字符串格式

["09/06/2015", "25/06/2015", "22/06/2015", "25/07/2015", "18/05/2015"] 

甚至需要一个函数来检查这些日期是否是连续的形式:

eg - Valid   - ["09/06/2015", "10/06/2015", "11/06/2015"] 
     Invalid - ["09/06/2015", "25/06/2015", "22/06/2015", "25/07/2015"] 

示例代码:

function sequentialDates(dates){
        var temp_date_array = [];

        $.each(dates, function( index, date ) {
            //var date_flag = Date.parse(date);
            temp_date_array.push(date);
        });

        console.log(temp_date_array);

        var last;
        for (var i = 0, l = temp_date_array.length; i < l; i++) {

          var cur = new Date();
          cur.setTime(temp_date_array[i]);
          last = last || cur;
          //console.log(last+' '+cur);

          if (isNewSequence(cur, last)) {
            console.log("Not Sequence");
          }
        }

        //return dates;
    }

     function …

我有一个Bootstrap模式,您可以在其中选择日期.在后台,填充了隐藏字段,这些字段也随表单一起提交.

问题在于,当您选择datepicker元素时,它会因某些奇怪的原因(但只有Javascript填充的隐藏值)删除隐藏值.

Datepicker JS:

var date = new Date();
date.setDate(date.getDate());

$('#datepicker').datepicker({
    format: "dd/mm/yyyy",
    startDate: date,
    autoclose: true,
});

隐藏字段填充JS:

$(function () {
    $('#appointment').on("show.bs.modal", function (e) {
        $("#request_id").val($(e.relatedTarget).data('request-id'));
    });
});

隐藏的HTML元素:

<input type="hidden" name="request_id" id="request_id" value="">

当模态框最初弹出时,我可以看到隐藏的值字段已填充,但是当我单击datepicker它时,它被删除.为什么是这样？

我正在使用这个bootstrap-datepicker,一切正常,但输入字段不允许手动添加日期,或者至少它对手动输入的输入不起作用.

以下是javascript中的当前选项:

$(function(){
        $('.input-daterange').datepicker({
            endDate: "today",
            todayBtn: true,
            forceParse: false,
            autoclose: true,
            todayHighlight: true
        });        
});

1)第一个问题是当键入日期并按下"输入"键时,日期消失.2)当删除日期并开始键入新日期时,datepicker行为很奇怪.

希望有人能弄清楚如何修复手动输入的日期？

也许在每个输入旁边都有一个日历图标,并且仅从那里触发了日期选择器,这将是一个很好的选择,并且仅为输入而保留文本输入.

这是JSFiddle.

我有一个模态,如下图所示,

当我选择包含日期选择器的输入字段时,引导模态事件.on('show.bs.modal')被触发,这是非常有问题的,因为当合法显示模态时我正在采取各种异步操作.我认为模态已经显示,并且此事件不应该被触发.

我在bootstrap事件'show.bs.modal'上有一个监听器,如下所述,

  handleModalLaunch: () ->
    $(@modalClass).on 'show.bs.modal', (event) =>
      return if event.dates
      promise = new Promise ( (resolve, reject) =>
        @setModalData(event)
        if (@interactionData)
          resolve(@interactionData)
        else
          reject(false)
      )
      promise.then(
        (results) =>
          @trigger 'setRooms', @callBacks
          @trigger 'setStudentInfo', @callBacks
        (err) ->
          err
      )

并且有效地,侦听器再次被触发,随后调用promise和相关的回调,事件的触发是有问题的,因为模式已经显示并且我不希望这些回调/承诺被运行.

我添加了return if event.dates(event.dates作为datepicker事件独有的属性),在日期选择器触发模态显示事件的情况下基本上将此代码短路,但当然,这是hacky,我想更好地理解为什么datepicker本身正在触发show事件.潜在地,因为我的节目甚至听众都与模态的类相关联,显示日期选择器的行为可能继承了父模态的目标,并且可能本身就是模态,即模态(datepicker)被显示并且因为日期选择器从父模态继承,事件触发,好像它是'显示'的父模式.我完全混淆了这个吗？(实际上,我现在看起来更清楚,但仍然需要了解如何修复.)

我使用@ ng-bootstrap/ng-bootstrap和Angular2-cli

与NgbDatepicker遇到了错误:

NgModule:

@NgModule({
  imports: [CommonModule,NgbModule.forRoot()],
  declarations: [TestComponent],
  exports: [TestComponent]
})

零件 -

导出类TestComponent实现OnInit {

model:NgbDateStruct;

}

和html--

<ngb-datepicker #dp [(ngModel)] ="model"> </ ngb-datepicker>

将TestModule添加到另一个模块时

@NgModule({
  imports: [SharedModule,LoginRoutingModule,TestModule],
  declarations: [LoginComponent],
})

和HTML:

<app-test></app-test>

有错误:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. …

我正在使用react-strapnpm包在我的React应用程序中使用Bootstrap 4组件.

当我尝试添加datepicker时 react-bootstrap-date-picker

npm install --save react-bootstrap-date-picker

然后尝试在我的组件中使用它:

var DatePicker = require("react-bootstrap-date-picker");

我收到了错误

./~/react-bootstrap-date-picker/lib/index.js出错

找不到模块:C:\ Users\y\Desktop\Code\test \node_modules\react-bootstrap-date-picker\lib中的'react-bootstrap/lib/Button'

@ ./~/react-bootstrap-date-picker/lib/index.js 15:14-51

这是因为react-bootstrap-date-picker不兼容react-strap吗？在这种情况下,我应该为bootstrap 4组件安装哪些npm软件包,以便datepicker模块可以工作？

当我根据这个答案尝试渲染django-bootstrap-datepicker-plus小部件时,我有些不便.一切正常,但Datepicker没有出现.

我的Django版本是1.10.7,我使用的第三方应用程序是:

• Django Bootstrap 3(pip install django-bootstrap3)
• Django Bootstrap Datepicker Plus(pip install django-bootstrap-datepicker-plus)

这是我的forms.py,我DateInput根据我的需要覆盖类来定制它.

from django import forms
from bootstrap_datepicker.widgets import DatePicker

class DateInput(DatePicker):
    def __init__(self):
        DatePicker.__init__(self,format="%Y-%m-%d")

class UserUpdateForm(forms.ModelForm):
    class Meta:
        widgets = {     
            'date_of_birth': DateInput(),  # datepicker
            'creation_date': DateInput(), # datepicker
        }
        fields = ("other fields", "date_of_birth", "creation_date", "other fields",)
        model = get_user_model()

然后在我的模板表单中,我有一些名为layout.htmlMy template的基本主模板,我user_form.html希望在其中呈现前面提到的表单字段.所有这个模板都有一些div和html结构,你可以在这里看到user_form.html文件.

在我的settings.py的bootstrap设置中,我必须include_jquery …

我正在使用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>

和javascript:

var datePicker = $(".calendar").datepicker({});

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

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

我使用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 /> …