SM Date, Time and Range Picker

Picker are design to be used with Angular Material.

- for Demo
- plunker

Requirements

- AngularJS
- Angular Material
- moment.js
- Material Design Font Icons

Features

- Angular Material Theme supported

$3

!Date Picker !Hour Picker

$3

!Range Default Picker !Range Custome Picker

Usage

$3

javascript

  npm install --save smdatetimerangepicker

javascript

  bower install --save smDateTimeRangePicker

javascript

  angular.module('Your App',["ngMaterial","smDateTimeRangePicker"]);

$3

javascript

  angular.module('Your App',["ngMaterial","smDateTimeRangePicker"])

    .config(function ($mdThemingProvider,pickerProvider) {

        pickerProvider.setOkLabel('Save');    

        pickerProvider.setCancelLabel('Close');    

        //  Over ride day names by changing here

        pickerProvider.setDayHeader('single');  //Options 'single','shortName', 'fullName'

    }

);





More options on API documentation.



$3

html



            fname="field"

        lable="Date of Birth"

        form="empForm"

        value="vm.employee.dateOfBirth"

        flex="50"

        flex-sm="100"

        flex-xs="100"                          

        is-required="{{true}}"

        format="MM-DD-YYYY HH:mm"

        mode="date-time"

        week-start-day="Monday"

    >





More options on API documentation.



$3

html



            fname="field"

        lable="Date of Birth"

        form="empForm"

        value="vm.employee.dateOfBirth"

        flex="50"

        flex-sm="100"

        flex-xs="100"                          

        is-required="{{true}}"

        format="MM-DD-YYYY HH:mm"

        week-start-day="Monday"

    >





More options on API documentation.



$3

html



                fname="dayOfPay"

            lable="Date of Pay"

            form="empForm"

            value="vm.employee.dateOfPay"

            flex="50"                         

            is-required="{{true}}"

            format="MM-DD-YYYY"

            mode="date-time"

            week-start-day="Sunday"

    >

``

More options on API documentation.

Contributing to the project

We are always looking for the quality contributions! Please check the contribution docs for the contribution instructions.