Twitter Bootstrap Question posted in

Bootstrap datepicker in Laravel is auto opening and not loading styles properly-Twitter bootstrap

I have to prepare a form.blade.php for date changing, my problem is with loading styles or something near connected. Here are my files:

_form.blade.php
<div class='form-group'>
                <div class="input-group datepicker">
                    <input type="text" class="form-control">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </div>
                </div>
            </div>

layout.blade.php

<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script>
    $(function () {
        //Date picker
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
        });
        //Date & Time picker
        $('.datetimepicker').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
        });
    });
</script>
</body>

The problem is that when the class for div in _form file is set to datepicker
<div class="input-group datepicker"> the form looks like auto opened:
enter image description here
And when i change class to datetimepicker it looks as i want (after click calendar icon theres menu to choose the date):
enter image description here

I’m a newbie in Laravel so don’t be mad at me 🙂 Thank you for all your time and help!

Tags:

2

Answers


  1. 0

    This has nothing to do with Laravel, it seems that styles from your datepicker and datetimepicker plugins (since they are two different plugins) are having conflict, you should have used just one javascript plugin to handle both, or use libraries that don’t collapse with others.

    EDIT:

    Actually, your datetimepicker plugin from Eonasdan supports the use of datetime or just date, the format specified in the options defines what components are shown

    $('.datetimepicker').datetimepicker({
                    format: 'MM/dd/YYYY'
                }

);

    please, refer to the documentation:

    http://eonasdan.github.io/bootstrap-datetimepicker/

    Login or Signup to reply.
  2. 0

    You are trying to attach datetimepicker to a div which is wrong

    You must attach datetimepicker to an input so that it can be sent to server:

    Make an input field and give any class and attach datetimepicker using it

    <input type="text" name="time" class="form-control mydatetime">

 $(document).ready(function(){
    $('.mydatetime').datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss'
    });
 });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search