如何动态更改jquery日期选择器样式

我正在努力与动态更改样式的jQuery日期选择器。我想要做的是，如果复选框被点击，然后datepicker只显示年份和月份，如果没有，datepicker作为正常的年份，月份和日期。如何动态更改jquery日期选择器样式

我写下了脚本。我可以看到下面的脚本被触发，并没有显示任何问题，但它没有奏效。

如果有人知道问题是什么，请帮助我。那太好了，谢谢。

=====编辑=====

随着Barmar的建议，我可以做这方面的工作动态更改日期格式。但我仍然不能切换显示日期选择器的日历部分，我试图用$(".ui-datepicker-calendar").css({ "display": "none" });和$(".ui-datepicker-calendar").css({ "display": "inline-block" });

有没有人知道这个解决方案？

function addEventCheckBox() { 
    $("#checkBoxForFlag").live("click", function(e) { 
     changeDatePicker(); 
    }); 
} 

function changeDatePicker() { 
    var flag = $("#checkBoxForFlag").is(":checked"); 

    if (flag) { 
     $("#testDate").datepicker("option", { 
      dateFormat: "yy/mm" 
     }); 

     $(".ui-datepicker-calendar").css({ "display": "none" }); 
    } else { 
     $("#testDate").datepicker("option", { 
      dateFormat: 'yy/mm/dd', 
     }); 

     $(".ui-datepicker-calendar").css({ "display": "inline-block" }); 
    } 
}

来源

2015-10-15 user3110409

你有HTML或JSFiddle吗？ – mwilson

你使用的是什么版本的jQuery？ '.live（）'在1.7中被弃用，在1.9中被删除？ – Barmar

您好@Barmar，在我提交我的答案之前，我没有真正看到您的评论 - 没有试图挖角，我们只是在同一时间得出同样的结论 - –

的.datepicker(<options>)功能只能用来初始化一个新的日期选择器。要更改现有的日期选择器，请使用option方法。您可以提供包含您正在更改的选项的对象，也可以只提供一个选项作为单个参数。

function changeDatePicker() { 
    var flag = $("#checkBoxForFlag").is(":checked"); 

    if (flag) { 
     $("#testDate").datepicker("option", "dateFormat", "yy/mm"); 
     $(".ui-datepicker-calendar").hide(); 
    } else { 
     $("#testDate").datepicker("option", "dateFormat", "yy/mm/dd"); 
     $(".ui-datepicker-calendar").show(); 
    } 
}

来源

2015-10-15 00:35:23 Barmar

这是正确的答案; upvoting这一个，并删除我的答案 - –

谢谢，巴尔马。有用！！！但是，'$（“。ui-datepicker-calendar”）。hide（）;'不起作用，你有什么想法吗？ – user3110409

当你在你的问题中使用'.css（）'时，它是否工作？ '.hide（）'应该和'.css（“display”，“none”）相同' – Barmar

经过一些实验尝试后，我解决了这个问题。所以我在这里为可能有同样问题的人编写解决方案。

function changeDatePicker() { 
    var flag = $("#checkBoxForFlag").is(":checked"); 

    if (flag) { 
    $("#testDate").datepicker("destroy"); 
    $("#testDate").datepicker({ 
     showOn: "both", 
     buttonImageOnly: false, 
     dateFormat: "yy/mm", 
     changeMonth: true, 
     changeYear: true, 
     maxDate: 0, 
     buttonText: "", 
     onClose: function() { 
     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)); 
     } 
    }); 
    $("#testDate").focus(function() { 
    $(".ui-datepicker-calendar").hide(); 
    $("#ui-datepicker-div").position({ 
     my: "center top", 
     at: "center bottom", 
     of: $(this) 
    }); 
    }); 
    $("#testDate").blur(function() { 
    $(".ui-datepicker-calendar").hide(); 
    }); 
    } else { 
    $("#testDate").datepicker("destroy"); 
    $("#testDate").datepicker({ 
     showOn: "both", 
     buttonImageOnly: false, 
     dateFormat: userDateFormat_datepicker, 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     maxDate: 0, 
     buttonText: "" 
    }); 
    $("#testDate").focus(function() { 
     $(".ui-datepicker-calendar").show(); 
    }); 
    $("#testDate").blur(function() { 
     $(".ui-datepicker-calendar").show(); 
    }); 
    } 
}

来源

2015-10-16 05:14:40 user3110409

如何动态更改jquery日期选择器样式

回答

相关问题