I have a problem with this datepicker :http://bootstrap-datepicker.readthedocs.org/en/stable/index.html
I work with symfony framework, on last version.
I do all css/js file inclusion, i add a class on my field for js, and i use this configuration :
$('.datepick').datepicker({
language: "fr",
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true
});
So in regular step, i can select a date with my datepicker.
My problem is :
when i don't select a date in form (optionnal field), the current date is always saved on field.
I just want to remove this behaviour : when no date is selected, no date is persist in entity. I don't have any idea for solve this.
Anyone have an idea ?
--
Thx for you help
my field in formtype is :
$builder->add('dateNaissance', 'birthday', array(
'label' => 'form.tiers.dateNaissance', 'translation_domain' => 'GBPCoreBundle', 'required' => false,
'widget' => 'single_text', 'format' => 'dd/MM/yyyy', 'input' => 'datetime', 'attr' => array('class' => 'datepick')
))
My view is :
{{ form_row(form.dateNaissance) }}
My entity is :
/**
* #var \Date
*
* #ORM\Column(name="dateNaissance", type="date", nullable=true)
* #Assert\Date(message="La date de naissance {{ value }} doit être un type {{ type }} valide.")
*/
private $dateNaissance;
and my consctructor is empty, i didn't set default value
My controller is very basic, i don't act on this field
First, verify your entity date field have nullable option like nullable=true
Then, If the problem persists, and you can't find any option to do this trick, you can use Javascript.
On document load, set the datepicker value with an empty string, using jQuery it's like :
$(document).ready(function(){
$('#dateField').val('');
});
Now, the default value is empty, and if value change (user choose a date), you save the date, else you save NULL or ''
Related
I use KeyboardTimePicker material ui, and fetch time of service like "10:20"
How can I set this time ("10:20") as default?
Currently, when I set this time, I get the Invalid Time Format
:
const timeDefaultProps = {
label: props.label,
variant: "inline",
inputVariant: "outlined",
ampm: false,
showTodayButton: true,
format: "HH:mm",
value: props.value , ///->props.value is "10:20"
onChange: (date) => props.onChange(moment(date).format("HH:mm")),
onBlur: (event) => {
setBlured(false);
},
onFocus: () => {
setBlured(true);
},
keyboardIcon: (
<TimeIcon
className={clsx(
classes.calendarIcon,
classes.calendarIconKeyboardPicker
)}
/>
),
};
<KeyboardTimePicker {...timeDefaultProps} />
The documentation (assuming this is the correct link: https://material-ui-pickers.dev/api/KeyboardTimePicker#:~:text=value%20*-,ParsableDate,-Picker%20value) seems to suggest that it requires a ParsableDate. I'd guess a date object will do the trick.
In the examples there also appears to be a placeholder prop, although I couldn't see that in the documentation linked above. This could potentially also be what you're looking for (if you only want to use it as the starting value before a user has chosen anything).
in my symfony 4 project I use Select2 for some of my fields: https://select2.org/
So, I've this :
So, in my form, I've :
->add('user', EntityType::class, [
'class' => User::class,
'label' => 'Agent',
'placeholder' => "Agent",
'choice_label' => 'fullName',
'choice_value' => 'fullName',
'attr' => [
'class' => 'js-example-basic-single',
]
])
And in my view :
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr'
});
</script>
I would like to use bootstrap 4 with this field, so that it has the same design as the other fields.
So, I found this link : https://github.com/ttskch/select2-bootstrap4-theme
Is it a good link ?
It's the first time I use npm, so I executed the following command :
npm install #ttskch/select2-bootstrap4-theme
But I dont see where are the css links, to import them in my view
You just have to pass correct theme name in select2 field definition.
So in your case it will look like this:
<script>
$('.js-example-basic-single').select2({
placeholder: 'Choisissez un agent',
allowClear: true,
language: 'fr',
theme: 'bootstrap4',
});
</script>
If you're using webpack as official documentation suggest, you should add following lines:
assets/js/app.js
require('select2');
assets/css/app.scss:
#import "~select2-bootstrap4-theme/dist/select2-bootstrap4.min.css";
I need to add the keyBinds for delete and enter button properties conditionally.
I tried using the Object.assign() method, but not sure how to get hold of datetimepicker object associated with my input control, and how do I enable or disable keyBinds conditionally.
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
Object.assign($inputCtrl.data("DateTimePicker"), bConditionalDeleteTest && {keyBinds: {'delete': null}});
if we initialize this object statically, it would be
$('.inputCtrl').datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true,
keyBinds: {'delete': null} /*this would disable the default Delete key behavior of the control.*/
});
You can simply use keyBinds function.
keyBinds()
Returns a string variable with the currently set options.keyBinds option.
keyBinds(object)
Takes an object value.
Allows for several keyBinding functions to be specified for ease of access or accessibility. See the options page for defaults.
You can have something like:
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
if( bConditionalDeleteTest ){
$inputCtrl.data("DateTimePicker").keyBinds({'delete': null});
}
I'm using Select2 Plugin in my asp.net mvc 5 application. according to the documentation
The placeholder option allows you to pass in a data object instead of just a string if you need more flexibility. The id of the data object should match the value of the placeholder option.
I have done exactly that, but the placeholder is still not showing up.
Code:
model.Step6.Titles.Insert(0, new SelectListItem() { Text = "Select a Title", Value = "0", Selected = true });
#Html.DropDownListFor(model => model.Step6.Title, Model.Step6.Titles, new { id="teamtitle", #style = "width: 100%;"})
$("select").select2({
allowClear: true,
placeholder: {
id: "0",
placeholder: "Select an Title"
}
})
can someone show me what I'm doing wrong here?
I think placeholder is a string. Not an object
https://select2.github.io/examples.html#placeholders
$("select").select2({
allowClear: true,
placeholder:"Select an Title"
})
Error is placeholder: "Select an Title".It should be-
$("select").select2({
allowClear: true,
placeholder: {
id: "0",
text: "Select an Title" //Should be text not placeholder
}
})
https://select2.org/placeholders
I write here because I've spent a lot of time figuring out what was wrong in my code.
I've got the placeholder object not showing too (whereas a placeholder string shows correctly). The point is that the empty option element needs to match the value to the placeholder id.
I mean, if you put a first empty option like the following:
<option></option>
it won't match with a placeholder declared as
placeholder : { id:'0', text:'Please select...'}
and it won't display anything.
Instead you should write:
<option value="0"></option>
Note if multi-select is used select2 seems to require the placeholder as an object. See https://codepen.io/louking/pen/BGMvRP?# for generic examples using yadcf (sorry for the extra complexity, but I believe yadcf passes select_type_options directly to select2). (Excerpt below)
{
column_number:2,
select_type: 'select2',
filter_type: 'multi_select',
select_type_options:
{
placeholder: {
id: -1,
text: 'pick col2'
},
width: '200px',
allowClear: true,
}
},
I am working on a simple grid form which has a combobox and datasource as proxy (like http://goo.gl/2fxP8). The combobox loads properly but when I try to select one of the list items the gridform closes and combobox doesn't close. Can anyone help me out ?
I am planning to extend the combobox onselect function as well so that once the list item is chosen other fields will be loaded dynamically.
searchField = new Ext.form.ComboBox({
store: ds,
name : 'search',
id:'search',
fieldLabel : 'Search',
displayField:'title',
typeAhead: false,
loadingText: 'Searching...',
pageSize:10,
minChars:2,
triggerAction: 'all',
width: 200,
tpl: resTpl,
itemSelector: 'div.search-item',
onSelect: function(record){
/* Set Values to other fields here */
}
}),
The code for saving is :
Ext.Ajax.request
({
url:"some url",
scope:this,
params:
{
},
success: function(objServerResponse)
{
eval("var resultSet = " +objServerResponse.responseText);
if(resultSet.isOk)
{
this.collapse();
}
else
{
}
}
});
i think the problem is you are OVERIDE the onSelect function..
take look here (try to find onSelect), onSelect method is private...
and as you can see, inside onSelect there is collapse function to call by default..
so, if you are overide onSelect.. your combo never collapse by default..
you have to do that manually.. like what kiran said...
and my question is, why did you overide the onSelect function ??..
if you need to do something When the combo was selected, why don't you set it as listeners ??
try change your code :
onSelect: function(record){
/* Set Values to other fields here */
}
with this one :
listeners : {
"select" : function(combo,data,idx){
console.info(data);
}
}