We Keep Coding

How to add "CLEAR" button to IonDateTime?

The IonicDateTime component allows me to save or cancel the date picked. However, I want to be able to clear the value chosen.
I've looked for solutions and one of them was to use pickerOptions, but this overrides the existing buttons that I still need and I'm not certain how I can create the cancel button anyway or reproduce the existing save/cancel buttons.
Here's my code. FYI I'm using Ionic 4 with React.
<IonItem>
<IonLabel position="stacked">End date</IonLabel>
<IonDatetime id="enddate" name="enddate"></IonDatetime>
</IonItem>

I have been searching for this as well and found the below:
<ion-datetime
formControlName="myDateCustom"
[pickerOptions]="customPickerOption"></ion-datetime>
and then in the TS:
customPickerOption = {
buttons: [{
text: 'Clear',
handler: () => this.myForm.controls['myDateCustom'].setValue(null)}]
Taken from the below link:
https://javascriptio.com/view/1360708/add-button-clear-value-ion-datetime-in-ionic

FullCalendar - changeView not resetting onclick

I am trying to change the view of a calendar, and show a specific date range, based on some fields content.
The date format from inside these 2 fields are like this : 2018-05-05
Here's my code:
$('#checkRange').on('click', function () {
$('#calendar').fullCalendar('changeView', 'list', {
start: $('#firstDate').val(),
end: $('#endDate').val()
});
});
So basically, when I click on the "checkRange" button, I want the calendar to switch the view to the list view, and change the "start" and "end" options to the value inside the "firstDate" field, and "endDate" field.
It works fine the first time the page loads, but it looks like once the "start" and "end" options are set, even if I change the content of the "firstDate" and "endDate" fields, and click the "checkRange" button again, it will not update the view.
Any help would be highly appreciated.
Thanks!

Try this: https://fullcalendar.io/docs/v1/rerenderEvents
$("selector").fullCalendar( ‘rerenderEvents’ );
or https://fullcalendar.io/docs/v1/refetchEvents
$("selector").fullCalendar( ‘refetchEvents’ );

Show Jquery Date time picker onclick

I am using a ASP.NET GRIDVIEW. The column I am interested in is the "CHECKED IN" column that contains a checkbox and a label.
Grid View Image
The grid can bring back many lines of data from the database:
Columns of grid
Here's what I need to do:
When the 'Checked IN' checkbox is clicked. I would like the DataTime picker to appear.
[Checkbox is checked and Datatime picker appears][3]
checked in Checkbox
2. When the user has selected a date and time, I would like the value to appear in the label next to the Checked in checkbox.
DateTime to show only when it has been selected.
[Label is updated][4]
Hope this makes sense?
The only issue is that the GridView creates itself dynamically.

Thanks for your message.
I did resolve this, however I slightly changed what I was doing.
Here's my code...
$(".CheckOut").each(function () {
$(this).datetimepicker({
dateFormat: 'dd/mm/yy',
onClose: function (selectedDateTime) {
return Validate(this, this.id);
}
});
});
This code is exactly what I needed for the date/time picker to work within a GridView.

Update bootstrap datetimepicker after every step/click

I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?

Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});

JavaScript hide element function

I have a form where the user can select a generic auto-population based on checking a radio button. When the user checks the auto-populate radio button, the fields are auto populated with the data and then the fields become disabled.
In this first part of the function, I pass the auto-filled data:
$('#myOptions').click(function()
$('#value1').val("Auto-filled data");
$('#Value2').val("Auto-filled data");
$('#Value3').val("Auto-filled data");
In this second part, I am disabling the html inputs
// now i am disabling the html inputs:
$('#Value4').prop("disabled", true);
$('#Value5').prop("disabled", true);
$('#value6').prop("disabled", true);
Suppose I have another field with an ID of "Value7" in the form, that I would like to hide from the user interface as part of this function.
How can I hide the "Value7" input upon function triggering? I appreciate the help, I am very new to JavaScript, though I find it very exciting!

Using jquery:
To hide
jQuery('#Value7').hide() or jQuery('#Value7').css("display","none")
To show the element back
jQuery('#Value7').show() or jQuery('#Value7').css("display","block")
or pure js:
javascript hide/show element

Try this javascript:
if you want disable:
document.getElementById('#Value7').setAttribute("disabled","disabled");
if you want enable:
document.getElementById('#Value7').removeAttribute('disabled');
if you want to hide :
document.getElementById('#Value7').css("display","none");
if you want to show:
document.getElementById('#Value7').css("display","block");

I am not getting what are you trying to ask actualy .
Let me know if this helps -
$("Value7").hide()