Question

我有多个boostrap datetime picker 3实例。我需要为每个输入一个mysql数据库插入链接字段。我只能将其中一个实例更改为正确的格式。这是我在的地方。

<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
    Date 1
      <input size="16" type="text" value="" readonly>
    <br>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Link1       
<input type="text" id="mirror_field1" value="" readonly />
<br>
Date 2  

<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<br>
Link2
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="text" id="mirror_field2" value="" readonly />

<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "mirror_field1",
linkFormat: "yyyy-mm-dd hh:ii",
linkField: "mirror_field2",
linkFormat: "yyyy-mm-dd hh:ii"
});

</script>

Answer 1

我用来创建具有不同id的多个datepicker

$( "#datepickerA" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});

$( "#datepickerB" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});

$( "#datepickerC" ).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});

然后将它们中的每一个添加到我的输入字段

<input name="date1" type="text" id="datepickerA" placeholder="date1"/>
<input name="date2" type="text" id="datepickerB" placeholder="date2"/>
<input name="date3" type="text" id="datepickerC" placeholder="date3"/>

Answer 2

这很有用。不确定为什么它没有正确格式化输出，但不需要添加链接字段。它是默认的。只需创建一个单独的表单并输入id。

<div class="container">
    <form id="form1" action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-4" data-date="1979-09-16T05:25:07Z" data-date-format="DD - MM dd, yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly >
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="text" id="dtp_input1" value="" /><br/>
            </div>
            <div class="form-group"><br/>
            </div>
</fieldset>
    </form>
</div>
<div class="container">
        <form id="form2" action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-4" data-date="1979-09-16T05:25:07Z" data-date-format="DD - MM dd, yyyy - HH:ii p" data-link-field="dtp_input2">
                    <input class="form-control" size="16" type="text" value="" readonly >
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="text" id="dtp_input2" value="" /><br/>
            </div>
            <div class="form-group"><br/>
            </div>
</fieldset>
    </form>
</div>


<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        language:  'en',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        minuteStep: 1,
        todayHighlight: true,
        startDate: new Date()

    });


</script>

bootstrap datetimepicker 3多实例格式不起作用

2 个答案: