source: admin-center/trunk/fuentes/admin-center.install/usr/share/admin-center/lib/bower_components/eonasdan-bootstrap-datetimepicker/docs/Installing.md @ 6782

Last change on this file since 6782 was 6782, checked in by kbut, 20 months ago

add moment and datetimepicker bootstrap plugin

File size: 6.2 KB
Line 
1# Minimal Requirements
2
31. jQuery
42. Moment.js
53. Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
64. Bootstrap Datepicker script
75. Bootstrap CSS
86. Bootstrap Datepicker CSS
97. Locales: Moment's locale files are [here](https://github.com/moment/moment/tree/master/locale)
10
11# Installation Guides
12* [Bower](#bower-)
13* [Nuget](#nuget)
14* [Rails](#rails-)
15* [Angular](#angular-wrapper)
16* [Meteor.js](#meteorjs)
17* [Manual](#manual)
18
19## [bower](http://bower.io) ![Bower version](https://badge.fury.io/bo/eonasdan-bootstrap-datetimepicker.png)
20
21Run the following command:
22```
23bower install eonasdan-bootstrap-datetimepicker#latest --save
24```
25
26Include necessary scripts and styles:
27```html
28<head>
29  <!-- ... -->
30  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
31  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
32  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
33  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
34  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
35  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
36</head>
37```
38## Nuget
39### [LESS](https://www.nuget.org/packages/Bootstrap.v3.Datetimepicker/): ![NuGet version](https://badge.fury.io/nu/Bootstrap.v3.Datetimepicker.png)
40```
41PM> Install-Package Bootstrap.v3.Datetimepicker
42```
43
44### [CSS](https://www.nuget.org/packages/Bootstrap.v3.Datetimepicker.CSS/): ![NuGet version](https://badge.fury.io/nu/Bootstrap.v3.Datetimepicker.CSS.png)
45```
46PM> Install-Package Bootstrap.v3.Datetimepicker.CSS
47```
48
49```html
50<head>
51  <script type="text/javascript" src="/scripts/jquery.min.js"></script>
52  <script type="text/javascript" src="/scripts/moment.min.js"></script>
53  <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
54  <script type="text/javascript" src="/scripts/bootstrap-datetimepicker.*js"></script>
55  <!-- include your less or built css files  -->
56  <!--
57  bootstrap-datetimepicker-build.less will pull in "../bootstrap/variables.less" and "bootstrap-datetimepicker.less";
58  or
59  <link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
60  -->
61</head>
62```
63
64## [Rails](http://rubygems.org/gems/bootstrap3-datetimepicker-rails) ![Gem Version](https://badge.fury.io/rb/bootstrap3-datetimepicker-rails.png)
65
66Add the following to your `Gemfile`:
67```ruby
68gem 'momentjs-rails', '>= 2.9.0'
69gem 'bootstrap3-datetimepicker-rails', '~> 4.14.30'
70```
71Note: You may need to change the version number above to the version number on the badge above.
72Read the rest of the install instructions @
73[TrevorS/bootstrap3-datetimepicker-rails](https://github.com/TrevorS/bootstrap3-datetimepicker-rails)
74
75
76## Angular Wrapper
77Follow the link [here](https://gist.github.com/eugenekgn/f00c4d764430642dca4b)
78
79## Meteor.js
80
81This widget has been package for the [Meteor.js](http://www.meteor.com/) platform, to install it use meteorite as follows:
82
83`$ mrt add tsega:bootstrap3-datetimepicker`
84
85For more detail see the package page on [Atmosphere](http://atmospherejs.com/package/bootstrap3-datetimepicker)
86
87## Manual
88
89### Acquire [jQuery](http://jquery.com)
90### Acquire  [Moment.js](https://github.com/moment/moment)
91### Bootstrap 3 collapse and transition plugins
92Make sure to include *.JS files for plugins [collapse](http://getbootstrap.com/javascript/#collapse) and [transitions](http://getbootstrap.com/javascript/#transitions). They are included with [bootstrap in js/ directory](https://github.com/twbs/bootstrap/tree/master/js)
93Alternatively you could include the whole bundle of bootstrap plugins from [bootstrap.js](https://github.com/twbs/bootstrap/tree/master/dist/js)
94
95```html
96<script type="text/javascript" src="/path/to/jquery.js"></script>
97<script type="text/javascript" src="/path/to/moment.js"></script>
98<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>
99<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>
100<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>
101<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>
102```
103
104## Knockout
105
106```
107ko.bindingHandlers.dateTimePicker = {
108    init: function (element, valueAccessor, allBindingsAccessor) {
109        //initialize datepicker with some optional options
110        var options = allBindingsAccessor().dateTimePickerOptions || {};
111        $(element).datetimepicker(options);
112
113        //when a user changes the date, update the view model
114        ko.utils.registerEventHandler(element, "dp.change", function (event) {
115            var value = valueAccessor();
116            if (ko.isObservable(value)) {
117                if (event.date != null && !(event.date instanceof Date)) {
118                    value(event.date.toDate());
119                } else {
120                    value(event.date);
121                }
122            }
123        });
124
125        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
126            var picker = $(element).data("DateTimePicker");
127            if (picker) {
128                picker.destroy();
129            }
130        });
131    },
132    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
133
134        var picker = $(element).data("DateTimePicker");
135        //when the view model is updated, update the widget
136        if (picker) {
137            var koDate = ko.utils.unwrapObservable(valueAccessor());
138
139            //in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this
140            koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate.replace(/[^0-9]/g, ''))) : koDate;
141
142            picker.date(koDate);
143        }
144    }
145};
146```
147
148### CSS styles
149
150#### Using LESS
151```css
152@import "/path/to/bootstrap/less/variables";
153@import "/path/to/bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less";
154
155// [...] your custom styles and variables
156```
157
158Using CSS (default color palette)
159```html
160<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
161```
Note: See TracBrowser for help on using the repository browser.