标签: bootstrap-datetimepicker

我正在使用Bootstrap 3 DateTimePicker ,我正在尝试示例8(Linked datetimepicker).

使用Javascript

$('#dpStart').datetimepicker({
     pickDate: true,                 //en/disables the date picker
     pickTime: false,
     format: "DD-MM-YYYY",
     useMinutes: false,               //en/disables the minutes picker
     useSeconds: false
});

$('#dpEnd').datetimepicker({
     pickDate: true,                 //en/disables the date picker
     pickTime: false,
     format: "DD-MM-YYYY",
     useMinutes: false,               //en/disables the minutes picker
     useSeconds: false
});

$("#dpStart").on("dp.change", function(e) {
     alert('hey');
     $('#dpEnd').data("DateTimePicker").setMinDate(e.date);
});

$("#dpEnd").on("dp.change", function(e) {
     $('#dpStart').data("DateTimePicker").setMaxDate(e.date);
});

HTML

<div class="row">
  <div class="col-md-6 col-sm-6 form-group">
    <label for="txtStartDate">
      Start Date-Time</label>
    <div class="input-group date" id="dpStart" data-date-format="DD-MM-YYYY">
      <asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control"></asp:TextBox>
      <span class="input-group-addon"><span …

我在我的项目中使用Jonathan Peterson的bootstrap-datetimepicker插件.

我遇到了更改事件的问题:

如果我定义这样的事件:

$('#Release').on('dp.change', function(e){ console.log(e.date()); })

我收到错误:

未捕获的TypeError:e.date不是函数

任何人都知道如何获得更改事件的新日期值？

我正在使用Bootstrap DateTime Picker(http://eonasdan.github.io/bootstrap-datetimepicker/),我找到了设置minDate的基本选项; 但是,我无法让它在今天拯救我的生命.我尝试过像Date()这样的东西; 但是,没有任何工作.有人有主意吗？

例

    $('#date').datetimepicker({
        pickTime: false,
        icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            },
        startDate: new Date()
    });

我在角度2中使用bootstrap datetimepicker

https://eonasdan.github.io/bootstrap-datetimepicker/

在我的模板中,我有:

<div class='input-group date datepicker'>
         <input type='text' class="form-control" [(ngModel)]="date">
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar" (click)="getCalendar()"></span>
       </span>
   {{date}}
</div>

问题是当我通过点击选择日历上的日期时,它不会触发任何"更改"事件(换句话说,ngModel不会触发).如果我在文本框中输入,则{{date}}显示值加上我键入的文本.

如果用户单击选择器中的日期进行更改,如何检测文本框中的更改？

我一直在尝试使用bootstrap datetimepicker并在我的脚本上拥有所有组件,如Moment JS,bootstrap-date-time js和bootstrap js,但我得到的g.size()不是函数错误.我正在尝试运行以下功能

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

我想在bootstrap中使用datetimepicker,所以我按照本站点中的手动安装指南http://eonasdan.github.io/bootstrap-datetimepicker/ 但我遇到以下错误:未捕获错误:datetimepicker组件应放在相对位置容器.

怎么解决？

<div class="control-group form-horizontal ">
  <label class="control-label">Date</label>
  <div class="controls">
    <input name="datetime" id="datetimepicker4" type="text" class="span4" value="<?php echo $datetime; ?>">
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $('#datetimepicker4').datetimepicker();
  });
</script>

感谢您的回复......

我一直在看这个2天,并且无法弄清楚我做错了什么.

这是我的项目的小提琴.http://jsfiddle.net/dagger2002/RR4hw/

这是HTML

    <div class="container">
    <div class="col-sm-6" style="height:75px;">
        <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

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

这是Jquery.

jQuery(function () {
    jQuery('#startDate').datetimepicker();
    jQuery('#endDate').datetimepicker();
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

我没有错误,当我通过小提琴运行它说没有发现错误.我是jQuery的新手,所以我不确定我做错了什么.

哦耶.我正在使用长名称来进入一个也使用moo工具的joomla网站.

提前致谢.

UPDATE

<!doctype html>

<html lang="en-gb"> …

我正在使用这个日期时间选择器用于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,所以我确信我拥有所有正确的依赖关系.

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

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;
        })
    });
}); …