How to add datetimepicker to a textbox?

房东的猫 提交于 2020-01-05 03:51:22

问题


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.


回答1:


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.




回答2:


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




回答3:


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>



回答4:


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.



来源:https://stackoverflow.com/questions/38047560/how-to-add-datetimepicker-to-a-textbox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!