Giter Club home page Giter Club logo

ember-bootstrap-datetimepicker's Introduction

Ember-bootstrap-datetimepicker Build Status

Datetimepicker add-on for ember-cli

Installation

ember install ember-bootstrap-datetimepicker

Generate blueprints

ember generate ember-bootstrap-datetimepicker

BREAKING CHANGE for Ember 2

There are some breaking-changes when using this addon > v0.4.1

Two-way bindings are replaced by data down, actions up (DDAU). See: http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_ember-2-0-beta

Before:

{{bs-datetimepicker date=mydate format='YYYY-MM-DD'}}

After:

{{bs-datetimepicker date=mydate format='YYYY-MM-DD' updateDate=(action (mut model.date2))}}

Basic Usage

Template

{{bs-datetimepicker date=mydate format='YYYY-MM-DD'}}

Brocfile.js

The twitter bootstrap resources will not be imported to your resources by default. If you want the add-on to add it you have to specify it in the ember-cli-build.js. (This options will be deprecated)

var app = new EmberApp(defaults, {
  'ember-bootstrap-datetimepicker': {
  "importBootstrapCSS": true,
  "importBootstrapJS": true,
  "importBootstrapTheme": true
  }
});

Building yourself

Check out the demo on github pages. Alternatively you can clone this repo and run the app

sudo npm install -g ember-cli
git clone https://github.com/plusacht/ember-bootstrap-datetimepicker.git
cd ember-bootstrap-datetimepicker
npm install; bower install
ember serve

General Options

All options supported offered by bootstrap-datetimepicker are supported

Bound Options

date

Type: Date

This variable will be changed when the user changes the date and on the other side it will update the datetime picker when "date" is updated

minDate

Type: Date

When you change this variable the component trigger an update to the minDate on the jQuery plugin.

maxDate

Type: Date

When you change this variable the component trigger an update to the maxDate on the jQuery plugin.

disabledDates

Type: Date

When you change this variable the component trigger an update to the disabledDates on the jQuery plugin.

enabledDates

Type: Array Date

When you change this variable the component trigger an update to the enabledDates on the jQuery plugin.

forceDateOutput

Type: Boolean

Forces the parameter to updateDate to be a native javascript Date instead of a moment.js Date.

placeholder

Type: String

Placeholder support when input field is blank

Usage

Min / Maxdate example

Define your model

var App.DateExample = Ember.Object.create({
  date1: moment(),
  mindate: moment("2014-11-01"),
  maxdate: moment("2015-12-01"),
  disabled:true});
}

Add the component to your template and bind the model.mindate with the component's minDate.

{{bs-datetimepicker date=date1 minDate=mindate maxDate=maxdate}}

Change minDate so the jquery plugin will be updated with the minDate value

App.DateExample.set('maxdate', moment("2015-03-01"));

Ember Compatibility

0.4.0 - 0.4.1

  • 1.11.3
  • 1.12.1
  • 1.13.3

Credits

This add-on is based on bootstrap-datetimepicker

Legal

plus8 gmbh © 2014-2015

Licensed under the MIT license

ember-bootstrap-datetimepicker's People

Contributors

aymerick avatar bradplank avatar brett-anderson avatar btecu avatar claudiocro avatar givanse avatar jasonmit avatar jkatsnelson avatar joankaradimov avatar miguelcobain avatar offirgolan avatar rafaelbnp avatar seriousben avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.