Question

我正在使用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为真时。

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

请帮忙。

Answer 1

试试这个：

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();

在CSS中使用：.ui-month-only .ui-datepicker-calendar { display: none; }。这是一个有效的JSFIDDLE：http://jsfiddle.net/FgwwT/3/

根据逻辑更改数据选项时，可以调用handleDateInput()函数。

我认为这是你想要实现的目标，希望它有所帮助！：）

Answer 2

您可以使用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()。< / p>

Answer 3

<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.
}

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

Jquery DatePicker条件样式

3 个答案: