How can I modify the default datepicker in CakePHP 3.6? - javascript

I am using the default datepicker like this :
echo $this->Form->control(
'created',
[
'label' => __('Start date'),
'type' => 'date',
'id' => 'datetimepicker',
'default' => date('d-m-Y') #Set time for today
]
);
But its kinda ugly:
Is it possible to change it to a proper datepicker with a calendar instead of 3 dropdown fields?
If not is it possible at least to change the order of the fields and the language?
EDIT
After comment suggestions I decided to use jquery datepicker like this:
echo $this->Form->control('created', ['label' => 'Start date']);
<script>
$( function() {
$( "#created" ).datepicker();
} );
</script>
But (probably) because created id is in the model it is overriding it and shows the same default datepicker, I have to change the id in order to work, but then its value is not saved....
If I set the type to text it displays the jquery calendar but the date saved is 0000-00-00 00:00:00

Related

Symfony 4 form with ckeditor textarea not submitted

I need to use a wysiwyg editor on my website.
I use symfony 4.
I've tried to use ckeditor 5 CDN (https://ckeditor.com/ckeditor-5/download/)
The view works well but the symfony form is not submitted. (the textareatype may kills the form because with ckeditor it is changed into many divs and the textarea section may be considered blank)
this is the code of the textarea which is in the form.
->add('content', TextareaType::class, [
'label' => "Content label",
'required' => true,
'attr' => [
'class' => "ckeditor"
]
])
and the code of the script
<script>
ClassicEditor
.create( document.querySelector( '.ckeditor' ) )
.catch( error => {
console.error( error );
} );
</script>
Thanks. it's hopeless how it's difficult to use a simple wysiwyg editor ..
I found the solution.
I emphasize that i use CKEditor 5.
ClassicEditor
.create( document.querySelector( '.ckeditor' ) )
.then( editor => {
theEditor = editor;
} )
.catch( error => {
console.error( error );
} );
document.getElementById("news_submit").addEventListener("click", function() {
theEditor.updateSourceElement();
});
the method is now "updateSourceElement" with CKEditor 5.
edit: this answer is for ckeditor 4 not for 5
ckeditor not update field in real time. You need to call updateElement ckeditor function before submit your form.
See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-updateElement

yii2 dynamic-form wbraganca call javascript function

I have read some articles about yii2 dynamic-form and javascript function. The solution given by InsaneSkull is perfect. But i have one question.
example :
i'm using dynamic-form from wbraganca and trying to call function onchange event (javascript). My code like this
<?= $form->field($detail, "[{$i}]qty")->widget(\yii\widgets\MaskedInput::className(),
[
'clientOptions' => [
'alias' => 'numeric',
'groupSeparator' => ',',
'digits' => 0,
'autoGroup' => true,
'removeMaskOnSubmit' => true,
'rightAlign' => false,
],
'options' => [
'class' => 'form-control',
'onchange' => 'Info($(this))',
]
]) ?>
First, i try to register Info function like below
<?php
$script = <<< JS
function Info(item){
var index = item.attr("id").replace(/[^0-9.]/g, "");
alert(index);
};
JS;
$this->registerJs($script);
?>
It gave error because Info function not defined yet.
Second, I registered in AppAsset and it worked.
My question : what is the differences? *(I think it was the scope).
How to define the function beside register in AppAsset ?
Where dou you register above script? If in view after use widget, default position at which JS is register is POS_READY public void registerJs ( $js, $position = self::POS_READY, $key = null ) Try to use position POS_BEGIN or POS_HEAD if you want to put the script after use widget. Otherwise You can override widget class and put this script into init method of the widget which is execute before run method rendered widget.

Vue.js 2 - retrieve form elements from server and render CRUD

I'm Vue.js newbie and my task is:
make an ajax call (GET) to server, using RESTful API (Laravel on background)
retrieve a (JSON) list of Form CRUD items in array (like checkbox, input text, textarea...) with their properties (value, checked, custom classes...)
render CRUD form with these form items maybe using Vue's loop
I'm wondering if it could be rendered using components somehow. But I don't know the correct way.
Frankly, I exactly don't know how to solve this problem with Vue.js - rendering items from array and each item has it's own markup and properties (checkbox has it's own, textbox, select, textarea...).
I'm building a web application based on CRUD operations and I'm trying to write universal components. The easiest way is to do a special component with hard-written sub-components for each subpage, but I don't like this way if not needed.
Thank you!
EDIT: I don't have much code yet, but this is where I am...
<script>
// ./components/CrutList.vue
export default {
mounted() {},
data() {
return {
items: []
}
},
props: ['resource'],
methods: {
getItems() {
var resource = this.$resource('api/'+this.resource+'{/id}');
resource.get({}).then(function(items){
if(items.body.status == 'success'){
this.items = items.body.items;
}
}).bind(this);
},
deleteItem(item) {
// perform CRUD operation DELETE
alert('delete action');
}
}
}
</script>
My idea is using CrudList component to CRUD listing...
<crud-list resource="orders">
In laravel I do something like this:
return response()->json([
'status' => 'success',
'items' => [
[
'itemComponent' => 'checkbox',
'props' => [
'checked' => true,
'label' => "Checkbox č.1",
'name' => 'checkbox1'
]
],
[
'itemComponent' => 'checkbox',
'props' => [
'checked' => true,
'label' => "Checkbox č.2",
'name' => 'checkbox2'
]
],
[
'itemComponent' => 'checkbox',
'props' => [
'checked' => true,
'name' => 'checkbox3'
]
],
],
]);
...it's very simplified, but it's just example of what I'm doing.
Now the problem is:
take the 'itemComponent' part from the returned array item (this is in a loop),
if it's a checkbox, take (for example) Checkbox.vue component, fill it with properties ('props' part of the array item)
I read about slots, but it's not what I'm looking for. Is there something I can use for dynamic components?
Check out this jsFiddle working example for dynamic forms:
https://jsfiddle.net/mani04/kr8w4n73/1/
You can do it easily by using a lot of v-ifs for each and every form element type you might get from server. It is a bit cumbersome but I can't find any other way.
In the above example, I have the form structure as follows:
var formItems = [{
input_type: "text",
input_label: "Login",
values: {
value: "your_name#example.com"
}
},
{...},
{...}];
Once you have that data, then it is a matter of iterating through formItems, checking input_type and activating the relevant form control.
Here is how my dynamic form template looks like, for the above input:
<div v-for="formItem in formValues">
<div v-if="formItem.input_type == 'text'">
<input type="text" v-model="formItem.values.value">
</div>
<div v-if="formItem.input_type == 'password'">
<input type="password" v-model="formItem.values.value">
</div>
<div v-if="formItem.input_type == 'checkbox'">
<input type="checkbox" v-model="formItem.values.checked">
{{formItem.values.label}}
</div>
</div>
My jsFiddle example uses form-horizontal from bootstrap, and I am also able to display the labels well. If I put that in the example above, it will get cluttered and will not let you see how it works.
Hope it helps! You can change the formItems data structure to meet your needs, and modify the template accordingly.

Google Maps API MissingKeyMapError via Magento Plugin

I've had a look through the forum already, but can't seem to find an answer for my specific problem.
So, I've installed a third party 'store locator' plugin on my Magento store but I keep getting a js error message about MissingKeyMapError. I've already applied for an API key - but my problem is I'm not sure where in the code I should put this key.
API Key
I'm in Googlemap.php in the app folder for this particular plugin and I think it should go in here somewhere but not entirely sure.
This is what's contained in Googlemap.php:
class Clarion_Storelocator_Block_Adminhtml_Storelocator_Edit_Tab_Googlemap extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
$model = Mage::registry('storelocator_data');
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('form_General_Googlemap', array('legend'=>Mage::helper('clarion_storelocator')->__('Google Map')));
$radiusConfigValue = Mage::getStoreConfig('clarion_storelocator_general_setting/clarion_storelocator_display_setting/default_radius');
$fieldset->addField('radius', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Radius'),
'note' => Mage::helper('clarion_storelocator')->__('Radius is in miles. If kept blank then default configured radius will be used (System > Configuration > Store Locator)'),
'name' => 'radius',
'value' => $radiusConfigValue,
));
$fieldset->addField('latitude', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Latitude'),
'class' => 'validate-number',
'required' => true,
'name' => 'latitude',
));
$fieldset->addField('longitude', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Longitude'),
'class' => 'validate-number',
'required' => true,
'name' => 'longitude',
));
$zoomLevelConfigValue = Mage::getStoreConfig('clarion_storelocator_general_setting/clarion_storelocator_display_setting/zoom_level');
$fieldset->addField('zoom_level', 'text', array(
'label' => Mage::helper('clarion_storelocator')->__('Zoom Level '),
'note' => Mage::helper('clarion_storelocator')->__('If kept blank then default configured zoom level will be used (System > Configuration > Store Locator)'),
'name' => 'zoom_level',
'value' => $zoomLevelConfigValue,
));
$data = $model->getData();
if(!empty($data)) {
$form->setValues($data);
}
return parent::_prepareForm();
}
}**
Any help/suggestions would be much appreciated!
Thanks in advance,
Letitia
I also had same issue with this extension just find the xml file under your theme layout mainly named with clarion_storelocator.xml in this find google api path under script tag in line no #32 replace with src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"> under script tag
Remember to put your api key.
Enjoy Coding :)

