달력 시행 착오편:datepicker 여러 달 표시

11984 단어 jQuery달력DatePicker
캘린더 만들기 관련 노트 달력 시작 오류편:datepicker 여러 달 표시
DatePicker는 여기 다운로드에서 얻을 수 있습니다.
20160619 현재 jQuery UI-v1.11.4를 사용하고 있습니다.
다운로드 및 압축 해제 파일에 사용되는 파일은 다음과 같습니다.
이외에 jquery.js 필요 (이번에는 jQueryv1.10.2 사용)
- images/*
- jquery-ui.min.css
- jquery-ui.min.js
이 파일을 다운로드하지 않아도 구글이 제공하기 때문에 이 파일을 이용하는 경우도 있다.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

기본 달력

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link type="text/css" href="jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<title>カレンダーdatepicker</title>
<h1>カレンダーdatepicker</h1>
</head>
<body>
<input type="text" id="datepicker"/>

<script>
$('#datepicker').datepicker();
</script>

</body>
</html>

달력에 여러 달 표시


옆에 보이는 것은 옵션이기 때문에 간단합니다.
$('#datepicker').datepicker({
  numberOfMonths: 3, //何ヶ月分表示するか
  showCurrentAtPos: 2 //当月の位置。一番左が0,一番右に出したいので2をセット
});

수평 정렬 달력


세로로 배열하는 방법을 잘 모르겠어요.
어쨌든, 스타일은float:left를 지정하기 때문에 이것을 잃어버려 보세요.
덧붙이다
<style type="text/css">
.ui-datepicker-group{clear:both;}
</style>

세로로 되어 있지만 박스의 배경과border는 이렇게 남아 있습니다.
width를 추가해 보아도 아무것도 할 수 없고, 박스 사이즈도 바꾸기 어렵다.
나는 많은 조사를 해서 이 보도에 도움을 받았다.
jQuery UI를 사용하는 datepicker가 빠져있는 곳 중 하나입니다.
jquery-ui.js의 4555줄부터.
_updateDatepicker: function(inst) {
:
  width = 17, <-これか固定されているサイズ！
:
  inst.dpDiv.removeClass("ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4").width("");
  if (cols > 1) {
    inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em"); <-ここで計算させてるのか！
  }
:
원래 소스를 만지작거릴 수 없어 참고 기사를 보고 대처 방법을 고민했다.
너비는 하나면 충분해!그래서 필요 없는 스타일을 없애보자.
나는 before Show: 첫 번째 달력이 완성되었을 때 실행할 수 있도록 사용했지만, 좋은 시기에 하면 스타일이 사라지지 않는다는 것을 발견했다.
그래서 setTimeout을 사용합니다.
$('#datepicker').datepicker({
  numberOfMonths: 3,
  showCurrentAtPos: 2,
  beforeShow: function(input, inst){
    setTimeout(function(){
      inst.dpDiv.removeClass('ui-datepicker-multi');
      inst.dpDiv.removeClass('ui-datepicker-multi-3');
      inst.dpDiv.css('width',"");
    },100);     
  }
});

세로 배열이지만 지난달로 돌아가면 박스 배경이 나온다.

덧붙이다
  onChangeMonthYear: function(year,month,inst){
    setTimeout(function(){
      inst.dpDiv.removeClass('ui-datepicker-multi');
      inst.dpDiv.removeClass('ui-datepicker-multi-3');
      inst.dpDiv.css('width',"");
    },100);     
  }
전환할 때 순식간에 카샤가 되지만 참고 기사에서 말한 것처럼 한 번 꺼버릴까요...
어쨌든 다 됐어.
참조:
jQuery UI의 Datepicker에서 캘린더에서 날짜를 쉽게 입력
jQuery UI Datepicker 달력 여러 달 표시
.NET에서 Worker Service 사용 시작
[프로그래머스] 괄호 회전하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage