将自定义文本添加到 bootstrap datetimepicker 中的输出文本字段 [英] Add custom text to the output text field in bootstrap datetimepicker

问题描述

我在这里使用 bootstrap 3 日期/时间选择器:

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

是否可以自定义日期/时间文本字段中的输出文本?我希望在开头添加一个字符串，例如 'Departure:'.

我目前的设置很简单，javascript很简单:

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true });$('#datetimepicker').data("DateTimePicker").format('DD/MM/YYYY HH:mm:ss');

HTML 是:

<div class='input-group date' id='datetimepicker'><input type='text' class="form-control" readonly='readonly'/><span class="input-group-addon" style="padding: 6px 11.5px;"><span class="glyphicon glyphicon-calendar"></span></span>

这将按照代码中给出的格式显示日期和时间.如何将字符串 Departing: 添加到文本字段的开头?

解决方案

你必须在你的 format 选项，因为组件使用时刻标记.

Moment 文档有一个转义字符部分其中指出:

<块引用>

要对格式字符串中的字符进行转义，可以将字符括在方括号中.

moment().format('[今天] dddd');//'今天星期天'

这是一个工作示例:

$('#datetimepicker').datetimepicker({默认日期:'现在'，忽略只读:真，格式:'[出发:] DD/MM/YYYY HH:mm:ss'});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="样式表"/><link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script><div class="form-group" style = "margin-bottom:4px;"><div class='input-group date' id='datetimepicker'><input type='text' class="form-control" readonly='readonly'/><span class="input-group-addon" style="padding: 6px 11.5px;"><span class="glyphicon glyphicon-calendar"></span></span>

I'm using bootstrap 3 date/time picker here:

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

Is it possible to customise the output text in the date/time text field? I wish to add a string at the start, such as 'Departure:'.

My current set up is very simple, the javascript is simply:

$('#datetimepicker').datetimepicker({defaultDate:'now',ignoreReadonly: true });
$('#datetimepicker').data("DateTimePicker").format('DD/MM/YYYY HH:mm:ss');

The HTML is:

<div class="form-group" style = "margin-bottom:4px;">
    <div class='input-group date' id='datetimepicker'>
        <input type='text' class="form-control" readonly='readonly'/>
        <span class="input-group-addon" style="padding: 6px 11.5px;">
        <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

This will display the date and time as per the formatting given in the code. How can I add the string Departing: to the beginning of the text field?

解决方案

You have to use square brackets in your format option, because the component uses moment tokens.

Moment docs has an Escaping characters section which states:

To escape characters in format strings, you can wrap the characters in square brackets.

moment().format('[today] dddd'); // 'today Sunday'

Here is a working sample:

$('#datetimepicker').datetimepicker({
  defaultDate:'now',
  ignoreReadonly: true,
  format: '[Departing:] DD/MM/YYYY HH:mm:ss'
});

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group" style = "margin-bottom:4px;">
    <div class='input-group date' id='datetimepicker'>
        <input type='text' class="form-control" readonly='readonly'/>
        <span class="input-group-addon" style="padding: 6px 11.5px;">
        <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

这篇关于将自定义文本添加到 bootstrap datetimepicker 中的输出文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！