标签: bootstrap-datetimepicker

我希望默认情况下将选择器设置为未来一个月.这很好用:

<script type="text/javascript">
  $(function () {
    $('#enddatepicker').datetimepicker({
      defaultDate: moment().add(1, 'M').toDate(),
      locale: 'de',
      format: 'DD.MM.YYYY'
    });
  });
</script>

但是,我也希望日期不会在明天之前.所以我尝试添加一个minDate选项:

<script type="text/javascript">
  $(function () {
    $('#enddatepicker').datetimepicker({
      minDate: moment().add(1, 'd').toDate(),
      defaultDate: moment().add(1, 'M').toDate(),
      locale: 'de',
      format: 'DD.MM.YYYY'
    });
  });
</script>

但是,现在默认日期设置为minDate(即明天).我可以独立于最短日期设置默认日期吗？

我正在使用来自https://eonasdan.github.io/bootstrap-datetimepicker/的 Datetimepicker 作为我的项目.

我想要达到的目标是结束时不应该比开始更早地选择时间.

$('#timePickerStart').datetimepicker({
    format : 'LT'
});
$('#timePickerEnd').datetimepicker({
    format : 'LT'
});

datetimepicker有一个类似日期的函数,但我不知道如何及时实现它.

谢谢.

我正在使用Bootstrap 的datetimepicker,它工作得很好.问题在于它是用英语写的,我用西班牙语需要它,我读了一些帖子,但没有什么对我有用.我的HTML定义为:

<div class="form-group">
  <div class='input-group date datepicker' data-date-startdate="{{$student->middle}}" name="datepicker" >
    <input type='text' class="form-control placementT" id="fecha">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

在javascript中,我只有一个与datetimepicker相关的函数,这是:

$('.input-group.date').each(function() {
  $(this).datetimepicker().on('dp.hide',function (ev) {
    //something
  });
});

那么,我应该添加什么才能将其更改为西班牙语？我已经读过这是使用locale.js但是我可以在我的javascript中添加日期和月份的定义吗？

当用户多次单击视图标题时，预期行为是：天 -> 月 -> 年 -> 几十年。我需要禁用几十年视图（附有屏幕截图）。这样做用户无法进一步进入“年”视图模式。

我正在使用Bootstrap datetimepicker https://eonasdan.github.io/bootstrap-datetimepicker/

正如文档中提到的,我成功地使用下面的代码更改了向上和向下箭头.

$('#datetimepicker7').datetimepicker({
    sideBySide: true,
    icons: {
        up: "fa fa-chevron-circle-up",
        down: "fa fa-chevron-circle-down",
    }
});

我可以知道如何更改日历的左右图标吗？为了便于理解,我在下图中突出显示了要更改的图标.

任何帮助将受到高度赞赏.

我尝试使用 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 中不可用。

我尝试过这个方法和其他方法，但仍然不起作用。

$(function () {
    $('#datetimepicker').datetimepicker({
        format: 'HH:mm',
        disabledTimeIntervals: [[moment({ h: 0 }), moment({ h: 6 })], [moment({ h: 17, m: 30 }), moment({ h: 24 })]],
        enabledHours: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
        minuteStepping: 15
    });
});

我正在使用Bootstrap datatimepicker（https://eonasdan.github.io/bootstrap-datetimepicker/）。很棒，但是它不会显示或让用户选择秒。

$(document).ready(function () {
    $('#datetimepicker1').datetimepicker({defaultDate: new Date()});
});


<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>

那么，如何选择秒呢？以及如何使秒数以格式显示？目前是05/18/2017 1:26 PM，我要05/18/2017 1:26:40 PM

在开发指南中，有一个fillSeconds()功能，但是我不确定如何在此处应用。

我正在使用带有表单的SweetAlert2对话框.我想使用Bootstrap DateTimePicker小部件.

日历小部件弹出窗口显示在SweetAlert窗口中,而不是在其顶部.这使警报扩展和收缩 - 您必须在警报内滚动才能看到日历.所需的行为是日历显示为主页面的子项并显示在警报的顶部.

https://jsfiddle.net/ghr2bwoc/13/

  swal({
    title: 'Date picker',
    html: '<input id="datepicker">',
    showConfirmButton: false,
    onOpen: function() {
        $('#datepicker').datetimepicker({});
    },

  }).then(function(result) {

  });