0

我正在使用一个 Jquery datepicker 元素，它允许用户只选择月份。

<style>
    .ui-datepicker-calendar {
        display: none;
    }
</style>

上面的CSS工作正常。但是我传递了一个变量，该变量指示用户是否只能选择月份，或者他也可以选择日期。一种条件样式。

代码现在对我来说是这样的。

<head>
    <link rel="stylesheet" href="styles/jquery-ui.css" />
    <script language="javascript" type="text/javascript" src="js/jquery.js" ></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script>
</head>

//some code here

 <label for="myDate">myDate</label>
 <input type="text" id="myDate" name="myDate" />

//some more code

if(//myTest - This is to test if only months are to be shown)
    {
        $(".ui-datepicker-calendar").css("display", "none");

            $('#myDate').datepicker( {
                changeMonth: true,
                changeYear: true,
                changeDate: false, // This parameter is just for trial. On cross-checking with jquery-ui.js, I found there's no such property. :(
                showButtonPanel: true,
                dateFormat: 'MM yy',
            });

        //$(".ui-datepicker-calendar").css({display: 'none'}); -- This didn't work either
    }
    else
    {
        //normal code for a jquery datepicker
    }

});

现在，上面的代码没有给我所需的输出。我需要执行：

$(".ui-datepicker-calendar").css("display", "none");

仅当上述代码中的 myTest 为真时。

换句话说，它仍在日期选择器中显示我不想显示的日期。

请帮忙。

4

3 回答 3

0 
<head>
   <style>
       .ui-month-only .ui-datepicker-calendar { display: none; }
   </style>
</head>

//some code

if(//myTest - This is to test if only months are to be shown)
{
        $('#myDate').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
        });

       $('#myDate').datepicker('widget').addClass( "ui-month-only" );
}
else
{
    //normal code for a jquery datepicker that allows a user to show the dates too.
}

伙计们，感谢您的帮助..这是对我有用的代码..但我仍然不确定为什么我之前的代码不起作用。任何建议都将帮助我们更深入地了解主题。谢谢。

于 2013-08-07T18:11:01.013 回答
0

尝试这个：

function handleDateInput() {

  var $input = $('#myDate');
  var dClass = "ui-normal";

  var dOptions = {
    changeMonth: false,
    changeYear: false,
    dateFormat: 'dd MM yy',
    showButtonPanel: false
  };

  if( $input.data('month-only') === true ) {

    var dFormat = "MM yy";

    dOptions = {
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      dateFormat: dFormat,
      onClose: function( e, ui ) {
        var d = new Date( ui.drawYear , ui.drawMonth , 1);
        $(ui.input).datepicker('setDate', d);
      }
    };

    dClass = "ui-month-only";

  }

  $('#myDate').datepicker( dOptions ).datepicker('widget').addClass( dClass );

};

// these next 2 lines can be run whenever you need
$('#myDate').data('month-only', true);
handleDateInput();

与：.ui-month-only .ui-datepicker-calendar { display: none; }在 CSS 中。这是它工作的 JSFIDDLE：http: //jsfiddle.net/FgwwT/3/

handleDateInput()根据您的逻辑更改数据选项时调用该函数。

我认为这是您想要实现的目标，希望对您有所帮助！:)

于 2013-08-07T12:11:18.470 回答
0

您可以使用show()和hide()。

$('#myDate').datepicker( {
    changeMonth: true,
    changeYear: true,
    changeDate: false, // This parameter is just for trial. On cross-checking with jquery-ui.js, I found there's no such property. :(
    showButtonPanel: true,
    dateFormat: 'MM yy'
});

if(//myTest - This is to test if only months are to be shown){
    $(".ui-datepicker-calendar").hide();
} else {
    $(".ui-datepicker-calendar").show();
}

您需要在datepicker函数之后添加它，否则该元素.ui-datepicker-calendar不存在并且您无法在该元素上应用hide()/ show()。

于 2013-08-07T12:12:21.867 回答