标签: bootstrap-datetimepicker

Bootstrap-datetimepicker不能与jQuery 3.1.1一起使用.我需要使用相同的jQuery库来运行所有其他依赖函数.

我尝试这样做,禁用所有日期并启用我通过参数传递的日期

这段代码不起作用

$.ajax({
    method: "GET",
    url: "url",
})
.success(function(msg) {
    console.log(JSON.parse(msg));
    var disableIni = JSON.parse(msg);

    var disable = [];

    for (var i = 0; i < disableIni.length; i++)
    {
        disable[i] = moment(disableIni[i][0] + "/" + disableIni[i][1] + "/" + disableIni[i][2], "M/DD/YYYY");
        if (i > 5)
        {
            break;
        }
    }

    console.log(disable);

    var vectorTest = [moment("5/25/2017", "M/DD/YYYY"), moment("5/26/2017", "M/DD/YYYY"), moment("5/27/2017", "M/DD/YYYY")];

    console.log(vectorTest);

    var vector = disable;
    console.log(vector);

    $('#input_from').datetimepicker({
        locale: 'es',
        format: 'DD-MM-YYYY',
        enabledDates: $.each(vector, function(i, value) {
            return value;
        })
    });
}); …

我正在使用bootstrap日期时间选择器进行输入.

我定义了以下html div

<div class="form-group">
    <label for="movingDate">Moving Date</label>
    <div class="input-group date ui-datepicker">
        <input type="text" id="prefMovingDate" name="movingDateTime" class="form-control" data-required="true">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
</div>

这个javascript启用bootstrap日期时间选择器

    $('#prefMovingDate').datetimepicker({
        format : 'd-M-yyyy H:ii P',
        autoclose : true,
    });

输出如下

现在,当我点击文本框时,我看到了这一点

这很好,但我想要的是,即使点击了小日历图标,也会出现日期选择弹出窗口.我尝试了各种方法,但我无法理解它.任何有关这方面的帮助将不胜感激.

我正在使用bootstrap日期时间选择器.它的工作正常,有日期和时间选择.但问题是能见度.如果我把它放在任何类型的容器外面,模态是可见的.但是如果我试着将它作为一个td放在一个表中,那么模态是不可见的.我创建了一个说明相同的jsfiddle.

我已经浏览了上面提到的网站的css文件,并尝试设置大小,z-index等.但没有任何作用.

