How to add datetimepicker to a textbox?

Question

I am having a text_field_tag in rails.

<%=text_field_tag 'promocode_expiration','',class: "promoExp form-control",id: "datetimepicker1",size: 10%>

On click of this text_field i wish to open a datetimepicker, to add date to the field.

How can i achieve it? Can anyone help please? thank you in advance.

Unless you use a gem, I don't think it's possible in Rails. Maybe some Javascript/Jquery plugin? — lcguida, Jun 27 '16 at 06:53
You can refer the below link... [Refer Here](http://stackoverflow.com/questions/23096517/jquery-datepicker-with-rails-4) — Bharat soni, Jun 27 '16 at 06:57
@Bharatsoni I refered the link and i also tried the options from it, but its not working. — Vishal, Jun 27 '16 at 07:12
@vishal if you are programmer then it's the simplest things to add a datepicker on the input field. I am wondering you have created a question for the same. — Bharat soni, Jun 27 '16 at 07:50
Uncaught TypeError: Cannot read property 'top' of undefined This is the error i am getting in my console. — Vishal, Jun 27 '16 at 08:25

score 3 · Answer 1 · answered Jun 27 '16 at 11:54

You need to add this two line :

gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37'

Then, You need to do :

$ bundle

Then, Add the following to your JavaScript manifest file (application.js):

//= require moment
//= require bootstrap-datetimepicker

And, modify your application.css and add :

*= require bootstrap
*= require bootstrap-datetimepicker

And Lastly, In your view file :

<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
  });
</script>

This had worked for me.

score 0 · Answer 2 · answered Jun 27 '16 at 07:10

0

You need to add the jquery datetimepicker gem to add this functionality. Here is the link: https://github.com/Envek/jquery-datetimepicker-rails

answered Jun 27 '16 at 07:10

Jun Aid

464
7
16

Thanx for the reply. But I tried it out. but not worked. – Vishal Jun 27 '16 at 07:24
What you did? http://xdsoft.net/jqplugins/datetimepicker/ this is the documentation, please go through it. – Jun Aid Jun 27 '16 at 07:35

score 0 · Answer 3 · answered Jun 27 '16 at 08:29

first you need to add datapicker Gem into your Gemfile

gem 'bootstrap-datepicker-rails'

run bundle install

Add this line to app/assets/stylesheets/application.css

 *= require bootstrap-datepicker

Add this line to app/assets/javascripts/application.js

//= require bootstrap-datepicker

in view just paste html code

<input type="text" data-provide='datepicker' >

or

<input type="text" class='datepicker' >

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker();
  });
</script>

score 0 · Answer 4 · answered Mar 28 '19 at 09:54

0

Just want to provide an alternatice gem, which doesn't have any other dependency;

gem 'laydate-rails'

https://github.com/AlbaHoo/laydate-rails, it's working well.

answered Mar 28 '19 at 09:54

Alba Hoo

154
8

How to add datetimepicker to a textbox?

4 Answers4