Bootstrap 3 Datepicker v4 캘린더를 보는 단계
8895 단어 HTML5PHPBootstrap3
소개
Bootstrap3 Datepicker v4 은 캘린더를 표시하여 날짜/시간을 선택하고 검색할 수 있는 라이브러리입니다.
이 섹션에서는 Bootstrap3 Datepicker v4에서 캘린더를 표시하는 단계를 설명합니다. 이 캘린더를 사용해 예약 시스템(예약 정보 입력⇒송신⇒예약 정보의 표시)을 만들어 해설했으므로 이쪽도 참고해 주세요.
구성
폴더 구성은 다음을 가정합니다.
프로젝트
├ index.html
├ src
│ ├ css
│ │ ├ bootstrap.min.css
│ │ └ bootstrap-datetimepicker.min.css
│ └ js
│ │ ├ jquery-3.5.1.min.js
│ │ ├ moment-width-locales.min.js
│ │ ├ bootstrap.min.js
│ │ └ bootstrap-datetimepicker.min.js
│ └ fonts
│ ├ glyphicons-halflings-regular.eot
│ ├ glyphicons-halflings-regular.svg
│ ├ glyphicons-halflings-regular.ttf
│ ├ glyphicons-halflings-regular.woff
│ └ glyphicons-halflings-regular.woff2
캘린더 표시 절차
1. 파일 준비
Bootstrap 3 Datepicker v4의 캘린더 보기에 필요한 파일을 준비합니다. 각각의 버전이 없으면 정상적으로 표시되지 않으므로 주의입니다.
필요한 파일과 취득 방법에 대해 기재하므로 참고하십시오. 물론 CDN에서 가져와도 괜찮지만 버전에주의합시다. (bootstrap은 v3이고 datetimepicker는 v4입니다)
라이브러리 이름
종류
검색 대상 URL
비고
jquery
js
htps : // j 쿠에 ry. 코 m / 도 w 응 아 d /
최신 버전을 다운로드합니다. 여기서 compressed를 사용합니다.
moment
js
htps : // 모멘 tjs. 코m/
캘린더를 일본어로 표기하려면 moment-with-locales.js를 다운로드하십시오. moment.js라면 일본어화할 수 없기 때문에 주의입니다.
bootstrap
js,css
htps : // 게이 t보오 tst et al p. 이 m / 도 cs / 3.4 / 껄껄 g-s dr # d w # w w
"Download Bootstrap"에서 다운로드하십시오. css 폴더와 js 폴더 내에 필요한 파일이 있습니다. 또한 fonts도 사용합니다. 이 fonts가 없으면 캘린더에서 사용하는 아이콘이 제대로 표시되지 않습니다.
bootstrap-datetimepicker
js,css
htps : // 기주 b. 코 m / 에오나 s 단 / 보오 tst et p
gitHub에서 소스를 다운로드합니다. build 폴더에 필요한 css, js 파일이 있습니다.
2. index.html 작성
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- js -->
<script src="src/js/jquery-3.5.1.min.js"></script>
<script src="src/js/moment-with-locales.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-datetimepicker.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/bootstrap-datetimepicker.min.css">
<title>カレンダー表示サンプル</title>
</head>
<body>
<div class="p-apoint-panel-day u-mb15">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});
})
</script>
</body>
</html>
(index.html 해설)
먼저 head 태그 내에서 파일을 로드합니다. body 태그 내에 캘린더를 표시하기 위한 태그 <div id="calendar"></div> 를 기재합니다. id 이름은 뭐든지 OK입니다.
스크립트 태그 내에 캘린더 설정을 나열합니다.
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});inline: true로 설정하면 캘린더를 기본적으로 Visible 상태로 표시할 수 있습니다. 이 설정이 없으면 캘린더는 버튼을 클릭하지 않으면 표시되지 않으며 입력 요소가 필요합니다 (공식 사이트에서 확인해보십시오.)
minDate: 여기서 설정한 날짜 이전의 날짜를 선택할 수 없습니다.
locale: 일본어로 하는 경우는 'ja'로 합니다. 이 설정이 없으면 영어가 됩니다.
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});이 작업은 캘린더를 클릭할 때 수행됩니다. 클릭한 날짜를 브라우저의 콘솔 화면에 출력합니다.
3. 표시 확인
index.html을 시작하고 아래와 같은 캘린더가 표시되면 성공합니다. 날짜를 클릭하면 콘솔에 날짜가 출력됩니다.
마지막으로
처음부터 조사했기 때문에 꽤 시간이 걸렸습니다만, 막상 정리해 보면 시원하게 끝났습니다. 캘린더를 사용해 무엇인가 만들고 싶은 사람에게 도움이 된다고 생각합니다!
Reference
이 문제에 관하여(Bootstrap 3 Datepicker v4 캘린더를 보는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fktlnz/items/4b8c2f8d0d16c3371018
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
폴더 구성은 다음을 가정합니다.
프로젝트
├ index.html
├ src
│ ├ css
│ │ ├ bootstrap.min.css
│ │ └ bootstrap-datetimepicker.min.css
│ └ js
│ │ ├ jquery-3.5.1.min.js
│ │ ├ moment-width-locales.min.js
│ │ ├ bootstrap.min.js
│ │ └ bootstrap-datetimepicker.min.js
│ └ fonts
│ ├ glyphicons-halflings-regular.eot
│ ├ glyphicons-halflings-regular.svg
│ ├ glyphicons-halflings-regular.ttf
│ ├ glyphicons-halflings-regular.woff
│ └ glyphicons-halflings-regular.woff2
캘린더 표시 절차
1. 파일 준비
Bootstrap 3 Datepicker v4의 캘린더 보기에 필요한 파일을 준비합니다. 각각의 버전이 없으면 정상적으로 표시되지 않으므로 주의입니다.
필요한 파일과 취득 방법에 대해 기재하므로 참고하십시오. 물론 CDN에서 가져와도 괜찮지만 버전에주의합시다. (bootstrap은 v3이고 datetimepicker는 v4입니다)
라이브러리 이름
종류
검색 대상 URL
비고
jquery
js
htps : // j 쿠에 ry. 코 m / 도 w 응 아 d /
최신 버전을 다운로드합니다. 여기서 compressed를 사용합니다.
moment
js
htps : // 모멘 tjs. 코m/
캘린더를 일본어로 표기하려면 moment-with-locales.js를 다운로드하십시오. moment.js라면 일본어화할 수 없기 때문에 주의입니다.
bootstrap
js,css
htps : // 게이 t보오 tst et al p. 이 m / 도 cs / 3.4 / 껄껄 g-s dr # d w # w w
"Download Bootstrap"에서 다운로드하십시오. css 폴더와 js 폴더 내에 필요한 파일이 있습니다. 또한 fonts도 사용합니다. 이 fonts가 없으면 캘린더에서 사용하는 아이콘이 제대로 표시되지 않습니다.
bootstrap-datetimepicker
js,css
htps : // 기주 b. 코 m / 에오나 s 단 / 보오 tst et p
gitHub에서 소스를 다운로드합니다. build 폴더에 필요한 css, js 파일이 있습니다.
2. index.html 작성
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- js -->
<script src="src/js/jquery-3.5.1.min.js"></script>
<script src="src/js/moment-with-locales.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-datetimepicker.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/bootstrap-datetimepicker.min.css">
<title>カレンダー表示サンプル</title>
</head>
<body>
<div class="p-apoint-panel-day u-mb15">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});
})
</script>
</body>
</html>
(index.html 해설)
먼저 head 태그 내에서 파일을 로드합니다. body 태그 내에 캘린더를 표시하기 위한 태그 <div id="calendar"></div> 를 기재합니다. id 이름은 뭐든지 OK입니다.
스크립트 태그 내에 캘린더 설정을 나열합니다.
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});inline: true로 설정하면 캘린더를 기본적으로 Visible 상태로 표시할 수 있습니다. 이 설정이 없으면 캘린더는 버튼을 클릭하지 않으면 표시되지 않으며 입력 요소가 필요합니다 (공식 사이트에서 확인해보십시오.)
minDate: 여기서 설정한 날짜 이전의 날짜를 선택할 수 없습니다.
locale: 일본어로 하는 경우는 'ja'로 합니다. 이 설정이 없으면 영어가 됩니다.
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});이 작업은 캘린더를 클릭할 때 수행됩니다. 클릭한 날짜를 브라우저의 콘솔 화면에 출력합니다.
3. 표시 확인
index.html을 시작하고 아래와 같은 캘린더가 표시되면 성공합니다. 날짜를 클릭하면 콘솔에 날짜가 출력됩니다.
마지막으로
처음부터 조사했기 때문에 꽤 시간이 걸렸습니다만, 막상 정리해 보면 시원하게 끝났습니다. 캘린더를 사용해 무엇인가 만들고 싶은 사람에게 도움이 된다고 생각합니다!
Reference
이 문제에 관하여(Bootstrap 3 Datepicker v4 캘린더를 보는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fktlnz/items/4b8c2f8d0d16c3371018
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- js -->
<script src="src/js/jquery-3.5.1.min.js"></script>
<script src="src/js/moment-with-locales.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-datetimepicker.min.js"></script>
<!-- css -->
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/bootstrap-datetimepicker.min.css">
<title>カレンダー表示サンプル</title>
</head>
<body>
<div class="p-apoint-panel-day u-mb15">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#calendar').datetimepicker({
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});
$("#calendar").on("dp.change", function (event) {
console.log(event.date.format("YYYY-MM-DD"));
});
})
</script>
</body>
</html>
inline: true,
minDate: moment().format("YYYY/MM/DD"),
locale: 'ja'
});
console.log(event.date.format("YYYY-MM-DD"));
});
처음부터 조사했기 때문에 꽤 시간이 걸렸습니다만, 막상 정리해 보면 시원하게 끝났습니다. 캘린더를 사용해 무엇인가 만들고 싶은 사람에게 도움이 된다고 생각합니다!
Reference
이 문제에 관하여(Bootstrap 3 Datepicker v4 캘린더를 보는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fktlnz/items/4b8c2f8d0d16c3371018텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
