Jquery日期选择器条件样式_Jquery_Css_Jquery Ui Datepicker

Jquery日期选择器条件样式

jquery css

Jquery日期选择器条件样式,jquery,css,jquery-ui-datepicker,Jquery,Css,Jquery Ui Datepicker,我使用的是Jquery datepicker元素，它只允许用户选择月份 <style> .ui-datepicker-calendar { display: none; } </style> 仅当上述代码中的myTest为true时换句话说，它仍然在日期选择器中显示我不想显示的日期请帮助。试试这个： function handleDateInput() { var $input = $('#myDate'); var dCl

我使用的是Jquery datepicker元素，它只允许用户选择月份

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

仅当上述代码中的myTest为true时

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

请帮助。

试试这个：

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日期选择器日历{display:none；}

。这里有一个JSFIDIC的工作原理：

根据逻辑更改数据选项时，调用

handleDateInput（）

函数

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

您可以使用

show（）

和

hide（）

您需要在

datepicker

函数之后添加该元素，否则元素

.ui datepicker calendar

不存在，您无法在该元素上应用

hide（）

show（）

。


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

.ui仅限月份.ui日期选择器日历{显示：无；}
//一些代码
if（//myTest-如果只显示月份，则进行测试）
{
$（“#myDate”）。日期选择器（{
变化月：对，
变化年：是的，
showButtonPanel：是的，
日期格式：“MM yy”，
});
$（'myDate'）.datepicker（'widget'）.addClass（“仅限ui月份”）；
}
其他的
{
//jquery日期选择器的常规代码，允许用户也显示日期。
}

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

当条件为真/假时，您能不能只更改

日期选择器的参数？我不确定哪一个参数会起作用。我原以为应该有像changeDate或changeDay这样的东西，但没有运气（听起来你想让用户选择一个月+一年，而不必选择一个特定的日期。对吗？jQuery UI datepicker似乎不支持这一点。你可能应该寻找一个不同的日期选择器，或者自己选择一个正好满足你需要的日期选择器。至于标签，它确实支持我在我的文章的第一段代码中提到的问题。只是这个条件样式不起作用。这是我犯的一个愚蠢的错误，与DOM、CSS或JQuery语法有关。这太酷了……谢谢Simey。我所做的只是按照你的代码将类添加到小部件中。我的其余代码没有改变。它起作用了。但我想知道，它究竟为什么不起作用r:$（.ui datepicker calendar”）.css（“display”，“none”）；
这似乎在逻辑和语法上都是正确的。这很令人困惑。您能帮忙吗？抱歉，忘记添加到帖子：.ui month only.ui datepicker calendar{display:none；}
用于隐藏/显示日历部分。至于您自己的逻辑，我不确定如果没有类似于我的onClose
函数的东西，您如何将月/年设置到文本框中？--我不确定为什么您的程序显示/隐藏不起作用，但无论如何还是使用CSS更好。：）稍微更新代码以使其更加健壮，如果您使用自己的方法，并且您认为它运行良好，那么您应该将其分享给其他任何寻找答案的人：）您只能使用init一次。您的代码现在看起来是什么样子？与上面的相同。我所做的只是按照建议在datepicker函数之后添加了hide（）方法。但是，同样没有结果。切换对我现有的代码没有多大好处。。谢谢，伙计：）'
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();

$('#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();
}

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