datepicker

Gemfile

@@ -45,6 +45,7 @@ gem 'to_xls-rails'
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
+gem 'jquery-ui-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

Gemfile.lock

@@ -87,6 +87,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (6.0.1)
+      railties (>= 3.2.16)
     kaminari (0.16.3)
       actionpack (>= 3.0.0)
       activesupport (>= 3.0.0)
@@ -244,6 +246,7 @@ DEPENDENCIES
   httparty (~> 0.15.5)
   jbuilder (~> 2.5)
   jquery-rails
+  jquery-ui-rails
   kaminari (~> 0.16.3)
   listen (~> 3.0.5)
   mysql2 (>= 0.3.18, < 0.5)

app/assets/javascripts/CRM.js

@@ -14,4 +14,6 @@
 //= require bootstrap
 //= require jquery_ujs
 //= require turbolinks
-//= require cable
+//= require cable
+//= require jquery-ui
+//= require bootstrap-datepicker

app/assets/javascripts/application.js

@@ -17,7 +17,7 @@
 //= require turbolinks
 //= require cable
 //= require settings/processing_items
-//= require bootstrap-datepicker
+
 
 
 

app/assets/javascripts/origami.js

@@ -15,6 +15,8 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require cable
+//= require jquery-ui
+//= require bootstrap-datepicker
 
 $(document).ready(function(){
 	// Enable/Disable Button

app/assets/stylesheets/CRM.scss

@@ -1,6 +1,8 @@
 @import "bootstrap";
 @import "font-awesome";
 @import "theme";
+@import "jquery-ui";
+@import "bootstrap-datepicker3";
 
 /* Show it is fixed to the top */
 // body {

app/assets/stylesheets/application.scss

@@ -2,7 +2,7 @@
 @import "bootstrap";
 @import "font-awesome";
 @import "theme";
-@import "bootstrap-datepicker";
+
 
 /* Show it is fixed to the top */
 // body {

app/assets/stylesheets/origami.scss

@@ -1,6 +1,8 @@
 @import "bootstrap";
 @import "font-awesome";
 @import "theme";
+@import "jquery-ui";
+@import "bootstrap-datepicker3";
 
 /* Show it is fixed to the top */
 // body {

app/views/crm/customers/index.html.erb

@@ -92,7 +92,8 @@
     </div>
 
     <div class="form-group">
-     <%= f.input :date_of_birth,:class=>"form-control date_of_birth"%>
+    <label>Date Of Birth</label>
+     <%= f.text_field :date_of_birth,:class=>"form-control datepicker"%>
    </div>
 
    <div class="form-group">
@@ -119,6 +120,15 @@
 
 <script type="text/javascript">
 
+$(function() {
+  $('.datepicker').datepicker({
+               format : 'dd-mm-yyyy',
+               autoclose: true
+            });
+            $('.datepicker').attr('ReadOnly','true');
+            $('.datepicker').css('cursor','pointer');
+});
+
   $(document).on('click',".checkbox_check",function(){
      if(this.checked){
             

app/views/origami/customers/index.html.erb

@@ -92,7 +92,8 @@
     </div>
 
     <div class="form-group">
-     <%= f.input :date_of_birth,:class=>"form-control date_of_birth"%>
+    <label>Date Of Birth</label>
+     <%= f.text_field :date_of_birth,:class=>"form-control datepicker"%>
    </div>
 
    <div class="form-group">
@@ -117,6 +118,14 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js"></script>
 <script type="text/javascript">
+  $(function() {
+  $('.datepicker').datepicker({
+               format : 'dd-mm-yyyy',
+               autoclose: true
+            });
+            $('.datepicker').attr('ReadOnly','true');
+            $('.datepicker').css('cursor','pointer');
+});
 
   $(document).on('click',".checkbox_check",function(){
      if(this.checked){