Date dropdown field selection - javascript

I'm working on an application with dropdown field date selection.
Clicking Month will trigger Day dropdown field to re-arrange to available days
Clicking available days will caused the Time dropdown field to re-arrange to available time slots
Clicking the available time in the dropdown will trigger an application form display/open.
I use the below code to select Month instead of click and it failed to trigger the Day dropdown field to react for re-arrangement.
cy.xpath('//*[#id="AvailableMonths"]').find('option').then($elm => 
        $elm.get(2).setAttribute('selected', "selected"));
I want to click future month, day and time but i have no idea of how to approach it.
I have done some google search and most of the option were pointing to react-select-event and i have no idea of how to make use of it. Kindly help please.

I have managed to solve this issue with the below approach
cy.get('element option')
.eq(3)
.then(elm => cy.get('element')
.select(elm.val(), {force: true}))
Any other approaches are welcome pls.

Related

Disable redirection when selection (d&d) is on appointment

I'm working on a project where I'm using big calendar reactjs, in any place in the calendar if I click on slot or select zonetime it redirects me to another page.
but my objective is to make the redirection deactivate when I select a zonetime and this zone contains part of the appointment example if I select 9-10 and I have an appointment 9:45-10-15 I must deactivate the redirection same thing if I have an appointment 9:45-10:15 and I select 10:00-10:30am you should not do the redirection. and it is necessary that the slots where there is the appointment remain activated to make the redirection. that is to say the small part on the right side of the appointment(you can see the doc view day to better understand) must always be activated and also the other places in the calendar always remain to do the redirection.
here the link of doc BiG Calendar, you should change the view on day.
https://codesandbox.io/s/react-big-calendar-drag-and-drop-events-between-months-forked-bmyoy6?file=/src/index.js .
here the function responsible for the redirection. start and end are for select timezone
and the doctorId is the columns of the calenda.
any help would be appreciated.
handleSelectSlot({ start, end, doctorId }) {
if (doctorId) {
this.props.history.push(`${NEW_APPOINTMENT}`)}}

Is there any way to fill the empty week days cells(previous and next months) in mat-datepicker and mat-calendar

I'm setting a calendar to Help users to select dates, but i want to fill the empty cells at the start of the first week with the previous and next months
I'm using the Datepicker from Angular Material.
hrer is a picture link explains more :
https://i.imgur.com/cCDSBsH.png
According to their API, you can't.
You need to create your own custom calendar.

displaying specified div in order based on clicking dynamically displayed dates with jquery/javascript

Here is my code: http://js.do/jane-d0e/80399
I have predefined div's, each are going to contain different content and styles.
I want to have a user enter a start date, and then restrict the end date so they can choose up to 7 days. I have been having a problem implementing the date restriction, I try doing "+7d" for max Date but for some reason it doesn't limit it correctly, it is always showing more than the amount I specify.
So say the user chooses a date range, with 7 days total. The date range appears below. If the user clicks on the first date, the content within the first div is supposed to be displayed only. The next date that is clicked the content in the second div is displayed only, and so on. So div1 maps to first date.. div7 will map to 7th date if there is a seventh date. I thought of trying to do this with next() but this did not work, now when I run the code and select a date it opens the whole set of divs for each selected date rather than the single intended div.
What is the best way to go about achieving this?
Destroy "to" datepicker after "from" date selection to change "to" datepicker for a specific range and pass mindate, maxdate.
$("#to").datepicker('destroy');

eyecon robootstrap-datepicker - selecting all month

I wanted to ask, if eyecon robootstrap-datepicker allows to select all month on simple button click (all days of current month) ?
I don't see this option in API:
http://www.eyecon.ro/bootstrap-datepicker/
Basicly, i just want to add event to some element on page (inside of datepicker i will prepend some element, Select all month ).
And this is done, but now i dont know, what action should i do to select all days from current opened datepicker.
Thanks for help.

jquery ui dateinput alternative field

I am using jquery ui dateinput and i am showing the calendar when the user clicks a small image. In the calendar i have set the selectors to true, so it also shows months and years. What i want, is to pass the chosen date into a textbox as a value.
I did this so far.
$("img[id='CalIcon']").data("dateinput").onHide(function(e){
var dt = $("img[id='CalIcon']").data("dateinput").getValue('dd-mm-yyyy');
$('#relativeDOB').attr({value:dt});
});
The problem is that whatever year or month i am choosing is passing only the current. The day works fine.
Any ideas?
thanks

Categories

Resources