Dynamically assign variable to jquery autocomplete query string

I'm coding form where a user can submit playlists. There is an 'artist' field and a 'song' field. Both are input type 'text'.
I'm attempting to use jquery's autocomplete functionality in both fields. Autocomplete results for the artist are functions of user-keystrokes and autocomplete results for songs are functions of user-keystrokes AND the value of the artist input field.
Autocomplete seems to work to populate a list of suggestions under the artist input field. search.php is the script reading the query string.
$(".artist").autocomplete("searchDev.php?type=artist&"+mydate.getTime(), {
width: 180,
selectFirst: false
});
In search.php, a var_export of $_GET in searchDev.php after an a keystroke yields
array (
'type' => 'artist',
1367531572213 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367531576911',
)
This is just fine.
However, when I try to supply a variable to the query string(here window.sartist) in autocomplete(for the song input field),
$(".song").autocomplete("search.php?type=song&sartist="+window.sartist+"&"+mydate.getTime(), {
width: 180,
selectFirst: false
});
sartist is not defined correctly, ie var_export($_GET) in search.php yields
array (
'type' => 'song',
'sartist' => '[object HTMLInputElement]',
1367525807081 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367526169637',
)
if a global variable, not attached to the window is used in place of window.sartist in the query string, var_export($_GET) yields
array (
'type' => 'song',
'sartist' => '',
1367528252501 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367528260585',
)
So I suspect that the query string cannot be modified after it is loaded. Does anyone have a viable workaround to allow variables to be dynamically assigned to the autocomplete query string? Basically I need the 'song' autocomplete suggestions contingent upon the value of the 'artist' field.
You just need to use a function as source to pass multiple dynamics params to the query :
$('.song').autocomplete({
var value = $(this).val();
source:function( request, response ) {
$.getJSON( "searchDev.php", {
term: value ,
data:{
type:"song",
myparam:$('#myparam').val()
}
}, response );
}
})
In this example, if current input .song have value 'high hope' and the #myparam field have value "pink" the query will looks like : searchDev.php?term=high+hope&type=song&myparam=pink
Fiddle (no real data source, just see the console) : http://jsfiddle.net/RfuBP/3/
Doc for the source option of jquery autocomplete : http://api.jqueryui.com/autocomplete/#option-source
PS : In your code, are you sure that window.sartist returns a value and not the element ?

Categories

Resources