I'm trying to add a datepicker to my form and it drives me crazy, I tried everything I know, I've search for hours and all I got is nothing so first here is my blade code:

    <div class="form-group">
{{ Form::label('date', 'Date:') }}
{{ Form::text('date', $payment->date, array('class' => 'datepicker','id' => 'datepicker')) }}                           
</div>

<script type="text/javascript">
$(function () {
$( "#datepicker" ).datepicker({
todayHighlight: true,
autoclose: true,
});
    });
</script>

Second here is a picture that show us the white long space that I wont to remove.

I tried to edit the css file but as far as I get that the css file has nothing to do with this problem.. so please guys help me.

I'm trying to add a datepicker to my form and it drives me crazy, I tried everything I know, I've search for hours and all I got is nothing so first here is my blade code:

    <div class="form-group">
{{ Form::label('date', 'Date:') }}
{{ Form::text('date', $payment->date, array('class' => 'datepicker','id' => 'datepicker')) }}                           
</div>

<script type="text/javascript">
$(function () {
$( "#datepicker" ).datepicker({
todayHighlight: true,
autoclose: true,
});
    });
</script>

Second here is a picture that show us the white long space that I wont to remove.

I tried to edit the css file but as far as I get that the css file has nothing to do with this problem.. so please guys help me.

• javascript
• php
• html
• laravel
• datepicker

2 Answers 2

so here is the fix for this problem guys:

$( "#datepicker" ).datepicker({
format: "mm/dd/yy",
weekStart: 0,
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
rtl: true,
orientation: "auto"
});

the key is the ("dir") code thank you.

This is how i use that datepicker with bootstrap:

<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

{!! Form::label('date', 'Date: ' ) !!}
<div class="form-group input-group date">
    {!! Form::text('date', null, ['class' => 'form-control']) !!}
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>


<script src="/js/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script>
    $function(){
        $(.date).datetimepicker({
    });
</script>

Maybe you are using wrong datetimepicker. This is the one i am using:

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