Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jesterxl/jxl-paper-date-picker
Calendar and date picker for Polymer 1.x based on Material Design guidelines.
https://github.com/jesterxl/jxl-paper-date-picker
Last synced: 1 day ago
JSON representation
Calendar and date picker for Polymer 1.x based on Material Design guidelines.
- Host: GitHub
- URL: https://github.com/jesterxl/jxl-paper-date-picker
- Owner: JesterXL
- License: mit
- Created: 2015-09-16T12:31:58.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-09-17T15:37:20.000Z (about 9 years ago)
- Last Synced: 2024-11-09T06:53:14.559Z (7 days ago)
- Language: HTML
- Homepage:
- Size: 434 KB
- Stars: 4
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jxl-paper-date-picker
Calendar and date picker for Polymer 1.x based on [Material Design guidelines](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers).
## Date Picker & Date Field
# Instructions
1. run `bower install jxl-paper-date-picker --save`
2. import via ``
3. use via ``
To see demo, run `node server.js`
# Example
To use the date picker:
```html
```
To set the selected date, use a moment date:
```javascript
```
```javascript
this.$.customPicker.currentDate = moment('01/19/2014', 'MM DD YYYY');
```
To bind to a field:
```html
Selected Date: {{getPrettyDate(selectedDate)}}
```
```javascript
properties: {
selectedDate: null,
type: Date,
value: function(){return null;}
},
getPrettyDate: function(date)
{
if(moment.isMoment(date) === false)
{
return "???";
}
return date.format("dddd, MMMM Do YYYY");
},
```
# Contributors
##Features
Haven't done the year change yet.
##Performance
While she peforms fine, I'm not too happy about the CSS wrapping strategy, nor about the contants recreation of days when you switch months. I attempted to [draw everything dynamically](https://github.com/JesterXL/Starting-Strength-Polymer/blob/refactor-calendar/src/client/jxl-calendar.html), but determining whether you're creating things in shadow dom or light dom is consufing. I then tried a [simple refresh approach](https://github.com/JesterXL/Starting-Strength-Polymer/blob/manual-refactor-calendar/src/client/jxl-calendar.html) using static DOM, but ran into similiar problems. Open to ideas, improvements.
##calendar vs date-picker
Why 2 calendars? If you notice the Material Design video, the only way to 2 animate 2 calendars like that is if you actually have 2 calendars. I've done this in my Flash days, and you just cycle 2 components in and out. Haven't started on that yet, but y'all are welcome to dive deep into neon land if you wish.
##DevOps
Gruntfile is a work in process. I've got Vulcan working in another project. JSHint for now is the only really useful task.
# Changelog
v0.0.1 (9.16.2015)
- initial ``
- initial ``
- both basically work
- basic local server to see demo with optional BrowserSync support via `browser-sync start --proxy "localhost:9038" --files "*.html"`
- basic Grunt functionality, which for now, is just `grunt jshint`