I'm working on a fullcalendar project.
When I click on a day of my calendar it appeared a modal where you put the name of your event, the start date and end date.
The input for start and end date is a datetime-local and I was looking for a way that when you click on a day and the modal show up in my start input is already visualize the day.
This is my modal and, for example, when I click on 4th of April it appeared directly like this, without me having to put it manually: like this ->example.
I found online this solution to get the clicked date:
dayClick: function(date, jsEvent, view, resourceObj) {
alert(date.format('DD/MM/YYYY 08:00')); //format i decide
},
But i dont know how to applied to my code to have it as input and not alert
I found also this way, I like it better because I can add the hour I want:
var startDateSelected = moment(event.startStr).format("DD-MM-YYYY 08:00:00");
var endDateSelected = moment(event.endStr).format("DD-MM-YYYY 17:30:00");
but still havent found a way to applied to my input datelocal-time
At the end I found this solution:
select: function select(event, date) {
$('#addNewEvent').modal('show');
$('#calendar').fullCalendar('refetchEvents',event._id);
var now = new Date(event);
document.getElementById('starts').value = now.toISOString().slice(0,16);
document.getElementById('ends').value = now.toISOString().slice(0,16);
}
This is the function that open my modal and fecth the events from my database by ID
And the ID mention in getElementById are from my two datetime-local input
I hope someone can find it useful.
It refered to Fullcalendar v3 because that the version the template I'm using have
Related
I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar, but I don't know how to select dates.
Here is my code
Cucumber step
And user selects dates from "2020-06-16" to "2020-06-26"
BookingStep
When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug(); });
Booking page
class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')}; }export default new BookingPage();
Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.
I battled this for a while and came up with a solution that works for me, I hope it works for you also.
First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[#id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID
$('//*[#id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[#id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');
Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink
Now you run this code:
browser.execute(() => document.querySelector('#cancelLink').click());
Which will then close the datepicker object so that you can proceed with your testing.
Here is my actual code:
class DataSearchSortAndDateRangePage {
get startDate() { return $('//
[#id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input'); }
setStartDate(date) {
this.startDate.waitForClickable( { timeout: browser.config.timeOutValue } );
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this helps out =)
I'm using the date picker from eonasdan. I am trying to add three months to the second calendar as soon as I pick a date from the first. I have tried using the moment().add(3,'M') method, but it doesn't work as I am expecting it to.
I'm just trying to do two simple, interrelated, tasks:
Add three months to the second calendar's minDate
Display that date in the calendar's <input> field. The JS for the calendars is below.
$('#start-date').datetimepicker({
useCurrent:false,format: 'D-M-YYYY'
});
$("#start-date").on("dp.change", function (e) {
var probDate = new Date(e.date().add(3,'M'));
$('#probation-date').data("DateTimePicker").minDate(e.date);
});
$("#end-date").on("dp.change", function (e) {
$('#start-date').data("DateTimePicker").maxDate(e.date);
});
I tried to made a JSFiddle, but there's no way to include external files via a CDN for this widget. It's MomentJS knowledge that I lack here.
I am using pickadate for date-picking. Say currently we are in April and I navigate to June or select a date in june and then clear the date. Now if i re-open the datepicker it shows june and not the current month i.e. April.
I have the datepicker initialized as
lt dpInit = $('.datepicker').pickadate(optionsObject);
I tried to do
let dp = $('.datepicker').pickadate().pickadate('picker');
dp.stop().start();
or
dp.stop();
dp.start();
This leads to datepicker being stopped but doesn't start back. I thought the dpInit and dp are two separate instances so probably it happens so and I did
lt dpInitPick = $('.datepicker').pickadate(optionsObject).pickadate('picker');
dpInitPick.stop().start();
Again same result.
I tried to do this.stop().start() inside the event in optionsObject still the same result i.e.
optionsObject = {
onOpen: function() {
this.stop().start(); //same result of datepicker stopping but not starting again.
}
}
instead of onOpen I tried onRender, onClose etc too.
When I say it doesn't start I mean clicking on the datepicker input element does not open the date-picker anymore.
How do I reset the datepicker to point to current date?
Ah figured a solution,
I ended up using
this.set('select', new Date());
this.clear();
in order to make datepicker point to current date
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');
});
Is there a way to set the calendar extender, or a method I can call so it always displays the month containing the selected date when the target textbox is clicked? I have found the method to set the selected date, but this does not automatically bring the month of the selected date into view.
You can handle the onClientShown event:
<cc1:calendarextender ID="Calendarextender1"
OnClientShown="clientShown" ...
For example:
<script type="text/javascript">
function clientShown(sender, args) {
var extender= $find('Calendarextender1');
sender.set_visibleDate(extender._selectedDate);
// the following is just to show you some other interesting methods
//sender.set_todaysDate(extender._selectedDate);
//sender.set_selectedDate(extender._selectedDate);
}
</script>
I'm afraid there's no documentation, so try them out.