如何在rails中显示所有日历日期,对于在years中选择的年份和在months中选择的月份



我有两个下拉菜单,一个是年份下拉菜单,显示当前年份和当前年份的2年以上。我有一个月下拉菜单,显示所有12个月。我想以这种格式显示从1月1日到31日的所有日历日期("Tue, 01-May-2015"),其中用户选择的月份以months下拉框显示,选择的年份以years下拉框显示。

如何在rails中实现呢?

<div class="month"><%= select_month(Date.today, prompt: 'Choose month') %></div>
<div class="year"><%= select_year(Date.today, :start_year => Date.today.year, :end_year => 3.years.from_now.year, prompt: 'Choose year') %></div>
<script>
    $(".date").hide();
    $('.date', '.month').change(function(e){
        var month = $('.month').val();
        var year = $('.year').val();
        $.ajax({
            type: "POST",
            url: "<controller>/get_dates",
            data: { month: month,  year: year},
            success: function( data ) {
                (".date").val(data);
            }
        });
    });
</script>

HTML文件控制器

def get_dates
  params[:month] ||= Time.now.month
  params[:year] ||= Time.now.year
  @dates = Time.days_in_month(params[:month].to_i, params[:year].to_i)
end

更好的方法是使用日期选择器

x = Date.today.beginning_of_year..Date.today.end_of_year => Thu, 01 Jan 2015..Thu, 31 Dec 2015

然后在下拉菜单中使用这个x.to_a

编辑:

更好的方法还是使用日期选择器。

否则,您可以通过以下方式使用AJAX

<标题> html文件
<script>
    $('#month_drop_down', '#year_drop_down').change(function(e){
        var month = $('#month_drop_down').val();
        var year = $('#year_drop_down').val();
        $.ajax({
            type: "POST",
            url: "<controller>/get_dates",
            data: { month: month,  year: year},
            dataType:'json',
            async:false,
            success: function( data ) {
                ("#date_div").html(data);
            }
        });
    });
</script>
<div>
       <div style="float:left;" id="date_div"><%= select_tag "date", [[1,1][2,2]....]) %>`
       <div style="float:left;" id="month_div"><%= select_tag "month_drop_down", [[1,1][2,2]....]) %>
       <div style="float:left;" id="year_div"><%= select_tag "year_drop_down", [[1,1][2,2]....]) %>
</div>
<标题>控制器h1> _get_dates.html.erb h1> 要在你的路由中定义get_dates操作。

注意:仅通过复制粘贴可能无法工作,您需要对其进行一些必要的编辑。

最新更新