Twitter Bootstrap Question posted in

get a value on change of an hidden input – Twitter bootstrap

I want to know why I can’t get a value of my hidden input(datepicker bootstrap inline)
to put my datepicker on inline like a doc, so i have to add the hidden input and get his value on change after that.

The HTML code:

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
<input type="hidden" id="my_hidden_input" class="form-control">

The JS code :

jQuery('#datepicker').datepicker();
jQuery('#datepicker').on('changeDate', function() {
jQuery('#my_hidden_input').val(
        jQuery('#datepicker').datepicker('getFormattedDate')
    );
});

jQuery(document).ready(function () {
    jQuery("#datepicker").datepicker({
        startDate: new Date(),
        language: "fr",
        autoOpen:true,
        autoclose: true,
        todayHighlight: true
        //datesDisabled: ['22/02/2017', '28/02/2017']
    }).datepicker('update', new Date());;
});



jQuery("#datepicker .form-control" ).val().trigger('change', function() {
    alert(jQuery(this).val());  //here
});

jQuery('#datepicker').datepicker();
      jQuery('#datepicker').on('changeDate', function() {
          jQuery('#my_hidden_input').val(
              jQuery('#datepicker').datepicker('getFormattedDate')
          );
      });
    
jQuery(document).ready(function () {
      jQuery("#datepicker").datepicker({
          startDate: new Date(),
          language: "fr",
          autoOpen:true,
          autoclose: true,
          todayHighlight: true
      }).datepicker('update', new Date());;
  });
  
  
jQuery( "#datepicker .form-control" ).change(function() {
       alert(jQuery(this).val());
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
            <input type="hidden" id="my_hidden_input" class="form-control">
Tags:

2

Answers


  1. 0

    Try to include: 

    <script src="jquery-ui.js"></script>

    or try to check if you have some double import (like jquery.js and jquery.min.js)

    Login or Signup to reply.
  2. 0

    you can try this 

    jQuery(document).ready(function () {
    var datepicker = jQuery("#datepicker").datepicker({
        startDate: new Date(),
        language: "fr",
        autoOpen:true,
        autoclose: true,
        todayHighlight: true
        //datesDisabled: ['22/02/2017', '28/02/2017']
    }).datepicker('update', new Date());
    datepicker.on('changeDate', function() {
      jQuery('#my_hidden_input').val(
          jQuery(this).datepicker('getFormattedDate')
      );
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search