Develop Reference

Date dropdown field selection

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.

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.

Update bootstrap datetime widget to set date

I'm using the Bootstrap datetimepicker in one of our projects. It is a MVC application and it hides the date input by default and shows the bootstrap datetime picker.
The problem we have now is that we're not able to set the date that's set in the date field in the widget. It always loads today.
eg:
I load the form in the browser
I choose a date in the datetime picker
I submit the form with a error
The page is reloaded and the datepicker is set to today, the input value is the correct day and if I navigate to the date in the datepicker is shows up as selected.
I've read through the documentation and tried to use the update function and the setdate function but they didn't do a thing and also didn't return a error.
What I expect it to do is show the selected date if the input is filled.
Now I'm stuck.
edit:
I use a input type="text" on the page with a classname datePickerInline.
On that class there's a css style that hides the input and the following script is present:
/* Document Ready Inits */
$(function () {
initDatePickers();
});
/* Bindings */
function initDatePickers() {
$('.datePickerInline').datetimepicker({
inline: true,
keepOpen: true,
debug: true,
locale: 'nl'
});
}
The input can be prefilled with a date. That works like a charm. If I for example get $('.datePickerInline').val() and try to add setDate in the datetimepicker method it doesn't work. I cant get .update() to work. It errors out all the time.
The stupid thing is that the date is set correctly but the widget wont "scroll" to the correct page...

Bootstrap datepicker's view is not updating when trying to setDate from JavaScript

I am using Bootstrap Datepicker for choosing dates multiple times.
I am trying to do like, if user select date of first datepicker then second datepicker should also get selected automatically.
I got success to do so using...
$('#firstDatePicker').on('changeDate', function(e) {
if (e.date) {
$("#secondDatePicker").datepicker("update", e.date);
console.log(e.date,'changed');
}
});
This is working properly. But problem is, when I am sending data from another page to this page with the help of cookies and after getting data from cookies I am updating both datepicker (firstDatePicker, secondDatePicker) like this...
FIRST TRY
$("#firstDatePicker").data('datepicker').setDate(moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").data('datepicker').setDate(moment(obj.date_and_time,'DD/MM/YYYY')._d);
SECOND TRY
$("#firstDatePicker").datepicker('setDate',moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").datepicker('setDate',moment(obj.date_and_time,'DD/MM/YYYY')._d);
THIRD TRY
$("#firstDatePicker").datepicker('update',moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").datepicker('update',moment(obj.date_and_time,'DD/MM/YYYY')._d);
above mentioned all try are working and I have also tried to get date from datepicker using $("#firstDatePicker").datepicker('getDate');. I am getting the date also what I have set programmatically but datepicker's view remain same as like nothing happened.
I have used moment.js to convert the date from a JSON object that is 'obj' which is coming in dd-mm-yyyy format so please don't get confused here these all are working even I am able to see the console of $('#firstDatePicker').on('changeDate') but the problem is with view which is not showing the date what is being set.
https://jsfiddle.net/devqualwebs/5gvn5w1y/9/

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.