A Date picker

Published 3 years ago by [email protected]

Can anyone please suggest me a very easy way to place a datepicker in a form in laravel. I have tried to use the form::month and form::year..but when it comes to the date...i will need to put a validation so that the user cannot choose a date like 31 Feb...and this is out of my capability right now. I have also looked for bootstrap 3 datepicker..but its inclusion seems to be difficult ....any help is most welcome...

Best Answer (As Selected By [email protected])
RachidLaasri

This will make it easy to select the date of birth. http://jqueryui.com/datepicker/#dropdown-month-year

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

You can use jQuery UI Datepicker http://jqueryui.com/datepicker/

Include this in your head

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

in your footer

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

and your input

{{ Form::text('date', '', array('id' => 'datepicker') }}
RachidLaasri

You can also change the format like "31 Feb, 2015" or any other you want, check this http://jqueryui.com/datepicker/#date-formats

 <script type="text/javascript">
  $(function() {
          $( "#datepicker" ).datepicker( "option", "dateFormat", 'd MM, y');
  });
  </script>
rakeshsonea@gmail.com

@Rachid Oh...thank you very much ...it works...however i have one inconvenient....since i will be using the datepicker for entering the date of birth...the user will have to click many so that to get the right date of birth....do you have any suggestion which can remove this inconvenience....again thanks for your precious help....

RachidLaasri

This will make it easy to select the date of birth. http://jqueryui.com/datepicker/#dropdown-month-year

<script type="text/javascript">
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
pmall
pmall
3 years ago (581,145 XP)

http://laravel.com/docs/4.2/validation#rule-date

No 31 Feb 2015 allowed :)

You must always validate your data and not rely on js components to do it.

rakeshsonea@gmail.com

@pmall...thank you very much...point noted...

zhiyong

When I tried RachidLaasri's solution, I got an error saying "unexpected ';' " a few line lines after where I insert

{{ Form::text('date', '', array('id' => 'datepicker') }}

But in fact I don't have any ';' in that view file.

I am using Laravel 5. What I am missing here? Could this be a dependency issue or something else?

Thanks in advance.

uxweb
uxweb
2 years ago (72,650 XP)

@zhiyong if you are using L5 use should use the new output tags in blade:

    {!! Form::text('date', '', array('id' => 'datepicker') !!}
zhiyong

@uxweb Thanks for the reply.

This is actually what I did. I basically put the stuff RachidLaasri provided into header and footer of app.blade.php. Then in a test page (View), I used following code:

@extends('app')
@section('content')
{!! Form::open(array('url' => $type, 'class' => 'form')) !!}
{!! Form::text('date', '', array('id' => 'datepicker') !!}
{!! Form::close() !!}
This is an test page
@endsection

I got an error: syntax error, unexpected ';'

uxweb
uxweb
2 years ago (72,650 XP)

This view looks good, does the error stack provides the file and error line?

xingfucoder

Hi @rakeshsonea, here put some Datepickers for Bootstrap:

Bootstrap Datepicker: https://github.com/eternicode/bootstrap-datepicker

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

Hope those help you.

RachidLaasri

@zhiyong You are missing a ) in your code

{!! Form::text('date', '', array('id' => 'datepicker')) !!}
zhiyong

@RachidLaasri
Yes, that is the problem. Thanks very much. I should have caught it.

I think a 'a' is also missing from your code. Adding it may help newbies like me in the future. :)

@codeatbusiness Thanks for the link. I will look into them.

athulpraj

if we are using text form for entering dates ... the input form can be initially filled with text input right? .. how to avoid this?

d3cypher

What does datepicker accepts as a value in a database should it be a varchar or date ?

Please sign in or create an account to participate in this conversation.