请帮我设置z-index或其他解决方案以提高可见性.

    <div class="panel panel-info" style="margin-top: 1%">
                <div class="panel-heading" id="JnName">Date Picker</div>
                <div class="panel-body">
                    <form name="form3" role="form">
                        <div class="table-responsive" style="size:auto; max-width: 100%;">
                            <table class="table table-bordered table-striped" id="System Analysis">
                                <tbody>
                                    <tr>
                                        <td width="50%">
                                            <div class="row-fluid">
                                                    <div class="col-xs-4">
                                                        <div class="box">From Date:</div>
                                                    </div>
                                                    <div class='col-sm-8'>
                                                        <div class="form-group">
                                                            <div class='input-group date' id='rptDateFrom'>
                                                                <input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false"  value=''  />
                                                                <span class="input-group-addon">
                                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <script type="text/javascript">
                                                            $(function () {
                                                                $('#rptDateFrom').datetimepicker({
                                                                    //viewMode: 'months',
                                                                    format: 'DD/MM/YYYY',
                                                                     widgetPositioning: …

我正在使用bootstrap 3硅藻土选择器小部件,但我无法控制它的位置.现在,当我不使用水平和垂直选项时,小部件显示在我的页面底部,但是当我使用水平和垂直选项时,我得到一个错误,说水平不是有效选项.

这些选项对我不起作用:

水平:'右',
垂直:'顶'

这是我的代码:

enter code here
<input type="text" value="<fmt:formatDate value="${visitDetail.visitDate }" pattern="dd-MM-yyyy hh:mm aaa" />" name="patient.visitDetails[${status.index}].visitDate" class="form-control" id="visitDate${status.index}" placeholder="visitDate${status.index}"> 


<script type="text/javascript">
    $(function () {
        $("#visitDate${status.index}").datetimepicker({
            showTodayButton: true,
            inline: false,
            format: "DD-MM-YYYY hh:mm A",
            sideBySide: true,
            horizontal: 'right',
            vertical: 'top'
        });
    });
</script>

我试着改变Bootstrap Datetimepicker的方向,我甚至试过这个,但我得到:

option orientation is not recognized

我在html中对datetimepicker的定义是:

<div class='input-group date datepicker' name="datepicker">
    <input type='text' class="form-control placementT" id="fecha">
         <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar">
               </span>
         </span>
</div>

在javascript中我有这样的东西来改变语言:

$('.input-group.date').datetimepicker({
            locale: "es",
        });

我尝试添加location:'bottom auto'但没有任何反应.

我们正在使用Eonasdan Datetime选择器.我们迁移到Boostrap 4 Alpha 6,因为它比Alpha5有很多改进但是日期时间选择器坏了.现在,当我们点击日期时间选择器中的日历图标时,它没有显示数字.但它正在使用alpha 5.我正在寻找一种可能的方法来解决这个问题.

// Code goes here

$(function () {
  $('#datetimepicker1').datetimepicker();
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Bootstrap date time picker</title>
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    
    <div class="container" style="margin:50px;">
      <h4>Bootstrap Datetime Picker</h4>
      <div class="row">
          <div class='col-sm-6'>
              <div class="form-group">
                  <div class='input-group date' id='datetimepicker1'>
                      <input type='text' class="form-control" />
                      <span class="input-group-addon">
                          <span class="fa fa-calendar"></span>
                      </span>
                  </div>
              </div>
          </div>
      </div>
    </div>
         
    
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> …

我想将bootstrap-datetimepicker与bootstrap 4 一起使用，但存在一些问题。

为此，我更改了以下内容：

1. pull-right 至 float-right
2. table-condensed 至 table-sm
3. glyphicons 至 fontawesome

但它没有用:(

演示版

有人可以帮助我将该项目转换为新的引导程序版本吗？

我尝试使用 CreateView 通过 UI 创建模型事件的对象 我的模型是

class Event(models.Model):
    start = models.DateTimeField(_("start"), db_index=True)
    end = models.DateTimeField(_("end"), db_index=True, help_text=_("The end time must be later than the start time."))
    title = models.CharField(_("title"), max_length=255)
    description = models.TextField(_("description"), blank=True)
    rule = models.ForeignKey(Rule)
    calendar = models.ForeignKey(Calendar)

我的模型表单是

class EventForm(forms.ModelForm):
    class Meta:
        model=Event
        fields=['start','end','title','description','rule','calendar',]

我的网址是

url(r'^addEvent/$', CreateEventView.as_view(), name='add-event'),

查看是

class CreateEventView(CreateView):
    form_class=EventForm
    template_name="createEventForm.html"
    success_url='/eventListView/'

我尝试在以下 HTML 模板中自动呈现此内容

{% extends "base.html" %}
{% load i18n %}
{% block body %}
    <form method='POST'>{% csrf_token %}
        {{form.as_p}}
    <button type="submit">Save</button>
    </form> …

我对 JS 很陌生，并尝试将 datetimepicker 添加到我的网络演示中。该教程适用于 bootstrap 3.3.7，但当我将其更改为版本 5 时，日历不再显示。

最小工作 html 如下

<!-- this works OK -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this does not! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control"/>
  <span class="input-group-addon\">  
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<script>
  $(".date").datetimepicker({locale: "ru"});
</script>

我bootstrap@5.1.3在项目中使用并且不想因为一个日期时间选择器而更改它。我已经尝试了很多变体，但没有一个有效。我怎样才能让它发挥作用？

正如/sf/answers/4807838661/所述，https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js适用于 Bootstrap 3，而不是 Bootstrap 5。

我应该使用什么版本？（我怎么知道这一点？）

另请注意，我需要{locale: "ru"}参数，据我所知，该参数在 bootsrap 3 中不可用。