datepicker只显示年月

本文介绍了一种在使用datepicker插件时,仅显示年月而非完整日期的方法。通过JavaScript动态添加样式并配合特定函数实现对日期选择器的定制,使得在不同场景下能够灵活控制日期的展示形式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天遇到用datepicker插件的时候,页面只显示年月,并且页面有部分是需要年月日,有部分是需要年月的,网上找了很多种方法包括直接写死<style type="text/css">

.ui-datepicker-calendar {display: none;}

</style>但是最后都没根本解决问题因为页面是互相影响,最后解决方案:

function initPickerOnlyMonthYear(from,to){
    $(from).datepicker({
     dateFormat:'yy-mm',
     beforeShow:function(){
     $("body").append("<style id='ui-datepicker-calendar-id'>.ui-datepicker-calendar{display:none}</style>");//限制
     },
        onChangeMonthYear: function(year, month, inst) {
var dateStr = year + "-";
     if (month < 10) {
     dateStr = dateStr + "0" + month;
     } else {
     dateStr = dateStr + month;
     }
     $(this).val(dateStr);
     $(to).datepicker( "option", "minDate",$(this).val());
        },
        onClose:function(dateText,inst){
         $(".ui-datepicker-calendar").hide();//影藏
         $("#ui-datepicker-calendar-id").remove();移除限制

        }
    });
    $(to).datepicker({
     dateFormat:'yy-mm',
     beforeShow:function(){
      $("body").append("<style id='ui-datepicker-calendar-id'>.ui-datepicker-calendar{display:none}</style>");//限制
     },
        onChangeMonthYear: function(year, month, inst) {
var dateStr = year + "-";
         if (month < 10) {
         dateStr = dateStr + "0" + month;
         } else {
         dateStr = dateStr + month;
         }
         $(this).val(dateStr);
         $(from).datepicker( "option", "maxDate", $(this).val());
          },
          onClose:function(dateText,inst){
         $(".ui-datepicker-calendar").hide();//影藏
        $("#ui-datepicker-calendar-id").remove();移除限制
          }
    });
}


加粗的代码是重点

对了最后的调用:initPickerOnlyMonthYear("#refundDateBegain","#refundDateEnd");

效果如图



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值