如何使Bootstrap Datepicker返回天数而不是日期?

时间:2014-10-28 15:29:11

标签: javascript jquery momentjs bootstrap-datepicker

搜索了所有搜索到我的问题的答案之后,我决定发布一个新问题:我的问题是我想要而不是让Bootstrap Datepicker返回一个日期,我希望它返回从今天到所选日期之间的天数。

我的代码是:

$('#datepicker').datepicker({
            language: 'fr',
            startDate: new Date(),
            autoclose: true
        }).on('changeDate', function(e) {
            var start = moment(e.date);
            var end   = moment(new Date());
            var diff = start.diff(end, 'days'); // returns correct number
            $(this).val(diff); // doesn't seem to have any effect
        });

即使我使用return diff#datepicker也会在我想要两个日期之间的天数时始终显示所选日期。

非常感谢。

1 个答案:

答案 0 :(得分:1)

使用2个输入和一个图标,使用点击图标,并在另一个输入中设置值,而不是用于datepicker的值

<input id="diffInput"  />
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input id="DONTUSEME" type='text' class="form-control" style="display:none"/>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({
                    language: 'fr',
                    startDate: new Date(),
                    autoclose: true
                }).on('changeDate', function(e) {
                    var start = moment(e.date);
                    var end   = moment(new Date());
                    var diff = start.diff(end, 'days'); // returns correct number
                    $('#diffInput').val(diff); // doesn't seem to have any effect
                });
            });
        </script>
    </div>
</div>

你必须与css一起工作才能让它们保持在一起。