How do I keep the input date bootstrap on the page?

Question

How do I keep the input date bootstrap on the page?

Navigation

#1 by (2 votes)

1

I implemented the "date" class of Bootstrap 3. When the page is accessed, the field is rendered normally, but at the end of the page load the input text and the calendar icon simply disappear.

Inspecting the element, the div that surrounds both, the input field and the icon, is there, but what's inside it does not.

I tried adjusting the css, but without success.

Follow the html:

<div class="col-md-3">
    <div class="form-group">
        <label for="data-pagamento">Data Pagamento</label>
        <div class="input-group date">
            <input type="text" id="data-pagamento" name="data_pagamento"
                   value="{{ date('d/m/Y') }}"
                   class="form-control"/>
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
            </div>
        </div>
    </div>
</div>

html input bootstrap

asked by anonymous 02.01.2018 / 11:41

1 answer

How to leave the header of a fixed menu As the second cell of the last column?

score 2 · Accepted Answer

Marcelo refined the Snippet and includes a Script to make the Datapicker Run in input=text

I needed to include this at the end of HTML

<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js'></script>
<script>
 $('.input-group.date').datepicker({format: "dd.mm.yyyy"});
</script>

Even with value="{{ date('d/m/Y') }}" your template works, but new template uses data-date-format="dd.mm.yyyy" there does not appear text inside the input.

In the StackOverflow Snippet will Run with Error! But copy to your local file that should work without errors!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
        <div class="col-md-3">
                <div class="form-group">
                    <label for="data-pagamento">Seu Datapicker</label>
                    <div class="input-group date">
                        <input type="text" id="data-pagamento" name="data_pagamento"
                               value="{{ date('d/m/Y') }}"
                               class="form-control"/>
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>
            </div>


          <div class='col-md-3'>
            <div class="form-group">
                <label for="data-pagamento">Datapicker novo</label>
                <!-- Datepicker as text field -->         
                <div class="input-group date" data-date-format="dd.mm.yyyy">
                  <input  type="text" class="form-control" placeholder="dd.mm.yyyy">
                  <div class="input-group-addon" >
                    <span class="glyphicon glyphicon-th"></span>
                  </div>
                </div>
            </div>
          </div>

    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Plugin pro Datapicker novo -->
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js'></script>
    <script>
     $('.input-group.date').datepicker({format: "dd.mm.yyyy"});
    </script>
    
</body>
</html>