skip to Main Content

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

2

Answers


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