I'm working with Laravel 5, in a view I'm using the bootstrap datetimepicker I have a timestamp saved in the database, and when the user load that view I want to preload that date in the datetimepicker. As I read there's a method datepicker('setDate',startDate); to set the date, but I need to assign the value that is accesible trought PHP, as I am using blade my timestamp is accesible with:
{{$contract->myTimestamp}}
So, I can I do it?
HTML Code:
<div class="col-sm-10" style="height:10px;">
<div class="form-group">
<div class='input-group date' data-date-startdate="{{$contract->myTimestamp}}" name="datepicker" data-date-format="yyyy-mm-dd hh:mm:ss" id='datetimepicker{{$contract->id}}' >
<input type='text' class="form-control" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
in the JS I added:
$(document).ready(function(){
$(this).datetimepicker().datetimepicker('setDate',startDate);
});
Now It shows me the date, but doesn't let me edit it, I mean when I click on the button to chage the date nothing happens,So I whas thinking that it could be a trouble with the format of the date, because in the database I have something like 2015-11-28 20:10:14 and in the datetimepicker I have 12/03/2015 12:00 AM and they are differents formats. So how can I transform the date?thanks!
Related
I am using bootstrap-datepicker with vue js. The problem is, when I select date it comes to the input field but whenever I shift to another input field, the date vanishes. how do I make the date stay even if I switch to another field. below is my code
$('.datepicker').datepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>
<div class="input-group">
<div class="input-group-prepend">
<span v-bind:style="{ width: prependWidth + 'px' }" class="input-group-text">Acceptance Date</span>
</div>
<input data-provide="datepicker" v-model="formData.acceptance_date" id="acceptance_date" name="acceptance_date" type="text" placeholder="" class="form-control">
</div>
here is my vue data
formData: {
event_name: '',
ba_alt: '',
bn_alt: '',
acceptance_date: ''
},
i have a laravel page which contains a reserve form i redirect my user after selecting date now for number of people and counting the price i use vuejs but i want to pass the data to the laravel form and submit that from laravel with all the other data so here is a part of my code :
your final price
<input type="number" style=" background-color:#fff; border:none" v-model="finalPrice" disabled/>
and here is js part i cuted out code for better reading :
<script>
this.epic_price = this.sum_price + (this.total_price * this.sum_day)
this.$emit('input', this.epic_price)
</script>
although this form is not complete yet but i want to use it here in this page so i just paste it consider the form is not complete at all :
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed"
action="/properties/savereserve/" method="post">
<div class="row">
#foreach($price as $key => $prices)
<div class="col-lg-2 text-center">
{{$date[$key]}}
<hr>
{{$prices}}
</div>
#endforeach
</div>
</form>
//exacly on the same page i use my vue component so they are on the same page
<reserve
:sum_price="{{$sumprice}}"
:sum_day="{{$sumday}}"
:base_price="{{$property->base_price}}"
:property_id="{{$property->id}}"
:user_id="{{Auth::user()->id}}"
></reserve>
How can I secure data from being change if user used inspect element in chrome to change id, price..etc, I know I can't prevent users from using inspect element and do changes but I dont want these changes to have effect
I used this in blade to pass data from button using ajax
<button id="Item_root" data-id="{{$product->product_id}}" data-detailsfield="{{$product->product_details}}" data-titlefield="{{$product->product_title}}" data-pricefield="{{$product->product_price}}" data-photofield="{{ asset('images/' . $product->product_image) }}" class="Item_root Button_root">
and from inspect element user can see it like this:
<button id="Item_root" data-id="19" data-detailsfield="Serves 6-8 People" data-titlefield="Package # 8U" data-pricefield="105.99" data-photofield="http://localhost/crisp/public/images/Chicken-Fajitas.jpg" class="Item_root Button_root">
<div class="Item_image" style="background-image:url('http://localhost/crisp/public/images/Chicken-Fajitas.jpg');"></div>
<div class="Item_itemContent">
<div class="Item_topSection">
<span class="Item_name styles_just-right styles_base styles_spacing-base">Package # 8U</span>
<span class="Item_price styles_just-right styles_base styles_spacing-base styles_semibold">$105.99</span>
</div>
<div class="Item_description styles_small styles_base styles_spacing-base styles_line-default">Serves 6-8 People</div>
</div>
</button>
To preventing change values by users in inspect element and send it again to controller, you should use CSRF_TOKEN in input fields,
Take a look at here:
In laravel 5.6
<form method="POST" action="/profile">
#csrf
...
</form>
And also Laravel has Validation for check all input type that you defined.
Here is the documerntation :
Laravel Validation
I am getting errors on submitting a form to the server that has a bootstrap-datepicker field. What should I do now?
The error report is:
InvalidArgumentException in Carbon.php line 425:
Unexpected data found.
Unexpected data found.
Data missing
in database migration file:
$table->timestamp('dob'); // dob is date of birth
in my model:
protected $dates = ['dob'];
HTML:
<div class="form-group {{ $errors->has('dob') ? 'has-error' : '' }}">
<label class="col-sm-2 control-label">Birthday*</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="dob" required="" id="datepicker" value="{{ old("dob") }}">
{!! $errors->first('dob','<span class="help-block">:message</span>') !!}
</div>
</div>
script:
<script src="{{ url('js/bootstrap-datepicker.js') }}" charset="utf-8"></script>
<script>
$('#datepicker').datepicker({
autoclose: true
});
</script>
If you're trying to get the bootstrap-datepicker jQuery plugin to work with Laravel date formats, here are the steps:
Step 1, set this format in your JavaScript:
jQuery('.datepicker').datepicker({
format: 'yyyy-mm-dd'
});
Step 2, add the time part of the date when saving the date in your Controller, example:
$model->start_date = $request->start_date .' 00:00:00';
The datpicker format is different from timestamp format so you need to follow one of the solutions:
1.change the accepted datepicker's format using format option
2.follow the following link to know how to change the timestamp's format to whatever you want or even make it nullable.
Laravel "Unexpected data found" error when trying to change format of Carbon created_at date
You need to change your field before saving in DD,
In order to do that add something like this function to your relevant model,
Notice that you must follow the naming convention which is //setNameAttribute
. Then pass the date taken from datepicker
public function setDob($date)
{
$this->attributes['dob']=Carbon::createFromFormat('Y-m-d H:i:s',$date);
}
I write the form.blade.php like this:
<div class="form-group">
<label>Start at</label>
<div id="start_date" class="input-group date form_datetime col-md-4" data-date-format="yyyy-mm-dd hh:ii:ss">
<input class="form-control" name="start_at" size="16" type="text" value="{{ $activity->start_at }}">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
Both Create and Edit method use the view to display the form. In the Edit method, the $activity is used and everything is normal. But in the Create method, the $activity is null, so I have a error in {{ $activity->start_at }}.
I know I can use if(!empty($activity)) to prevent this error. but I do not want to use this anywhere.
What is the better way?
You could use this,
{{ $activity->start_at or '' }}
I also like to reuse code and use the same view to create or edit an object. What I do is to pass a brand new instance of the object to the create view. This way I have the object on its initial state including defaults (if any) and I am able to prefill those defaults (if any) on the displayed form. It gives me an additional benefit: if anything goes wrong with the validation at the server level the user doesn't lose any data, I just need to do something like this in the view:
<div class="form-group">
<label for="test_field" class="control-label">Fecha de firma</label>
<input type="text" value="{{ ( !empty($isabi) ? $isabi->fecha_firma : old('fecha_firma')) }}"
name="fecha_firma" id="isabi-fechafirma" class="form-control" placeholder="Este campo es obligatorio">
</div>
This is the create method with extra functionality removed for clarity (check if the user is authenticated, linking the created object with the company the user works for and other stuff):
public function create()
{
return view('isabis.create', [
"isabi" => new Isabi()
])->with($this->data);
}
I use $this->data for view configuration. Hope this helps.