在Ajax Calendar Extender中仅显示和选择月份和年份

时间:2013-05-31 09:56:37

标签: ajax user-interface calendar

我希望我的日历只显示月份和年份,并且只选择日历中的月份。

我使用了一个功能,它完成了我的一部分要求,但我的主要部分没有通过此代码实现,即最初extender以网格形式显示月份,但是当我选择一个月时,它会打开日期部分那个日历。我希望点击的月份显示在文本框中,例如年份如果我点击jun,则应显示jun/2013

我使用过这个功能:

function calendarShown(sender, e) {
    sender._switchMode("months", true); 
}

这就是我所说的:

<AjaxControlToolkit:CalendarExtender ID="txtNextHearingMonth_CalendarExtender" runat="server" 
TargetControlID="txtNextHearingMonth" OnClientShown="calendarShown">

</AjaxControlToolkit:CalendarExtender>

1 个答案:

答案 0 :(得分:1)

使用Epoch日历,它提供了显示日历的不同选项。

Have a look at this.

您也可以使用jquery datepicker

这是一个工作脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript"    
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
  $(function() {
     $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
      }
   }); 
});
 </script>
<style>
.ui-datepicker-calendar {
  display: none;
  }
</style>
</head>

    日期: