https://github.com/SimeonC/md-date-time

Depreciated see
https://github.com/SimeonC/md-date-time

Last synced: about 1 month ago
JSON representation

Depreciated see

• Host: GitHub
• URL: https://github.com/SimeonC/md-date-time
• Owner: SimeonC
• License: mit
• Archived: true
• Created: 2015-01-07T02:32:53.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-14T21:51:08.000Z (almost 9 years ago)
• Last Synced: 2024-05-10T04:06:08.859Z (about 2 months ago)
• Language: JavaScript
• Homepage: http://simeonc.github.io/sc-date-time
• Size: 500 KB
• Stars: 174
• Watchers: 13
• Forks: 33
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Lists

• awesome-material - md-date-time - Time picker based on Googles Material Design Spec. (Uncategorized / Uncategorized)

README

        
mdDateTime (Depreciated)

===========

# All future work is being done in [scDateTime](http://simeonc.github.io/sc-date-time)

## Requirements

1. `AngularJS` ≥ `1.2.x`

2. `FontAwesome` ≥ `4.2.x`

### Optional Recommended requirements

1. [Angular-Material](https://github.com/angular/material)

### For non-Material projects.

If you are not using angular-material you need to shim the `md-button` directive as follows (Example for bootstrap, for non bootstrap remove the btn and btn-link classes and you will probably have to alter the styling)

```js

.directive('mdButton', [function(){

	return {

		replace: true,

		restricte: 'E',

		transclude: true,

		template: ''

	};

}]);

```

### Where to get it

**Via Bower:**

Run `bower install md-date-time` from the command line.

Include script tags similar to the following:

```html

```

**Via Github**

Download the code from [https://github.com/simeonc/md-date-time/releases/latest](https://github.com/simeonc/md-date-time/releases/latest), unzip the files then add script tags similar to the following:

```html

```

### Usage

1. Include `md-date-time.js` and `md-date-time.css`, if not using angular-material see the **For non-Material projects** for the mdButton shim.

2. Add a dependency to `mdDateTime` in your app module, for example: ```angular.module('myModule', ['mdDateTime'])```.

3. Some implementation settings are required to get this useful, but for basic inline use:

```html

```

### Options

* **on-cancel:** Function passed in is called if the cancel button is pressed. `on-cancel="cancelFn()"`

* **on-save:** Function passed in is called when the date is saved via the OK button, date value is available as $value. `on-save="saveFn($value)"`

* **default-mode** A string of value 'date'/'time', which side of the slider that should be shown initially, overridden by display-mode

* **display-mode** Options are "full"; display time and date selectors and no display, "time"; show only the time input, "date"; show only the date input

* **orientation** If this string value is 'true' then the picker will be in vertical mode. Otherwise it will change to vertical mode if the screen width is less than 51rem as that is the size of the editor

* **display-twentyfour** If this value is truthy then display 24 hours in time, else use 12 hour time.

* **mindate** A date string that represents the minimum selectable date/time

* **maxdate** A date string that represents the maximum selectable date/time

* **weekdays** Optionally bind an array of strings, this defaults to the englist S, M, T, W etc. Intended for full multilanguage support.

### Issues?

It has been tested to work on Chrome, Safari, Opera, Firefox and Internet Explorer 8+.

If you find something, please let me know - throw me a message, or submit a issue request!

### FAQ

1. **The editor appears at a strange size?** The editor is sized using REM, so try changing the font-size, or at least the font-size at the editor base. I find the following works well:

```css

.time-date {

	font-size: 14px !important;

}

```

## Developer Notes

When checking out, you need a node.js installation, running `npm install` will get you setup with everything to run the compile and unit tests tasks (Coming Soon!).

All changes should be done in the lib folder, running `gulp compile` to compile the app or use `gulp watch` to compile the files as you save them.

Read the CONTRIBUTING.md file before starting a PR.

## License

This project is licensed under the [MIT license](http://opensource.org/licenses/MIT).

## Contributers

Special thanks to all the contributions thus far! 

For a full list see: https://github.com/simeonc/md-date-time/graphs/contributors