Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
saturn-datepicker
Advanced tools
Material datepicker with range support
This is patched version of Material Datepicker for Angular with range selection support.
I created this repository and this package due to it takes a lot of time to contribute to material2 repository:
Issue #4763 in material2 repo from 2017-present.
Added option to switch off rangeHoverEffect
Fixed loading issue on es2015 targets
Updated to 8.2.0 material code
Inline usage of calendar. See demo. Thanks to @beyondsanity for this feature
Introducing footer component for calendar. See demo for example usage. Thanks @paullryan for this feature
Update to datepicker material 7.3.1
Select first date on close feature
Range selection have a preview now.
Merged #31
As easy as pie.
Installation: yarn add saturn-datepicker
or npm install saturn-datepicker
Import SatDatepickerModule
, SatNativeDateModule
and MatDatepickerModule
<mat-form-field>
<input matInput
placeholder="Choose a date"
[satDatepicker]="picker"
[value]="date">
<sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
<sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
</mat-form-field>
Add styles:
saturn-datepicker/bundle.css
@import '~saturn-datepicker/theming';
@include sat-datepicker-theme($theme); // material theme data structure https://material.angular.io/guide/theming#defining-a-custom-theme
export interface SatDatepickerRangeValue<D> {
begin: D | null;
end: D | null;
}
As same as for material, but with more code, just import constants from 'saturn-datepicker'.
Also you need to install @angular/material-moment-adapter
package.
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, SatDatepickerModule } from 'saturn-datepicker'
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter'
@NgModule({
imports: [
SatDatepickerModule,
],
providers: [
MyReportsService,
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
],
})
export class MyModule {
}
For advanced formatting, please look through material documentation.
Also you can see [#78](https://github.com/SaturnTeam/saturn-datepicker/issues/78) [#81](https://github.com/SaturnTeam/saturn-datepicker/issues/81) [#53](https://github.com/SaturnTeam/saturn-datepicker/issues/53)
orderPeriodLabel
option sort the label period views.
<mat-form-field>
<input matInput [satDatepicker]="resultPicker">
<sat-datepicker
#resultPicker
[rangeMode]="true"
orderPeriodLabel="month">
</sat-datepicker>
</mat-form-field>
closeAfterSelection
option enables or disables datepicker closing after date selections. By default the option is true
<mat-form-field>
<input matInput [satDatepicker]="resultPicker">
<sat-datepicker
#resultPicker
[rangeMode]="true"
[closeAfterSelection]="false">
</sat-datepicker>
</mat-form-field>
selectFirstDateOnClose
option enables or disables the selection of the first date when closing the datepicker before selecting another date.
By default the option is false
<mat-form-field>
<input matInput [satDatepicker]="resultPicker">
<sat-datepicker
#resultPicker
[rangeMode]="true"
[selectFirstDateOnClose]="true">
</sat-datepicker>
</mat-form-field>
rangeHoverEffect
option enables or disables the mouseover listener on days when the rangeMode parameter is used and is enabled.
By default the option is true
<mat-form-field>
<input matInput [satDatepicker]="resultPicker">
<sat-datepicker
#resultPicker
[rangeMode]="true"
[closeAfterSelection]="false"
[rangeHoverEffect]="false">
</sat-datepicker>
</mat-form-field>
Licence: MIT
FAQs
Material datepicker with range support ## What is this?
The npm package saturn-datepicker receives a total of 4,359 weekly downloads. As such, saturn-datepicker popularity was classified as popular.
We found that saturn-datepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.