How to keep the input date bootstrap on the page?

Asked

Viewed 6,731 times

2

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

Inspecting the element, the div which involves both the input field and the icon, is there, but what is inside it is not.

I tried to adjust the css, but unsuccessfully.

Follows 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 twitter-bootstrap bootstrap-3 input datepicker

  • Marcelo remade the Snippet and now he has input=text and the other things that were missing to work with script. I think now will serve you. Copy the Snippet to your file and test!

1 answer

3


Marcelo remade the Snippet and includes a Script to make the Datapicker work on input=text

I had 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 the value="{{ date('d/m/Y') }}" your model works, but new model uses data-date-format="dd/mm/yyyy" ai does not appear the text inside the input.

inserir a descrição da imagem aqui

Follow the image code above:

<!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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Plugin pro Datapicker novo -->
    <script src='https://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>

  • I had initially done this and it didn’t work. So I searched the documentation and there the input is "text" and not date. Just in case, I changed the type and the same effect occurs. During loading the field appears, at the end it is deleted from the screen.

  • @Marcelogomes at the end of Snippet you will see that I call the standard BS Scripts, and when Run can repair that it is working fine, even with Type=Date. In your case it should be something at the end of the page that when loaded by the DOM "Bugga" its input.

  • @Marcelogomes vc is using some Datapicker Plugin? Which?

  • @hugocks no plugin use. Yes, your example works. Some css of my application must be breaking the css of date. I’ll review the order of the injections.... Thanks

  • Funcionoul I was setting wrong in js.

  • @Marcelogomes how good it worked! If my reply helped you in any way consider marking the Reply with "Accept" ✔ abs

Show 1 more comment

Browser other questions tagged html twitter-bootstrap bootstrap-3 input datepicker

You are not signed in. Login or sign up in order to post.