I want to open the native datepicker of FirefoxOS on a click on a button.
By default, the native datepicker shows up when an input (date type obviously) has focus.
But how to do this with for a button ? Moreover, I don't like date inputs, because my app is in french and the format of the date displayed in a date input is not the french format.
I tested with a date input hidden with css. The click on the button triggers the focus on the input. But in this case the datepicker is not shown.
Please do not suggest me to use JQuery UI or other javascript datepickers. On mobile they are not very usuable and the best is native datepicker.
Thanks for your help
Firstly, if your question is about how to fire the native date picker with a button, you can do it by calling focus on it like:
<input id="datepicker" type="date">
<button onclick="document.getElementById('datepicker').focus()"></button>
If it's about hiding the date picker, but still using it with the button, you can put the opacity to 0 with CSS, but it will still be there, just not visible:
#datepicker {
opacity: 0;
}
Does that answer your question?
Related
I had a datepicker in which I am getting default system date during its Initialization.But I don't want default date.I need to get a Title(Select Date) similar to PikcerTitle in Xamarin.Forms. Anyone please help me to bring a solution for my problem.Thanks in advance.
You can add a label and datepicker instead of just datepicker and hide datepicker. Add a tap gesture to the label, on the tap focus the datepicker and bind the text of the label to the datepicker's date.
On page load add your desired text in the label.
In my Kendo grid I have a data set that includes a date. The date is filterable and includes the built-in date picker.
When you click the date picker and subsequently pick at date from the calendar pop-up, the cursor is inevitably below the original column pop-up menu that shows the date-picker icon and input field.
Therefore, the pop-up disappears before you can submit the filter query and requires you to go back into the column menu, select filter, where you will see the date that was previously chosen.
Then you can press submit and it will filter on the date.
This behavior is quite annoying and I was wondering how I could keep the original column menu pop-up displayed so the user can then click submit. As it stands, the only way to do this is to very quickly move the mouse back up into the original pop-up after clicking on a date!
I am having the exact same issue. All standard settings as OP mentioned.
Edit: **** SOLUTION ****
kendogrid filter menu closing on mouseleave
I have a form which is using DateTimePicker on one of the inputs. I would like the user to be able to select the date/time by using the buttons which KendoUI attaches to the right of the input field, however I don't want the user to free-type into the text field (to save me having to verify formatting or rubbish input).
It is possible to add readonly attribute to the input, either in HTML or by calling .readonly() method on the DateTimePicker object. This makes the text field un-editable, however it also prevents the click events on the date/time selectors from firing.
So, how do I prevent the user from being able to edit the textbox field manually?
Thanks in advance.
Yes, you can set the readonly attribute only of the input from which the datepicker was created:
<input id="datepicker">
<script>
$("#datepicker").kendoDatePicker().attr("readonly", true);
</script>
Here is a live demo: http://jsbin.com/uwayit/1/edit
i think i found a strange bug in jqGrid.
If you click on this link you can see a jqGrid with a pager. If you click on the '+' button you get the add form in which the 2 datepickers work as expected.
If you now click on this link you can see the very same table, and the very same add button. Anyway if you try to set the second date using tha datepicker you will notice that the focus moves back to the first input, opening the first datepicker.
The example does not work because it has the first field (Id) hidden, so the real first field is a datepicker. Moreover, the edit form is modal.
Last, if you click in this link the behaviour is correct even if the first field is a datepicker. The only thing i changed is the modal property (to false, before it was true).
However, i NEED to hide the Id field AND have a modal window, so i have to to get rid of this problem...
Can someone suggest a solution or an hint?
Thanks
PS: notice that if you set modal: false, you still get the black/transparent overlay like if the window is modal BUT it is not! If you click outisde the edit form it will be closed. This is not acceptable for my requirements.
try to set jqModal parameter into false
var editParams = {
modal: true,
jqModal:false,
... //other options you need
}
grid.editGridRow(row_id, editParams);
for more information see answer Oleg's analisys
I'm facing a problem that I can't understand. I'm using Kendo Grid with InCell edit and I have a DateTime field in my Model.
When the grid enters in edit mode, the calendar is shown, but the grid only saves the inputed value if I select the value from the calendar. If I input the field manually, the value is not saved and the cell is not marked has dirty.
If it helps, I'm using MVC with Razor sintax.
Tks in advance!
I've found a workaround in Kendo's forums:
By design, the DatePicker does not raise the change event when the value is set programmatically - it raises only if the date is modified by the end-user. In case you need to trigger the change event, you can use jQuery trigger().
For example:
var datePicker = $("#datepicker").data("kendoDatePicker");
datePicker.value("01/01/2001");
datePicker.trigger("change");
Reference:
http://www.kendoui.com/forums/ui/date-time-pickers/datepicker-change-event.aspx
So basically what I did was to force the change event manually.