日期选择器如何从下拉列表中选择月份

Posted

技术标签:

【中文标题】日期选择器如何从下拉列表中选择月份【英文标题】:how a datepicker chooses the month selected from dropdownlist 【发布时间】:2013-06-20 22:19:35 【问题描述】:

html代码片段

<li>
    <select name="months" class="sel">
        <option selected="" value="Default"> Month </option>
        <option value="Jan">January</option>
        <option value="Feb">February</option>
        <option value="Mar">March</option>
        <option value="Apr">April</option>
        <option value="May">May</option>
        <option value="Jun">June</option>
        <option value="Jul">July</option>
        <option value="Aug">August</option>
        <option value="Sep">September</option>
        <option value="Oct">October</option>
        <option value="Nov">November</option>
        <option value="Dec">December</option>
    </select>
</li>
<li><label class="label">From:</label></li>
<li><input name="fdate" type="text" class="sel" size="10"  id="SelectedDate"  
   readonly onClick="GetDate(this);"><li>

这里的问题是从下拉列表中选择的月份应该显示在日期选择器中......

如何将此选定的选项集成到我的日期选择器代码中......

【问题讨论】:

【参考方案1】:

试试这个。如果你使用 jQuery,那么不需要放置单独的列表框。

Fiddle Demo

<html>
<head>
    <title>Testing</title>
    <link href="css/jquery-ui-start-custom-1.10.3.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ui-datepicker-next, .ui-datepicker-prev  display: none; 
    </style>
    <script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-custom-1.10.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() 

            $("#datepicker").datepicker(
                changeMonth: true,
                changeYear: true,
                yearRange: "-0:c+10",
                dateFormat: "dd - M - yy",
                onClose: function(selectedDate) 
                    $('#datepicker1').datepicker("setDate", selectedDate);
                
            );
            $('#datepicker').datepicker("setDate", new Date());

            $("#datepicker1").datepicker(
                yearRange: "-0:+0",
                dateFormat: "dd - M - yy"
            );

        );
    </script>
</head>
<body>
    <div>
        <input type="text" id="datepicker" />
        <input type="text" id="datepicker1" />
    </div>
</body>
</html>

参考jQuery UI Datepicker

【讨论】:

但我需要前几天...也要活跃 那么不要使用minDate: 0 你想要上一个日期吗?或者你到底想要什么? ki 知道了.. 但它不适用于我的要求中的另一个字段,即,在我的要求中有起始日期和迄今为止它适用于起始日期但不适用于当前字段跨度> 好的,现在我需要的是两个字段的功能,虽然我正在更改 ID,但它也不起作用【参考方案2】:

你的意思是这样的: http://jqueryui.com/datepicker/ 或者你是什么意思,真的想不通你想要什么

编辑:试试这个

如果这不是你要找的,我不知道你想要什么:

<?php
  $myCalendar = new tc_calendar("date1", true);
  $myCalendar->setIcon("calendar/images/iconCalendar.gif");
  $myCalendar->setDate(01, 03, 1960);
  $myCalendar->setPath("calendar/");
  $myCalendar->setYearInterval(1960, 2015);
  $myCalendar->dateAllow('1960-01-01', '2015-03-01');
  $myCalendar->setSpecificDate(array("2011-04-01", "2011-04-13", "2011-04-25"), 0, 'month');
  $myCalendar->setOnChange("myChanged('test')");
  $myCalendar->writeScript();
  ?>

Javascript

<script language="javascript">

<!-- function myChanged(v) alert("Hello, value has been changed : "+document.getElementById("date1").value+"["+v+"]"); //--> </script>

【讨论】:

不,我的意思是如果我在上面的下拉列表中选择一个月,那么在我的输入日期选择器标签中它必须显示该月份日期 哎呀,抱歉不知道你想要什么 好吧,我恐怕帮不了你。 但是我发现我很容易所以你没有真正搜索它 不!我的问题是什么意思是......?如果我在下拉列表中选择月份,例如......我选择了四月......现在日期选择器应该显示四月日历......【参考方案3】:

做这样的事情,FIDDLE

$(function () 
    $("#datepicker").datepicker(
        changeMonth: true,
        changeYear: true
    );
);

【讨论】:

k 这对我来说已经足够了,但我怎么能限制在像 这样的年份值之前不显示 【参考方案4】:
$(function() 
    $("#datepicker").datepicker(
        changeMonth: true,
        );
);

【讨论】:

以上是关于日期选择器如何从下拉列表中选择月份的主要内容,如果未能解决你的问题,请参考以下文章

jquery日期选择器,但日月和年在单独的下拉列表中

当用户从日期选择器中选择日期时,如何在下拉列表中获取特定的星期几?

使用日期选择器填充日期下拉列表

日期选择器日历被隐藏在下拉列表中

如何在 Jquery Date Picker 中添加请选择月份年份下拉菜单的选项?

日期选择器(Query+bootstrap和js两种方式)