Package Exports

saturn-datepicker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (saturn-datepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Saturn datepicker

Material datepicker with range support

What is this?

This is a based on Material source code implementation of Material Datepicker for Angular. I created this repository and this package due to it takes a lot of time to contribute to material2 repository. Issue in material2 repo. Changes made by me. Material date range picker

Advantages

Dates range selecting in datepicker
Have special attribute to turn on range mode on datepicker
Value managing as easy as it in MatDatepicker
You can use all attributes: min, max, formControl and others
Supports input from keyboard
Supports keyboard handling

Disadvantages

I use the same module and template names as it in native material datepicker. I do this, because I hope I'll push my code to material2 repository
Requires manual styles insertions

It's awesome, but how to use it?

As easy as pie. Installation: yarn add saturn-datepicker or npm install saturn-datepicker

  <mat-form-field>
    <input matInput [matDatepicker]="resultPicker">
    <mat-datepicker
        #resultPicker
        [rangeMode]="true">
    </mat-datepicker>

I/O value have this interface:

export interface MatDatePickerRangeValue<D> {
  begin: D | null;
  end: D | null;
}

Don't forget import the module from right place!

import { MatDatepickerModule } from 'saturn-datepicker'

And finally, add styles somewhere:

:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-semi-selected),
.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-semi-selected),
.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-semi-selected) {
  background-color: rgba(0, 0, 0, 0.04); }

:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-semi-selected,
.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-semi-selected,
.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-semi-selected {
  background-color: #3f51b5;
  color: white; }

.mat-calendar-body-selected {
  background-color: #3f51b5;
  color: white; }

.mat-calendar-body-begin-range:not(.mat-calendar-body-end-range) {
  border-radius: 100% 0 0 100%;
  background-color: #e8eaf6; }

.mat-calendar-body-end-range:not(.mat-calendar-body-begin-range) {
  border-radius: 0 100% 100% 0;
  background-color: #e8eaf6; }

.mat-calendar-body > tr .mat-calendar-cell-semi-selected ~ .mat-calendar-cell-semi-selected {
  border-radius: 0; }

.mat-calendar-cell-semi-selected {
  background-color: #e8eaf6; }

I found a bug what to do?

Create issue. But before, please be sure it happens due to range datepicker feature.

Licence: MIT

A little note for myself

npm run packagr
(cd dist ; npm pack)
yarn install range-0.0.1.tgz