Skip to content

Commit

Permalink
🐨 new update for more optimized datepicker with three added features
Browse files Browse the repository at this point in the history
  • Loading branch information
motss committed Jan 17, 2016
1 parent 95ccd75 commit 57bb79b
Show file tree
Hide file tree
Showing 10 changed files with 908 additions and 1,153 deletions.
16 changes: 7 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ See the [component page](http://motss.github.io/jv-datepicker/components/jv-date

An custom Polymer element built from scratch to provide a datepicker based on Google's Material Design that is more compelling and rich with features.

### Update (v2.1.0)
Three new features have been added to the element:
- `minDate` (dates that are smaller than the predefined `minDate` will be disabled)
- `maxDate` (dates that are larger than the predefined `maxDate` will be disabled)
- `showLongDate` (to show long date instead of short date. Eg. Fri, May 12 2017)

Example:

<jv-datepicker><jv-datepicker>
Expand All @@ -25,15 +31,7 @@ Example:
`jv-datepicker` provides a regular datepicker element.
While `jv-datepicker-dialog` has a `jv-datepicker` being wrapped inside a dialog.

## Event handling
`jv-datepicker` or `jv-datepicker-dialog` will fire an event `format-date` whenever a date is being selected via user interaction and it is one of the ways which user can make use of to retrieve the value of the selected date.

Example:

<jv-datepicker on-format-date="{{selectedDate}}"></jv-datepicker>
<jv-datepicker-dialog modal on-format-date="{{selectedDate}}"></jv-datepicker-dialog>

## Generating your own boilerplate code of the compounds
## (Coming soon!) Generating your own boilerplate code of the compounds
At the end of the demo, there is a section where user can play around with to generate your own boilerplate code with the attributes provided.


Expand Down
27 changes: 15 additions & 12 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "jv-datepicker",
"version": "2.0.1",
"version": "2.1.0",
"authors": [
"motss <[email protected]>"
],
Expand Down Expand Up @@ -28,18 +28,21 @@
"README.md"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.3",
"iron-media-query": "PolymerElements/iron-media-query#~1.0.2",
"neon-animation": "PolymerElements/neon-animation#~1.0.6",
"paper-checkbox": "PolymerElements/paper-checkbox#~1.0.10",
"paper-dialog": "PolymerElements/paper-dialog#~1.0.1",
"paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
"iron-list": "PolymerElements/iron-list#~1.1.5",
"paper-slider": "PolymerElements/paper-slider#~1.0.7",
"test-fixture": "PolymerElements/test-fixture#~1.0.1",
"iron-test-helpers": "PolymerElements/iron-test-helpers#~1.0.6"
"polymer": "Polymer/polymer#^1.2.0",
"iron-list": "PolymerElements/iron-list#~1.1.7",
"iron-selector": "PolymerElements/iron-selector#~1.0.8",
"neon-animation": "PolymerElements/neon-animation#~1.0.9",
"paper-icon-button": "PolymerElements/paper-icon-button#~1.0.6"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#~1.0.3",
"iron-label": "PolymerElements/iron-label#~1.0.1",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#~1.0.1",
"paper-button": "PolymerElements/paper-button#~1.0.11",
"paper-checkbox": "PolymerElements/paper-checkbox#~1.1.0",
"paper-dialog": "PolymerElements/paper-dialog#~1.0.3",
"paper-input": "PolymerElements/paper-input#~1.1.4",
"web-component-tester": "^3.4.0"
}
}
6 changes: 3 additions & 3 deletions datepicker-slide-from-left-animation.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@
<script>
Polymer({
is: 'datepicker-slide-from-left-animation',

behaviors: [
Polymer.NeonAnimationBehavior
],

configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
Expand All @@ -32,9 +34,7 @@
}
this._effect = new KeyframeEffect(node, [
{offset: 0.0, 'transform': 'translateX(-100%)', 'opacity': 0},
{offset: 0.2, 'transform': 'translateX(-80%)', 'opacity': 0},
{offset: 0.4, 'transform': 'translateX(-60%)', 'opacity': 0},
{offset: 0.6, 'transform': 'translateX(-40%)', 'opacity': 0},
{offset: 0.50, 'transform': 'translateX(-40%)', 'opacity': 0},
{offset: 0.8, 'transform': 'translateX(-20%)', 'opacity': 0.6},
{offset: 1.0, 'transform': 'none', 'opacity': 1},
], this.timingFromConfig(config));
Expand Down
8 changes: 3 additions & 5 deletions datepicker-slide-from-right-animation.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
<link rel="import" href="../neon-animation/web-animations.html">

<!--
`<datepicker-slide-from-left-animation>` animates the transform of an element from
`<datepicker-slide-from-right-animation>` animates the transform of an element from
`translateX(100%)` to `none` and animates opacity from 0 to 1.
The `transformOrigin` defaults to `0 50%`.
Configuration:
```
{
name: 'datepicker-slide-from-left-animation',
name: 'datepicker-slide-from-right-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
Expand All @@ -32,9 +32,7 @@
}
this._effect = new KeyframeEffect(node, [
{offset: 0.0, 'transform': 'translateX(100%)', 'opacity': 0},
{offset: 0.2, 'transform': 'translateX(80%)', 'opacity': 0},
{offset: 0.4, 'transform': 'translateX(60%)', 'opacity': 0},
{offset: 0.6, 'transform': 'translateX(40%)', 'opacity': 0},
{offset: 0.50, 'transform': 'translateX(40%)', 'opacity': 0},
{offset: 0.8, 'transform': 'translateX(20%)', 'opacity': 0.6},
{offset: 1.0, 'transform': 'none', 'opacity': 1},
], this.timingFromConfig(config));
Expand Down
8 changes: 5 additions & 3 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>jv-datepicker demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../../paper-slider/paper-slider.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../../neon-animation/animations/fade-out-animation.html">

<!-- <link rel="import" href="../../paper-styles/paper-styles.html"> -->

<link rel="import" href="../jv-datepicker-dialog.html">
<style is="custom-style">
:root {
Expand Down Expand Up @@ -113,7 +115,7 @@
</style>
</head>
<body unresolved>
<template is="dom-bind" id="datepicker">
<template is="dom-bind" id="datepicker" strip-whitespace>
<div class="horizontal-section-container">
<div>
<h4>Simple Styled</h4>
Expand Down
98 changes: 0 additions & 98 deletions jv-datepicker-dialog-theme.html

This file was deleted.

119 changes: 57 additions & 62 deletions jv-datepicker-dialog.html
Original file line number Diff line number Diff line change
@@ -1,81 +1,76 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="jv-datepicker.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">

<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="jv-datepicker-dialog-theme.html">

<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">

<dom-module id="jv-datepicker-dialog">
<template strip-whitespace>
<style include="jv-datepicker-dialog-theme"></style>
<style>
:host {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;

<!-- Main codes starts here -->
<div class="container layout vertical flex-auto">
<!-- jv-datepicker's code -->
<jv-datepicker class="flex-auto layout vertical content"
first-day-of-week="{{firstDayOfWeek}}"
disable-days="{{disableDays}}"
date-format="{{dateFormat}}"
bind-date="{{_dateOnHold}}"></jv-datepicker>
display: block;
}
</style>

<!-- Dialog buttons -->
<div id="buttonContainer" class="buttons layout horizontal">
<jv-datepicker class="no-padding" first-day-of-week="[[firstDayOfWeek]]" disable-days="[[disableDays]]" min-date="[[minDate]]" max-date="[[maxDate]]" format="format" date="{{date}}" show-long-date="[[showLongDate]]">
<div class="buttons">
<paper-button dialog-dismiss>cancel</paper-button>
<paper-button dialog-confirm autofocus on-tap="updateBindDate">ok</paper-button>
<paper-button dialog-confirm>ok</paper-button>
</div>
</div>
</jv-datepicker>
</template>

<script>
(function() {
Polymer({
is: 'jv-datepicker-dialog',

properties: {
firstDayOfWeek: Number,
disableDays: Array,
dateFormat: String,
bindDate: {
type: String,
notify: true
},
_dateOnHold: String
},
Polymer({
is: 'jv-datepicker-dialog',

behaviors: [
Polymer.PaperDialogBehavior,
Polymer.NeonAnimationRunnerBehavior
],

listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_renderOpened: function() {
if (this.withBackdrop) {
this.backdropElement.open();
}
this.playAnimation('entry');
},
_renderClosed: function() {
if (this.withBackdrop) {
this.backdropElement.close();
}
this.playAnimation('exit');
},
_onNeonAnimationFinish: function() {
if (this.opened) {
this._finishRenderOpened();
} else {
this._finishRenderClosed();
}
properties: {
firstDayOfWeek: Number,
disableDays: Array,
minDate: String,
maxDate: String,
format: String,
date: {
type: String,
notify: true
},
showLongDate: Boolean,
},

updateBindDate: function(ev) {
this.set('bindDate', this._dateOnHold);
this.fire('format-date', {date: this._dateOnHold});
behaviors: [
Polymer.PaperDialogBehavior,
Polymer.NeonAnimationRunnerBehavior
],
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_renderOpened: function() {
if (this.withBackdrop) {
this.backdropElement.open();
}
});
})();
this.playAnimation('entry');
},
_renderClosed: function() {
if (this.withBackdrop) {
this.backdropElement.close();
}
this.playAnimation('exit');
},
_onNeonAnimationFinish: function() {
if (this.opened) {
this._finishRenderOpened();
} else {
this._finishRenderClosed();
}
},

});
</script>
</dom-module>
9 changes: 9 additions & 0 deletions jv-datepicker-icons.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg size="24" name="icons">
<svg><defs>
<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></g>
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></g>
</defs></svg>
</iron-iconset-svg>
Loading

0 comments on commit 57bb79b

Please sign in to comment.