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’ );
Related
I want create a ion-date time with three button : cancel , done and clear. so I custom in here:
Add button clear data ion-datetime
I want if date is chose I can click Clear in modal date picker to remove value same when click button Clear Data.
How I can do it?
Thank every one
I’m using :
I’ve added a custom button to a ionic-datetime
<ion-datetime
formControlName="myDateCustom"
[pickerOptions]="customPickerOption">
</ion-datetime>
and ts.
customPickerOption = {
buttons: [{
text: 'Clear',
handler: () => this.myForm.controls['myDateCustom'].setValue(null)
}]
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.
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');
});
I am trying to make a datepicker work. The datepicker pops up when you click a calendar icon right next to an input field. When a use clicks the icon, and selects a date, the input field should populate with the date. This works if i do not try to format the date, but as soon as i do, i get an
'Cannot read property "formatDate" of undefined'
The icon of a calendar has a class of '.calendar'. Here is my code for when they click that icon.
$('.calendar').datepicker({
format: 'mm/dd/yy',
startDate: '-1'
}).on('changeDate', function (ev) {
$(this).prev('input').val(
$.datepicker.formatDate('mm/dd/y', ev.date)
);
$(this).datepicker('hide');
});
As soon as it hits
$(this).prev('input').val(
$.datepicker.formatDate('mm/dd/y', ev.date)
);
It stops working. What am i doing wrong here?
If you just do $(this).prev('input').val(ev.date); it works perfect, but that format is wrong, and it will not go into my database.
Thank you in advance.
Here is my scenario:
I have a form, with a checkbox.
- When it is checked, I hide another <div> that has a termination date input field, which has a datepicker.
- When the checkbox is not checked, I want to display the the <div> with termination date field. User, clicks on the date, and selects one.
The problem I can't figure out: if after selecting the date, the user checks again the checkbox, how to reset the termination date field to nothing?
I placed the code on jsfiddle.
I already tried what seems like a million ways of doing it, and nothing seems to be working.
Any help with this, is greatly appreciated!!!
I gave it a shot:
http://jsfiddle.net/z8gEy/16/
I simply added after the hide method:
$("input[type=date][name$=TerminationDate]").val('');
var hdnFromDate = document.getElementById('FromDate').value;
if (hdnFromDate == '') {
var picker = new Pikaday({
field: document.getElementById('FromDate'),
toString(date, format) { // using moment
return moment(date).format('DD/MM/YYYY');
// return moment(date).format('YYYY/MM/DD');
},
});
}