【问题标题】:Bootstrap 3 Datetimepicker auto submitBootstrap 3 Datetimepicker 自动提交
【发布时间】:2015-03-28 11:23:32
【问题描述】:

在通过 bootstrap 3 datetimepicker (Eonasdan) 无需点击按钮选择日期后,我找不到提交表单的方法。我想知道这是否可能。请看一下我的代码。

<div class="container">
    <div class="row">
        <div class='col-md-3'>
            <form action="date.php" method="post" class="form">
                <div class="form-group">
                    <div class='input-group dp1'>
                        <input type='text' class="form-control" name="startdate" id="start" >
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <button class="btn btn-primary">submit</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <p>
                Startdate is <?php echo $startdate; ?>
            </p>
        </div>
    </div>
</div>

这里是JS代码:

<script type="text/javascript">
    $(function () {
        $('.dp1').datetimepicker({
            format: 'DD-MM-YYYY',
            showTodayButton: true
        });

        $("#dp1").on("change.dp", function() {
            $('.form').submit();
        });
    });
</script>

如果有任何帮助或建议,我将不胜感激!

【问题讨论】:

标签: javascript jquery twitter-bootstrap-3 datetimepicker


【解决方案1】:

使用此代码:

$('#input-date')
  .datepicker()   
  .on('changeDate', function(e){    
    $('#formID').submit();
  });

【讨论】:

    【解决方案2】:

    试试

     $("#dp1").on("dp.change", function() {
         $('.form').submit();
      });
    

    由于一个错误,必须恢复当前版本。文档已更新。

    【讨论】:

    • @Eonasdan:我试过你的建议,但它不起作用。它似乎对“dp.change”没有反应。知道为什么吗?
    • 在脚本中,我使用#dp1 引用了日期选择器。相反,它应该引用一个类。所以我把它改成了.dp1。现在它可以工作了,但我现在遇到的问题是,它在单击日期选择器后立即触发。我没有机会选择日期。它立即发送当前日期。如何防止这种行为?
    • 我找到了解决方案:作为一个选项,我添加了“useCurrent:false”。现在它的行为就像我想要的那样。伟大的!所以我的脚本现在如下: $('.dp1').datetimepicker({ format: 'DD-MM-YYYY', showTodayButton: true, useCurrent: false }); $(".dp1").on("dp.change", function() { $('.form').submit(); });
    【解决方案3】:

    答案可以在文档中找到:http://xdsoft.net/jqplugins/datetimepicker/

    使用onChangeDateTime 选项:

    $('#datepicker').datetimepicker({
      onChangeDateTime: function(dp,$input){
        $('#dateform').submit();
      }
    });
    

    【讨论】:

      猜你喜欢
      • 2021-04-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-10
      • 1970-01-01
      • 2017-05-05
      • 2014-04-25
      • 2016-03-13
      相关资源
      最近更新 更多