标签: eonasdan-datetimepicker

无法在bootstrap datetimepicker中禁用过去的日期

HTML

<br/>
<div class="row">
    <div class="col-md-12">
         <h6>Datetimepicker</h6>

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

    </div>
</div>

JavaScript的

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

我也用过startDateatrribute.But没用.

在这里小提琴

我在MVC 5项目中使用Bootstrap 3 Datetimepicker 3.0.0 https://www.nuget.org/packages/Bootstrap.v3.Datetimepicker/的原因很少.

知道如何抵消周开始,所以它从星期一开始.语言标记也不起作用.

 $(function () {
    $('#PickupTime').datetimepicker({
     weekStart: 1
    });
 });

这不起作用,因为它不是相同的bootstrap-datapicker.js

我正在使用这个日期时间选择器用于Bootstrap 4 https://tempusdominus.github.io/bootstrap-4/

如果输入在加载时为空,则插件可以正常工作.但是,我有一个已经有值的编辑表单,但是datepicker正在删除页面加载时的值.

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
               <input class="form-control datetimepicker-input" data-target="#Entry_EntryDate" data-toggle="datetimepicker" data-val="true" data-val-date="The field Event Date must be a date." data-val-required="The Event Date field is required." id="Entry_EntryDate"  type="datetime" value="2017-10-25 10:17 AM" />
            </div>
        </div>
    </div>
</div>

和默认的js

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

这是JsFiddle

我推荐了jsfiddle,所以我确信我拥有所有正确的依赖关系.

我尝试更改区域设置,更改格式但没有运气.

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

这段代码不起作用

$.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 datepicker的帮助

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker3'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        </script>
    </div>
</div>

该代码有效,但它显示日期而不是时间.

我在这里使用Bootstrap Datepicker ,一切正常.但是,我想根据用户的首选语言本地化日历.我在初始化datepicker时设置了以下内容:

locale: 'fr'

但是,我收到一个控制台错误,内容如下:

未捕获的TypeError:locale()语言环境fr未从时刻区域设置加载!

我在项目中包含了MomentJS:

<script src="/vendors/moment/min/moment.min.js"></script>

这是我的第一个实现,所以我觉得我错过了一些简单但却无法解决的问题.

我有一个生日输入文本,我使用Bootstrap datepicker v4.

表格在<div class="media">容器内.如图所示,datepicker日历被"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 …

我正在使用Bootstrap 3 Datepicker插件.当用户选择日期时,我想更新UI的各个部分.我基本上试图创建一个在日期更改时调用的函数.但是,我的尝试都没有成功.目前,我正在尝试以下方面

$('#myDatePicker').datetimepicker({
  change: function() {
    alert('date has changed!');
  }                  
});

不幸的是,这个change功能永远不会激发.如何在日期选择器中更改日期时调用函数？

我正在尝试利用tempusdominus-datetimepicker-3在我的html表单中创建一个日期时间选择器.

但是,我需要能够从中获取所选日期.该插件有一个名为date的选项,根据该文档应该返回一个时刻对象或null.以下是该文档对此选项的说明

返回组件的模型当前日期,moment对象或未null设置

但是,我正在努力访问该date选项.

也来自doc

注意所有选项都可通过data属性访问,例如 $('#datetimepicker').datetimepicker(OPTION, ARGUMENT)

所以我尝试了以下访问日期选项.

from = $('#datetimepicker').datetimepicker('date');
from = $('#datetimepicker').datetimepicker('data', 'date');
from = $('#datetimepicker').datetimepicker('data').date;
from = $('#datetimepicker').datetimepicker(function(e){
    return e.date;
});

但是以上都没有返回对象.如何访问日期对象？

我认为一个不错的插件,这样一个将有更多的选择可读性像getDate(),setDate(date),getFomat()和setFormat(...)等; 或事件的例子,这应该消除像这样的问题,但不幸的是它没有.

使用bootstrap-datetimepicker v.4.17.47 时,我有一个奇怪的行为.这是我的选择器配置:

format: 'YYYY-MM-DD HH:mm',
showTodayButton: true,
useCurrent: false,
showClear: true,
minDate: moment('{{ ts_beg }}'),
maxDate: moment('{{ ts_end }}')

当设置的minDate和的maxDate的同一天,但不同的时间,比方说2018-2-1 00:00和2018-2-1 02:00,我无法选择日期和时间:

有没有人有解决这个问题的解决方法？