I'm new for SAPUI5, I'm using plan calendar for assigning some schedule for employee.Though i'm able to do it but if i want to update already scheduled task then in the popup small calendar gets opened. In that calendar i want to provide validation for start date and end date as if user selects start date then automatically for end date calendar dates less than start date should get disabled.
Sharing screen shot of planning calendar and it's reference documentation.
Planning calendar documentation
Help will be appreciated.
Can't u use the 'change' event of sap.m.DatePicker? If the value changes, set the 'minDate' property of the datepicker.
Fragment
<DatePicker id="idStartDate" change="onChangeStartDate"/>
<DatePicker id="idEndDate" change="onChangeEndDate"/>
Controller - don't forget to define sap.ui.core.Fragment in controller definiton
// don't forget to define Fragment in controller
onChangeStartDate: function(){
var startDate = Fragment.byId("fragId, "idStartDate").getDateValue();
Fragment.byId("fragId, "idEndDate").setMinDate(startDate);
},
onChangeEndDate: function(){
var endDate = Fragment.byId("fragId, "idEndDate").getDateValue();
Fragment.byId("fragId, "idStartDate").setMaxDate(endDate);
}
Just use binding. I will assume your first input field is bound against {StartDate} and the second against {EndDate}
Then you can bind the second DatePickers minDate Property to {StartDate} like this:
<DatePicker dateValue="{StartDate}"/>
<DatePicker dateValue="{EndDate}" minDate="{StartDate}"/>
(BTW: you could use sap.ui.unified.Calendar for Date Range Selections: Explored Example)
Related
I want to create a date picker with options for start date and end date so the user can choose if he/she want to apply start date or end date.
I am currently implemented the following
current implementation
And when I change the date from the datepicker the options are gone.
error on current implementation
I am using https://www.daterangepicker.com/ library If there is another library it is welcome.enter image description here
This is what I want to create like
enter image description here
you can see it on if it is deleted https://ibb.co/1QvtjmS
I am using Full Calendar Vue. I want to set my validRange from my current time. Currently as per the docs i set it as a prop to my FullCalendar component this way.
:validRange="nowDate => {return {start: nowDate}}"
My calendar view is defaultView="timeGridWeek".
Thank you in advance!
I am using ng bootstrap datepicker to set up a calendar.
But my requirement is, instead of the calendar to display the current Month as it does. I need it to display the next Month..i.e January.
I read through the documentation and I can't seem to find a way to customize this.
Is there a way to do this ?
To change the default of the month being displayed ?
It's a basic datepicker :
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
Is there a way to set the calendar picker in Silverstripe to not be able to select dates that are in the past?
As far as I can tell it uses the jQuery DatePicker but I am unsure how to restrict the past dates.
DateField::create("Date","Date")
->setAttribute('placeholder','eg 2017-01-01')
->setConfig('showcalendar', true),
You can pass configuration options to the datepicker:
DateField::create("Date","Date")
->setConfig('showcalendar', true)
->setConfig('min', date('Y-m-d'))
->setDescription('')
->setAttribute('data-number-of-months', 3);
->setConfig('min', date('Y-m-d')) tells jQueryUI picker to use a minimal date (today). With data-attributes you can also pass other configuraton to the picker, in the above case it shows three months at once. This will be passed to datepicker config.
Note that the datepicker camel case config "numberOfMonths" has to be written with hyphens like 'data-number-of-months'.
See also datepicker configuration
Hi I have an element with class and ng-class attributes, ng-class contains the information of my element(an event created dynamically), i need to verify if event is created on correct date or day. This is how my event looks like on page
element(by.id('1993')).getAttribute('ng-class').then(function (ngClass) {
var date = new Date().getDate(); //to get today's date
expect(ngClass).toContain(date);
});