From 2503f644bd75029c7d3e44b9751ce79aedd05bfb Mon Sep 17 00:00:00 2001
From: Andrew Rowls <andrew@eternicode.com>
Date: Sat, 16 Feb 2013 18:18:40 -0500
Subject: [PATCH] Use class instead of id for readme examples

Closes #92
---
 README.md | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 9733ff85f..ba68643cc 100644
--- a/README.md
+++ b/README.md
@@ -20,10 +20,10 @@ These are the specific versions bootstrap-datpicker is tested against (`js` file
 Attached to a field with the format specified via options:
 
 ```html
-<input type="text" value="02-16-2012" id="datepicker">
+<input type="text" value="02-16-2012" class="datepicker">
 ```
 ```javascript
-$('#datepicker').datepicker({
+$('.datepicker').datepicker({
     format: 'mm-dd-yyyy'
 });
 ```
@@ -31,22 +31,22 @@ $('#datepicker').datepicker({
 Attached to a field with the format specified via data tag:
 
 ```html
-<input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >
+<input type="text" value="02/16/12" data-date-format="mm/dd/yy" class="datepicker" >
 ```
 ```javascript
-$('#datepicker').datepicker();
+$('.datepicker').datepicker();
 ```
 
 As component:
 
 ```html
-<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
+<div class="input-append date" class="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input size="16" type="text" value="12-02-2012" readonly>
     <span class="add-on"><i class="icon-th"></i></span>
 </div>
 ```
 ```javascript
-$('#datepicker').datepicker();
+$('.datepicker').datepicker();
 ```
 
 Attached to non-field element, using events to work with the date values.
@@ -108,10 +108,10 @@ $('#date-end')
 As inline datepicker:
 
 ```html
-<div id="datepicker"></div>
+<div class="datepicker"></div>
 ```
 ```javascript
-$('#datepicker').datepicker();
+$('.datepicker').datepicker();
 ```
 
 
@@ -120,7 +120,7 @@ $('#datepicker').datepicker();
 Call the datepicker via javascript:
 
 ```javascript
-$('#datepicker').datepicker()
+$('.datepicker').datepicker()
 ```
 
 ## Dependencies
@@ -233,7 +233,7 @@ Whether or not to force parsing of the input value when the picker is closed.  T
 Format a component.
 
 ```html
-<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
+<div class="input-append date" class="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012">
     <span class="add-on"><i class="icon-th"></i></span>
 </div>
@@ -253,7 +253,7 @@ Remove the datepicker.  Removes attached events, internal attached objects, and
 added HTML elements.
 
 ```javascript
-$('#datepicker').datepicker('remove');
+$('.datepicker').datepicker('remove');
 ```
 
 ### show
@@ -263,7 +263,7 @@ Arguments: None
 Show the datepicker.
 
 ```javascript
-$('#datepicker').datepicker('show');
+$('.datepicker').datepicker('show');
 ```
 
 ### hide
@@ -273,7 +273,7 @@ Arguments: None
 Hide the datepicker.
 
 ```javascript
-$('#datepicker').datepicker('hide');
+$('.datepicker').datepicker('hide');
 ```
 
 ### update
@@ -285,7 +285,7 @@ Arguments:
 Update the datepicker with given argument or the current input value.
 
 ```javascript
-$('#datepicker').datepicker('update');
+$('.datepicker').datepicker('update');
 ```
 
 ### setStartDate
@@ -297,14 +297,14 @@ Arguments:
 Sets a new lower date limit on the datepicker.
 
 ```javascript
-$('#datepicker').datepicker('setStartDate', '2012-01-01');
+$('.datepicker').datepicker('setStartDate', '2012-01-01');
 ```
 
 Omit startDate (or provide an otherwise falsey value) to unset the limit.
 
 ```javascript
-$('#datepicker').datepicker('setStartDate');
-$('#datepicker').datepicker('setStartDate', null);
+$('.datepicker').datepicker('setStartDate');
+$('.datepicker').datepicker('setStartDate', null);
 ```
 
 ### setEndDate
@@ -316,14 +316,14 @@ Arguments:
 Sets a new upper date limit on the datepicker.
 
 ```javascript
-$('#datepicker').datepicker('setEndDate', '2012-12-31');
+$('.datepicker').datepicker('setEndDate', '2012-12-31');
 ```
 
 Omit endDate (or provide an otherwise falsey value) to unset the limit.
 
 ```javascript
-$('#datepicker').datepicker('setEndDate');
-$('#datepicker').datepicker('setEndDate', null);
+$('.datepicker').datepicker('setEndDate');
+$('.datepicker').datepicker('setEndDate', null);
 ```
 
 ### setDaysOfWeekDisabled
@@ -335,14 +335,14 @@ Arguments:
 Sets the days of week that should be disabled.
 
 ```javascript
-$('#datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);
+$('.datepicker').datepicker('setDaysOfWeekDisabled', [0,6]);
 ```
 
 Omit daysOfWeekDisabled (or provide an otherwise falsey value) to unset the disabled days.
 
 ```javascript
-$('#datepicker').datepicker('setDaysOfWeekDisabled');
-$('#datepicker').datepicker('setDaysOfWeekDisabled', null);
+$('.datepicker').datepicker('setDaysOfWeekDisabled');
+$('.datepicker').datepicker('setDaysOfWeekDisabled', null);
 ```
 
 ## Events
@@ -425,7 +425,7 @@ If your browser (or those of your users) is displaying characters wrong, chances
 ```
 
 ```javascript
-$('#datepicker').datepicker({
+$('.datepicker').datepicker({
     language: XX    //as you defined in bootstrap-datepicker.XX.js
 });
 ```