I want to use color picker in my form and i have tried below code in my project but its not working. Anything wrong with the code?,
In view blade,
@extends('layouts.blank')
@push('stylesheets')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
@endpush
@section('main_container')
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('.colorpicker').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
@endsection
@pushonce('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
@endpushonce
I got an empty text box not showing the color.Is there any problem with including css or js files. How can I solve this ?Can anyone help?