jQuery根据月份显示日期 [英] jQuery show date based on month

查看：58
本文介绍了jQuery根据月份显示日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 <！DOCTYPE html PUBLIC -  // //使用下面的代码W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en> 
 
< head> 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js>< / script> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js>< /脚本> 
 < script type =text / javascript> 
 $（function（）{
 $（'。date-picker'）。datepicker（{
 changeMonth：true，
 changeYear：true，
 showButtonPanel：true ，
 dateFormat：'MM yy'，
 minDate：0，
 onClose：function（dateText，inst）{
 $（this）.datepicker（'setDate'，new Date （inst.selectedYear，inst.selectedMonth，1））; 
} 
}）; 
}）; 
< / script> 
< style> 
 .ui-datepicker-calendar {
 display：none; 
} 
< / style> 
< / head> 
 
< body> 
< label for =startDate>日期：< / label> 
< input name =startDateid =startDateclass =date-picker/> 
< / body> 
 
< / html> 
  

 <$ （）;函数（）{$（'。date-picker'）。datepicker（{changeMonth：true，changeYear：true，showButtonPanel：true，dateFormat：'MM yy'，minDate：0，onClose：function dateText，inst）{$（this）.datepicker（'setDate'，new Date（inst.selectedYear，inst.selectedMonth，1））;}}）;}）;   .ui-datepicker-calendar {display：none;}   
 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.4。



工作正常。我的要求是，如果我选择2017年8月我需要显示不同的不同div的所有日期。 SO基于Month&年份选择日期应该显示



例如：

2017年8月 

  div 1 div 1 div 3 div 3 
 1 2 3 4 
星期一星期一星期二星期三

像这样我想显示特定月份的所有日期

解决方案

我认为这个简单的代码会帮助你。使用此并享受。
Thanks .. 

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtmlxml：lang =enlang =en> 
< head> 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js>< / script> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js>< /脚本> 
 < style type =text / css> 
 .datediv {
 
 border：1px solid; 
 padding：10px; 
} 
< / style> 
< script type =text / javascript> 
 var weekday = new Array（7）; 
 weekday [0] =星期天; 
 weekday [1] =星期一; 
 weekday [2] =星期二; 
 weekday [3] =星期三; 
 weekday [4] =星期四; 
 weekday [5] =星期五; 
 weekday [6] =星期六; 
 $（function（）{
 
 
 $（'。date-picker'）。datepicker（{
 changeMonth：true，
 changeYear：true ，
 showButtonPanel：true，
 dateFormat：'MM yy'，
 minDate：0，
 onClose：function（dateText，inst）{
 $ d = new Date （inst.selectedYear，parseInt（inst.selectedMonth）+1,0）.getDate（）; 
 $（this）.datepicker（'setDate'，new Date（inst.selectedYear，inst.selectedMonth，1）） ; 
 html =''; 
 for（i = 1; i <= $ d; i ++）{
 console.log（inst.selectedYear +' - '+（parseInt（inst.selectedMonth ）+1）+' - '+ i）; 
d = new Date（inst.selectedYear +' - '+（parseInt（inst.selectedMonth）+1）+' - '+ i）; 
 console .log（d）; 
n = weekday [d.getDay（）]; 
 html + ='< div class =datediv'+ i +'> div  - '+ i +'< br>< span id =div  - '+ i +'>'+ n +'< / span>< / div>< br>'; 
} 
 $（'＃datecontent'）。html（html）; 
} 
}）; 
}）; 
< / script> 
< style> 
 .ui-datepicker-calendar {
 display：none; 
} 
< / style> 
< / head> 
< body> 
< label for =startDate>日期：< / label> 
< input name =startDateid =startDateclass =date-picker/> 
< div id =datecontent> 
< / div> 
< / body> 
< / html>


I have Month and Year picker for that I used this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
  <script type="text/javascript">
    $(function() {
      $('.date-picker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        minDate: 0,
        onClose: function(dateText, inst) {
          $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
      });
    });
  </script>
  <style>
    .ui-datepicker-calendar {
      display: none;
    }
  </style>
</head>

<body>
  <label for="startDate">Date :</label>
  <input name="startDate" id="startDate" class="date-picker" />
</body>

</html>


$(function() {
  $('.date-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    minDate: 0,
    onClose: function(dateText, inst) {
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">


<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

It's working fine. My requirement is if I select Aug 2017 I need to show all date in different different div. SO based on Month & Year selection date should show

For ex:

Aug 2017

div 1    div 1     div 3     div 3 
1          2         3         4
Sunday    Monday   Tuesday    wednesday

like this i want to show all date for particular month

解决方案

I think this simple code will help you. Use this and enjoy. Thanks..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <style type="text/css">
.datediv{

    border:1px solid;
    padding: 10px;
}
</style>
<script type="text/javascript">
var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";
$(function() {


    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        minDate: 0,
        onClose: function(dateText, inst) { 
            $d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            html='';
            for(i=1;i<=$d;i++){
                console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
                d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
                console.log(d);
                n = weekday[d.getDay()];
                html += '<div class="datediv'+i+'">div-'+i+'<br><span id="div-'+i+'">'+n+'</span></div><br>';
            }
            $('#datecontent').html(html);
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
    <div id="datecontent">
    </div>
</body>
</html>

这篇关于jQuery根据月份显示日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