how to integrate datepicker in laravel 5

In this post I talk about how to integrate Datepicker in your laravel Project.

First you can download Files from following Link.

Download Asset Files

Move Downloaded Files into your public Directory respective Folder.

Next you specify newly added assets (CSS File and JS File) in your layout File.

To place following CSS file in the header

<link href="/{{ URL::asset('css/default.css') }}" rel="stylesheet">
<link href="/{{ URL::asset('css/default.date.css') }}" rel="stylesheet">

To place following Javascript file before the closing </body> tag.

<script src="/{{ URL::asset('js/jquery.1.7.0.js') }}"></script>
<script src="/{{ URL::asset('js/legacy.js') }}"></script>
<script src="/{{ URL::asset('js/picker.date.js') }}"></script>
<script src="/{{ URL::asset('js/picker.js') }}"></script>
<script>
     $( document ).ready(function() {
    var $input = $( '.datepicker' ).pickadate({
            formatSubmit: 'yyyy-mm-dd',
             hiddenName: true,
            // min: [2015, 7, 14],
            container: '#container',
            // editable: true,
            closeOnSelect: true,
            closeOnClear: false,
        })
        var picker = $input.pickadate('picker')
    });
  </script>

In Blade view, add datepicker class for you needed date picker input and don’t forget¬† <div id=”container”></div> to place the line in your blade.

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
             <div class="form-group">
                  <label for="exampleInputPassword1">Date Picker </label>
                  <input type="text" class="form-control datepicker" id="date_order" name="date_order">
                </div>
        </div>
    </div>
</div>

 <div id="container"></div>

@endsection

 

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *