标签: bootstrap-datetimepicker

我在我的xpage应用程序中遇到了bootstrap dateTimePicker控件的问题,我怀疑这与xPages生成控件ID的方式有关.

以下代码在inputText元素上没有id时工作正常.

<script type="text/javascript" src="/fPath/jquery-min.js"></script>
<script type="text/javascript" src="/fPath/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/RfPath/bootstrap-datetimepicker-3.0.0/js/moment.min.js"></script>
<script type="text/javascript" src="/fPath/bootstrap-datetimepicker-3.0.0/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' data-datetimepicker="true">
    <xp:inputText styleClass="form-control timePicker">
        <xp:this.converter>
            <xp:convertDateTime type="time" timeStyle="short" />
        </xp:this.converter>
    </xp:inputText>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div> 

一旦我添加了一个id,我在单击远离/退出控件时收到以下错误:

错误:语法错误,无法识别的表达式:unsupported pseudo:_id1

id是需要将数据映射回文档但我实际上并没有使用它来附加datetimepicker - 我正在使用一个类:

$('.timePicker').each(function(i,el){SHARED.timePickerOpen(el)}) 

SHARED = {
    timePickerOpen: function(el){
        $(el).datetimepicker({
            pickDate: false,
            pickTime: true,
            useCurrent: true,
            minuteStepping:5  
        });
    }
}

更新#1:

听起来有点误会,所以我会试着进一步解释......

• 在测试中,我用纯html编写代码,给字段一个ID,它工作正常.
• 如果我使用xpage字段(domino使用冒号生成ID),日期选择器将失败,并显示上述错误.
• 我不使用ID将事件绑定到字段,我使用类获取字段然后将datetimepicker控件绑定到它.

问题似乎是使用字段ID的datetimepicker.即使我通过类名(不是id)获取字段,datetimepicker代码似乎想要在字段中找到一个id.datetimepicker绑定到该字段没有任何问题.当您尝试选择模型框显示的时间并允许您选择时间时,当您尝试单击该字段以关闭模型时间控件时会发生错误.

如何在bootstrap 3 datetimepicker中设置格式.我想要格式"dd/MM/yyyy hh:mm",我不想要"AM"和"PM".对于我可以在这里使用的语言.以下小提琴我该怎么做？

http://jsfiddle.net/Eonasdan/0Ltv25o8/

$('#datetimepicker1').datetimepicker({
 
    format : "dd/MM/yyyy hh:mm",
    
});

<!-- padding for jsfiddle -->
<div class="row">
    <div class="col-md-12">
        

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

我使用bootstrap-timepicker.js使用bootstrap时间选择器,我想限制该timepicker的最小时间和最大时间.任何人都可以告诉我如何实现它.我使用了以下方法,但没有什么可以帮助我:

 $('input[data-role="time"]').timepicker({
    showMeridian: true,
    minTime: {
    hour: 10,
    minute: 15
    },
    minuteStep: 1,
    showInputs: true,
    defaultTime: defaulttime
    }) 

和

$('input[data-role="time"]').timepicker({
        showMeridian: true,
        minTime: '10:15',
        minuteStep: 1,
        showInputs: true,
        defaultTime: defaulttime
        })

我想禁用引导日期时间选择器选择某些小时，因为我只选择从8:00 am到19:00 pm的时间。

我对此一无所获。你能帮助我吗？

我正在努力转换表格以利用VueJS.该表单包含使用eonasdan/bootstrap-datetimepicker(http://eonasdan.github.io/bootstrap-datetimepicker/)的出生日期输入.

问题是,当我dob使用DateTimePicker 更改输入的值时,VueJS不会绑定到此.它只有在用户直接输入输入时才有效,这正是我想要避免的(正确格式化日期).

输入本身并不特别:

<div class="input-group date">
    <input id="dob" 
        v-model="newCamper.dob" 
        placeholder="MM-DD-YYYY" 
        class="form-control" 
        name="dob" type="text">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

UPDATE

我也尝试过使用digitalbrush Masked Input Plugin,结果相同.似乎Vue无法识别除输入中的简单输入之外的任何内容.然而,这有效 - 尽管它有点笨重:

$(document).ready(function () {
    var dob = $("#dob");
    dob.mask("99/99/9999",{placeholder:"MM/DD/YYYY"});
    dob.change(function() 
       var value = $(this).val();
       vm.$data.newCamper.dob = value;
    })
});

