I am developing an application in laravel and use datetimepicker to set time of event at time of add new event. Now I want to update that event detail and I want to show time which I have set at time of add event in respective field.
How can I achieve this using date time picker? My code is as below:
<div class="input-group date start_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="starttime" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="{{$event_detail['start_time']}}" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="starttime" value="{{$event_detail['start_time']}}" name="starttime"/><br/>
$('.start_time').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
When I have try above code it will give me error in console like:
"TypeError: d is undefined".
But if I blank value attribute if textbox then it work fine. Can anyone help me to solve this?
try to replace value like this, if you are sure the time field will not contain null value, you can skip the empty check but not important though.
<input class="form-control" size="16" type="text" value="{{ $event_detail['start_time'] ? date('H:i',strtotime($event_detail['start_time'])) : '' }}" readonly>
Related
sI have a livewire form with an address field that has google places autocomplete enabled on it. Every time I select an address from the autocomplete list and move to a new input in the form the address input gets reset to the value before clicking the address I wanted.
I added wire:ignore on my field and it still gets reset to the value typed in before the click event. This is my code for the input:
<div wire:ignore id="for-input-address" class="form-group col-lg-6{{ $errors->has('address') ? ' has-danger' : '' }}">
<label class="form-control-label" for="input-address">{{ __('Home address') }}</label>
<input wire:model="address" type="text" name="address" id="input-address" class="form-control form-control-alternative{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="{{ __('Home address') }}" value="{{ old('address') }}" required autofocus>
#if ($errors->has('address'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('address') }}</strong>
</span>
#endif
</div>
So if I type 56 and select the address the moment I move to the next field the input gets reset to 56.
I want to say I have some select fields with wire:ignore that work just fine when livewire reloads the DOM.
Put an additional attribute to your input -> autocomplete="off" to tell the browser not to use any autocomplete mechanisms.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
I ended up using livewire events, documented here: https://laravel-livewire.com/docs/2.x/events in my blade file and I fired an event on google autocomplete "place_changed" like so
google.maps.event.addListener(autocomplete, 'place_changed', function() {
Livewire.emit('addressUpdated', addressAndTown, postcode);
});
and in my controller I did the following before the submit function
public function addressUpdated($address, $postcode)
{
$this->address = $address;
$this->postcode = $postcode;
}
and updated my values in the controller
How would I avoid doing calculation for 3 inputs using Livewire and use JS instead, but still can bind the inputs and their new values with the component.
Example:
<input id="cash-price"
type="text"
wire:model="total_cache_price"
class="amount-credit">
<input id="deposit"
type="text"
wire:model="deposit"
class="amount-credit">
<input id="trade-in"
type="text"
wire:model="trade_in"
class="amount-credit">
I can easily do a simple calculation using JS, but the properties in Livewire component would still be empty or null after submitting the form. I am trying to avoid livewire requests for every input change.
Note: I understand the deferred updating in livewire, the problem is with the property values not changing.
I will show you an example in alpine js + livewire way.
Here I want to set value in two inputs from a selected option in select.
Please note that x-ref is used in alpine to directly access DOM elements without using getElementById.
<div x-data="{
from_date : #entangle('from_date').defer,
to_date : #entangle('to_date').defer,
dateChange(){
select = this.$refs.years;
this.from_date = select.options[select.selectedIndex].getAttribute('data-from');
this.to_date = select.options[select.selectedIndex].getAttribute('data-to');
},
resetFilters(){
this.net_balances = false;
}}">
<select x-ref="years" #change="dateChange()">
<option value="">Year</option>
#foreach ($years as $key => $year)
<option wire:key="{{ 'years'.$key }}" data-from="{{ $year->from_date }}" data-to="{{ $year->to_date }}" value="{{ $year->id }}">{{ $year->name }} </option>
#endforeach
</select>
<div>
<text type="date" x-model="from_date" />
</div>
<div >
<text type="date" x-model="to_date" />
</div>
I have a edit page that shows a date and is possible to change the date and edit it.
I want to show the date in this format "25-08-18 - 15:30" if the date already is stored in DB. So I have this field:
<div class="form-group col-md-6">
<label for="date">Date</label>
<div class="input-group date" data-provide="datepicker">
<input type='text' onkeydown="event.preventDefault()"
name="date" value="{{!empty($post->date) ? $post->date->formatLocalized('j-m-y - H:i') : ''}}"
class="form-control" placeholder="DD/MM/YYY"/><span class="input-group-addon"><i class="fa fa-calendar text-primary"
aria-hidden="true"></i></span>
</div>
</div>
But like that it shows "j-m-y - H:i" in the input field value. Do you know why?
Like this:
value="{{!empty($post->date)
? $post->date->toDateTimeString()
: ''
}}
it shows the seconds "2018-08-25 15:30:00" but it should show only "2018-08-25 15:30".
Then to validate is used:
'date' => 'nullable|date_format:"j-m-y - H:i"',
And to update is used:
$post->date = (isset($request->date)) ?
Carbon::createFromFormat('j-m-y - H:i', $request->date) : null;
value="{{!empty($post->date)
? substr($post->date->toDateTimeString(),0,-2)
: ''
}}
format and formatLocalized are not the same and are not interchangeable.
formatLocalized() uses strrftime() under the hood and is used for formatting local time/date according to locale settings and does not accept the same formatting string/characters as the format() method.
You should be able to achieve what you're after by changing:
$post->date->formatLocalized('j-m-y - H:i')
to:
$post->date->format('j-m-y - H:i')
I have a form and I want to set default value in the field below but it's not working.
<span>ID User:</span>
<input type="text" th:value="${session.name}" th:field="*{userid}" th:errorclass="field-error" />
</div>
<div>
<span class="name-in">ID Room:</span>
<input type="text" th:value="${id}" th:field="*{room}" th:errorclass="field-error" />
</div>
I read some topic about this problem and I try to change as given below
th:attr="value = ${session.name}"
But It's still not working. Field ID User is empty. I don't know how to solve this problem.
Although your question contain less information, but i think you want to put default value for all field. If you like to do so change
`<input type="text" th:value="${session.name}" th:field="*{userid}" th:errorclass="field-error" />`
to
<input type="text" name="userid" value="as your wish" th:errorclass="field-error" />
Instead of changing the html, you should instead set the value of *{userid} in your controller. That way you can keep your html the same:
// Controller
modelObject.setUserId(session.name);
// HTML
<input type="text" th:field="*{userid}" th:errorclass="field-error" />
We have a web application which has a list of reports, which I am trying to automate.
There is an option to view all these reports. When I open a report to view, there are some values I need to select to view it, which is where I am stuck.
The id used for these reports are generic. If the id for <label>Application<lable> is <select id="id1" name="id[1]" class="valid">, the same label in a different report will have a different id. How do I proceed from here?
Giving the tags of two sample reports:
First report:
<div>
<label id="PackageID">
Package ID <span class="required">*</span></label>
<input id="id_1__Name" name="id[1].Name" type="hidden" value="PackageID">
<select id="id_1__SelectedValues" name="id[1].SelectedValues" class="valid">
</div>
Second report:
<div>
<label id="PackageID">
Package ID <span class="required">*</span></label>
<input id="id_5__Name" name="id[5].Name" type="hidden" value="PackageID">
<select id="id_5__SelectedValues" name="id[5].SelectedValues" class="valid">
</div>
Not sure if this suggestion is suitable for your scenario, but you could get the id with jQuery and store it in a hidden field:
var id = $('.className').attr('id');
or use control's ClientID property.
Anyway, to select proper value you just need
#browser.select_list(:id, "id_5__SelectedValues").set("3")