smDateTimeRangePicker

KO | EN

gitlite — search

#python #hacktoberfest #ai #golang #go #machine-learning #linux #docker #macos #java #windows #awesome #cli #kubernetes

smDateTimeRangePicker

(★ 130)

Angular Material Date Picker, DateTime Picker, Date Range Picker, Date Time range picker

smDateTimeRangePicker 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# SM Date, Time and Range Picker

Picker are design to be used with Angular Material.

- for [Demo](http://mominsamir.github.io/smDateTimeRangePicker/)
- [plunker](http://plnkr.co/edit/2ePb5nf8vH71iH5byP7q?p=preview)

## Requirements

- [AngularJS](https://angularjs.org/)
- [Angular Material](https://material.angularjs.org/)
- [moment.js](http://momentjs.com/)
- [Material Design Font Icons](http://google.github.io/material-design-icons/#icon-font-for-the-web)

## Features

- Angular Material Theme supported

### Date Picker

![Date Picker](https://raw.githubusercontent.com/mominsamir/date-time-picker/master/app/images/date-picker-1.png "Date Picker") ![Hour Picker](https://raw.githubusercontent.com/mominsamir/date-time-picker/master/app/images/date-picker-2.png "Date Picker")

### Range Picker

![Range Default Picker](https://raw.githubusercontent.com/mominsamir/date-time-picker/master/app/images/range-picker-1.png "Range Picker") ![Range Custome Picker](https://raw.githubusercontent.com/mominsamir/date-time-picker/master/app/images/range-picker-2.png "Range Picker")

## Usage

### Installation

```javascript
  npm install --save smdatetimerangepicker
```

```javascript
  bower install --save smDateTimeRangePicker
```

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

### Basic configuration

```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](http://mominsamir.github.io/smDateTimeRangePicker/).

### DateTime Picker

```html
<div  layout="row">
    <sm-date-time-picker
        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"
    ></sm-date-time-picker>
</div>
```

More options on [API documentation](http://mominsamir.github.io/smDateTimeRangePicker/#!/date-time-picker-api).

### Date Picker

```html
<div  layout="row">
    <sm-date-time-picker
        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"
    ></sm-date-time-picker>
</div>
```

More options on [API documentation](http://mominsamir.github.io/smDateTimeRangePicker/#!/date-time-picker-api).

### Range Picker

```html
<div layout="row">
    <sm-range-picker-input
            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"
    ></sm-range-picker-input>
</div>
```

More options on [API documentation](http://mominsamir.github.io/smDateTimeRangePicker/#!/range-picker-api).

## Contributing to the project

We are always looking for the quality contributions! Please check the [contribution docs](CONTRIBUTING.md) for the contribution instructions.

smDateTimeRangePicker

smDateTimeRangePicker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

smDateTimeRangePicker

smDateTimeRangePicker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README