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>
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'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)
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
I want to set up Zebra datepicker plugin in a way that it has enabled all past dates up to certain specified date. I found out this stackoverflow post that explains how to do that if that border date is today. But, if the border date is lets say 1 month in the past or so, how should I define the "direction" option?
So basically I want to restrict date selection from the "beginning of time" up to some specified date.
Thank you
As you can see they described it in the documentation. Try out this code:
$('#datepicker-example5').Zebra_DatePicker({
// remember that the way you write down dates
// depends on the value of the "format" property!
direction: ['2012-08-01', '2012-08-12']
});
The example is listed in topic "Demos" (Sub-Topic 5) here: http://stefangabos.ro/jquery/zebra-datepicker/
I am using the angular UI bootstrap popup datepicker like the example here :
http://angular-ui.github.io/bootstrap/#/datepicker
When i combine this with the uiMask Directive ( http://angular-ui.github.io/ui-utils/) the values in the input get scrambled when i pick a date.
I suspect because of the difference in type on the angular model : datepicker wants JS Date object/ ui.mask wants (masked) string.
When the picked date gets formatted/parsed by uiMask, it goes wrong :-/
Is what i am trying to do even possible ?
kind regards, Tom.