Need help with material-date-picker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mobinni
202 Stars 56 Forks MIT License 125 Commits 4 Opened issues

Description

A simple material datepicker

Services available

!
?

Need anything else?

Contributors list

# 289,706
helmet
Securit...
CSS
HTML
15 commits
# 50,693
Telegra...
bot-fra...
gzip
Express
4 commits
# 653,407
JavaScr...
CSS
3 commits
# 303,718
JavaScr...
CSS
debuggi...
angular...
2 commits
# 689,458
JavaScr...
CSS
2 commits
# 689,459
JavaScr...
CSS
2 commits
# 730,209
JavaScr...
CSS
1 commit
# 343,605
CSS
gcs
Shell
HTML
1 commit
# 553,111
JavaScr...
CSS
1 commit
# 347,080
slack
node
HTML
vhdl
1 commit

This project is no longer maintained, all issues you have would be best to fork off and fix by yourself.

Angular material datepicker

Alt text

This small component is still in currently in BETA. It's a simple date picker based on the angular-material port of polymer by the people behind ionic.

The master branch will always contain the most recent version of the datepicker, so if you want to be up to date, don't pull from bower of npm. These are the stable versions.

https://material.angularjs.org/

Install

This component is bower and npm registered

css
bower install material-date-picker (installs moment as dependency)
npm install material-date-picker
npm install moment
All the necessary files will be automatically included in your index.html if not add
css
    
    
You have to add a dependency to material-date-picker module which is called
materialDatePicker
.
js
angular.module('your-app', ['materialDatePicker']);

Usage

Attributes

    

With the following attributes you can bind an element id, bind a class for extra styling to the input and all internal fields, etc. The calendar-header attribute has a two-way databinding to a scope variable, so you can add dynamic translations, that has the following setup:

javascript
    $scope.header = {
        monday: 'Mon',
        tuesday: 'Tue',
        wednesday: 'Wed',
        thursday: 'Thu',
        friday: 'Fri',
        saturday: 'Sat',
        sunday: 'Sun',
    }

The arrows attribute has a two-way databinding to a scope variable that has the following setup:

javascript
    $scope.arrows = {
        year: {
            left: 'images/white_arrow_left.svg',
            right: 'images/white_arrow_right.svg'
        },
        month: {
            left: 'images/grey_arrow_left.svg',
            right: 'images/grey_arrow_right.svg'
        }
    }

The input-class attribute can be overridden in the following way:

css

An example is provided.

Known issues

If you can't find the SVG images, look in the images map of the bower component and copy these to your own images map. I left this as an open option.

If you have an improvement or request please let me know or post a pull request

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.