我正在使用引导日期时间选择器,当我们点击日历图标时,当前的检测是在我的相关输入上获取的.

这有什么办法可以避免这种情况吗？因为我不希望默认情况下获取当前日期输入,它应该只是用户选择的值.

基本上日历应该打开,但我的输入不需要任何默认值.

Rfer:http://jsfiddle.net/m2fjw57b/45/

HTML:
<div class="input-group date" id='date'>
   <input type='text' class="form-control" />
      <span class="input-group-addon">
      <span class="fa fa-calendar"></span>
   </span>
</div>

JS:
 $(document).ready(function () {
     $('#date').datetimepicker({
         //defaultDate: new Date()
         //date-disabled="now"
         //default: false
     });
 });

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

$(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
    });
});

从datetimepicker框中选择datetime后,我无法获取日期对象.如何获取datetime对象并将其转换为unix整数？

这是我的HTML代码:

<div class="form-group" align="center">
<div class='input-group date' id="startDate">
    <input type='text' class="form-control" name="org_startDate" placeholder="Wo" data-format="yyyy-MM-dd hh:mm:ss"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

这是我的css:

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

在这里我的js:

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

jQuery(function () {
    jQuery('#startDate').datetimepicker({
        locale: 'de',
        format: 'dd, DD.MM.YYYY, HH:mm',
        minDate: moment(),
    });
});


// WHAT CODE DO I NEED HERE TO GET DATE OBJECT AND TRANSFORM IT INTO UNIX INTEGER
var dateStr = $("#startDate").find("input").val();
var date = Date.parse(dateStr);

alert(date + " " + new Date(date));

我正在使用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()功能，但是我不确定如何在此处应用。

因为我更新到angular7,我收到错误？

的package.json

"dependencies": {
            "@angular/animations": "^7.0.3",
            "@angular/common": "^7.0.3",
            "@angular/compiler": "^7.0.3",
            "@angular/core": "^7.0.3",
            "@angular/forms": "^7.0.3",
            "@angular/http": "^7.0.3",
            "@angular/platform-browser": "^7.0.3",
            "@angular/platform-browser-dynamic": "^7.0.3",
            "@angular/platform-server": "^7.0.3",
            "@angular/router": "^7.0.3",
            "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
            "@types/lodash": "^4.14.116",
            "bootstrap": "^4.1.3",
            "core-js": "^2.5.7",
            "font-awesome": "^4.7.0",
            "hammerjs": "^2.0.8",
            "ng-connection-service": "^1.0.4",
            "ngx-perfect-scrollbar": "^6.3.1",
            "ngx-toastr": "^9.1.0",
            "ngx-ui-switch": "^1.6.0",
            "rxjs": "^6.3.3",
            "rxjs-compat": "^6.3.3",
            "web-animations-js": "2.3.1",
            "zone.js": "^0.8.26"
        },
        "devDependencies": {
            "@angular-devkit/build-angular": "^0.10.5",
            "@angular/cdk": "^6.4.7",
            "@angular/cli": "^7.0.5",
            "@angular/compiler-cli": "^7.0.3",
            "@angular/language-service": "^7.0.3",
            "@angular/material": "^6.4.7",
            "@types/jasmine": "^2.8.11",
            "@types/jasminewd2": "~2.0.2",
            "@types/node": "^10.12.6",
            "codelyzer": "^4.5.0",
            "jasmine-core": "^3.3.0",
            "jasmine-spec-reporter": "^4.2.1",
            "karma": …