Bootstrap 3 Datetimepicker auto submit

Question

I just can't find a way to submit a form after selecting a date via bootstrap 3 datetimepicker (Eonasdan) without having to click a button. I wonder if it is possible. Please, have a look at my code.

<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>

And here is the JS code:

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

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

I would appreciate any help or suggestion!

That could be the solution: [bootstrap 3 datepicker (eonasdan version) provides a datetime object with getDate(). not a string](http://stackoverflow.com/questions/24852006/bootstrap-3-datepicker-eonasdan-version-provides-a-datetime-object-with-getdat) — mins, Mar 28 '15 at 11:48

score 1 · Answer 1 · answered Jun 19 '17 at 10:51

1

Use this code:

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

answered Jun 19 '17 at 10:51

Chandra Kumar

4,127
1
17
25

score 0 · Accepted Answer · answered Mar 28 '15 at 20:21

0

try

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

the current version had to be reverted due to a bug. The docs have been updated.

answered Mar 28 '15 at 20:21

Eonasdan

7,563
8
55
82

@ Eonasdan: I've tried your suggestion, but it doesn't work. It seems not to react on "dp.change". Any idea why? – Jojoseph Mar 29 '15 at 08:26
In the script I referenced the date picker with #dp1. Instead it should referencing a class. So I changed it to .dp1. Now it works, but the problem I have now is, it fires immediately after clicking the date picker. I don't get a chance to select a date. It immediately sends of the current date. How can I prevent this behavior? – Jojoseph Mar 29 '15 at 08:44
I've found the solution: as an option I added 'useCurrent: false'. Now it behaves like I want. Great! So my script is now as follows: $('.dp1').datetimepicker({ format: 'DD-MM-YYYY', showTodayButton: true, useCurrent: false }); $(".dp1").on("dp.change", function() { $('.form').submit(); }); – Jojoseph Mar 29 '15 at 09:05

score 0 · Answer 3 · answered Feb 22 '16 at 08:59

0

The answer may be found in the documentation: http://xdsoft.net/jqplugins/datetimepicker/

Use the onChangeDateTime option:

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

answered Feb 22 '16 at 08:59

user000001

32,226
12
81
108

Bootstrap 3 Datetimepicker auto submit

3 Answers3