I need to have a "Today" button as in the image bellow, positioned somewhere in the red marked area (or somewhere else). I'm using material-ui v5 and I also tried to add prop showTodayButton but seems to do nothing...
The bug mentioned by bhugo313 has been fixed by now but the documentation isn't very clear on how to add the "Today" button.
You need to provide an actionBar object via the componentsProp:
import { DateTimePicker } from "#mui/x-date-pickers/DateTimePicker";
<DateTimePicker
/* ... other props */
componentsProps={{
actionBar: { actions: ["clear", "today", "cancel", "accept"] },
}}
/>
This is the bug of Material UI v5. There's pending PR for this bug and it's not merged yet. Since v5 is still in RC stage, I think we should wait this PR to be merged.
showTodayButton prop works well on mobile date picker, but not on desktop date picker.
Related
Using either Xamarin.Forms (for UWP), or pure UWP, How do I force the Date value binding to update as soon as a date-part is changed, without requiring the user clicks the "OK"/done/checkmark button?
<DatePicker Date="{Binding StartDate, Mode=TwoWay}" />
The DatePicker template allows you only to change how the control looks like when it is not in the picker mode, but rather when it displays the picked date: https://msdn.microsoft.com/en-us/library/windows/apps/mt299121.aspx?f=255&MSPPError=-2147217396
So basically you would have to make a new DatePicker from the scratch to achieve that.
In Adobe AEM, I have a CQ dialog (using Granite UI) that has a datepicker inside of it. It looks like this when viewed in the CQ dialog:
The problem occurs whenever I set a date, and save the contents of the dialog:
When I do this, I can't set the date property back to blank again. If I open the dialog and remove the date inside of this field and click save, the property still stays there.
This is an except of my cq dialog's content.xml file which contains the datepicker:
<startdate
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/datepicker"
displayedFormat="YYYY-MM-DD"
emptyText="YYYY-MM-DD"
fieldDescription="If limited by a start date, add a start date value. (YYYY-MM-DD)"
fieldLabel="Start Date"
name="./startdate"
storedFormat="YYYY-MM-DD"/>
Why doesn't it save the property when I set it to blank and how do I fix it?
---------EDIT----------
I found that even if I don't put the delete suffixes as #nateyolles places in his answer, the dialog does delete the dates when it is in full-screen mode. It still does not work when the cq dialog is NOT in full screen mode. Either way, I'm sure that this is a bug in AEM.
Use the Sling Post Servlet's Delete Suffix. See the Apache Sling doc.
<startdate
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/datepicker"
displayedFormat="YYYY-MM-DD"
emptyText="YYYY-MM-DD"
fieldDescription="If limited by a start date, add a start date value. (YYYY-MM-DD)"
fieldLabel="Start Date"
name="./startdate"
storedFormat="YYYY-MM-DD"/>
<startdateType
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/hidden"
name="./startdate#Delete"
value="this text is ignored"/>
As #nateyolles answer. You should open browser console and network tab when you submit the dialog in order to see any form's value that the dialog is transferring to server.
You can also use the date picker from coral ui : granite/ui/components/coral/foundation/form/datepicker
I've seen the issue with the old foundation components and the new coral ui one fixes that issue.
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I'm using Kendo UI and using declarative bindings to binda element on a form. It uses the combo box widget to search for a list of options. The widget is actually performing as expected, however the search is only requested when the value has changed (this makes sense). The issue I have is the change event is only firing when the user blurs the combo box (e.g. by clicking outside the input).
This is to be expected due to the DOM change event firing after blurring, however the Kendo UI docs state that by using the 'data-value-update' parameter you can specify the event to fire on 'keyup'.
Unfortunately I cannot get this to work, here is the combobox HTML
<input data-role='combobox' data-bind="value: comboBoxValue, events: { change: methodToDoSearch}" data-value-update="keyup" type="text" data-text-field='Text' data-value-field='Id' />
This is being created as part of a kendo ui template (although I have tested outside of the template so this should not make a difference)
Thanks in advance.
The data-value-update attribute is supported only for vanilla textboxes (<input type="text" />). Kendo ComboBox raises its change event only when it loses focus.
Specifically, the data-value-update is only meant to update the bound object the widget is applied to (when you enter something into the widget, the observable is updated with the value on the given event. In this case, keyup).
I.E., because the combobox widget can only be set to one of the combobox datasource values, it doesn't make sense for the observable to bind to a temporary non-combobox-value.
I haven't tried this, but what events can you bind to via the events binding? The Kendo demos show mouseover, click, etc. Perhaps try something like this:
<input data-role='combobox' data-bind="value: comboBoxValue, events: { change: methodToDoSearch, keyup: methodToDoSearch}" type="text" data-text-field='Text' data-value-field='Id' />
In general, what event do you want to fire on keyup? If you'd like to do some manual searching to change the datasource of the combobox on keyup, that's what I'd look in to.
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]