강상위 / db-frs

Go to a project
Toggle navigation Toggle navigation pinning
강상위
16d9f246 1 parent ffc690d5

Project Final Commit

Expand all
Inline Side-by-side
Showing 66 changed files with 2345 additions and 177 deletions
# 이승민씨를 위한 간단 GIT 설정법
## 1.설치
- 깃을 설치해주세요
> https://git-scm.com/downloads
## 2.GIT bash 열기
- 깃을 설치하고 GIT bash를 열어주세요.
## 3.GIT 설정하기
- 깃을 설정해주세요. username과 email을 설정하면 됩니다.
- global 옵션은 깃을 설치한 컴퓨터 전체에 대한 설정이라는 뜻입니다.
> git config --global user.name "이름"
> git config --global user.email 메일@khu.ac.kr
## 4.Clone하기
- GIT bash에서 적당한 폴더를 만들고 들어가주세요.
> cd \<만드신 폴더\>
# 시설물 대여 시스템
## 개요
- 많은 사람들이 공통적으로 느끼고 있는 강의실 대여 시스템의 불편함을 해소해보고자 유저가 대여 현황 조회와 대여 예약을 할 수 있는 프로그램을 구상했습니다.
- 실제 통합된 시설물 대여 시스템을 구현하였고 실제로 시설물 조회, 예약, 취소 등 필요한 기능을 사용할 수 있습니다.
## 운용환경 및 준비
- Linux환경에서 MySQL, Python Flask로 동작하며 pymsql을 통해 연결됩니다.
- 웹 기반 시스템이며 마이크로소프트 엣지, 구글 크롬 브라우저를 권장합니다.
- MySQL에 아래와 같은 테이블이 필요합니다. 사전에 준비하시기 바랍니다.
> \<Tables\>
> - users - reservations_id : int(11), user_id : varchar(45), facility_id : int(11), start_time : datetime, endtime : datetime
> - departments - department_id : int(11), department_name : int(45), manager_name : varchar(45), department_location : varchar(45)
> - reservations - reservations_id : int(11), user_id : int(45), facility_id : int(11), start_time : datetime, endtime : datetime
> - facilities - facility_id : int(11), department_id : int(11), facility_type : varchar(45), capacity : int(11), location : varchar(45), location_detail : varchar(45), equipment : varchar(45)
- 세부 제약조건과 내용은 최종보고서를 참고해주시기 바랍니다.
## 1.설치 및 초기설정
- GIT Clone
> git clone http://khuhub.khu.ac.kr/2013104043/db-frs.git
> cd db-frs
## 5.Branch 파기
- master는 위험하니 님을 위한 브랜치를 하나 만드세요.
- git branch "브랜치이름"을 입력하시면 "브랜치이름"이라는 브랜치를 만들겠다는 뜻입니다.
- 브랜치 이름은 맘대로 하시고
- checkout은 뒤에 입력한 브랜치를 사용하겠다는 뜻입니다.
- git branch 를 입력하시면 전체 브랜치를 볼 수 있습니다.
> git branch \<브랜치이름\>
> git checkout \<브랜치이름\>
## 6.Branch push
- 만든 브랜치를 khuhub에 올려주세요.
> git push origin \<브랜치이름\>
## 자 이제 마음대로 가지고 노세요!
## 7.ADD와 COMMIT과 PUSH
- clone한 폴더를 기준으로(여기서는 db-frs)
- Add를 할 수 있습니다. 이왕이면 파일을 지정해서 사용해주세요. 안그러면 설정파일 다 올라가요...
> git add .(현재 폴더를 모두 add하겠다는 뜻)
> git add filename.py(filename.py만 add하겠다는 뜻)
- Add된 현황을 봅니다.
> git status
- 마음에 들었으면 커밋을 하죠. 참고로 -m "커밋메시지"는 꼭 들어가야 합니다.
> git commit -m \<커밋메시지\>
- push를 합시다! push는 웹에 업로드 하는 기능입니다.
> git push origin \<브랜치이름\>
- 파이썬 가상환경 만들기
> python3 -m venv env
> source evn/bin/activate
- 파이썬 패키지 설치
> pip install flask
> pip install pymysql
- user_info에서 자신의 MySQL 계정과 비밀번호 설정
- ReservationControl.py, Users.py에서 각 함수마다 DB의 호스트 주소와 사용할 DB이름을 설정
> db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd, db='dbname', charset='utf8')
- flask서버 구동
## 2.기능
- 모든 화면에서 로고를 선택하면 처음화면으로 돌아갈 수 있습니다.
### 1) 첫 로그인 화면
- 첫 화면에서는 로그인이 가능하며, 회원가입을 통해 가입한 후 서비스를 사용할 수 있습니다.
### 2) 메인화면
- 로그인 후 처음으로 보여지는 화면으로 '대여하기', '대여현황', '로그아웃'을 선택할 수 있습니다.
- '대여하기'를 선택하면 대여화면으로 이동합니다.
- '대여현황'을 선택하면 대여현황화면으로 이동합니다.
- '로그아웃'을 선택하면 로그아웃 후 처음화면으로 돌아갑니다.
### 3-1) 대여화면
- 사용자가 원하는 조건으로 시설물을 검색할 수 있는 화면입니다.
- '건물'에서 사용자가 원하는 건물을 선택할 수 있습니다.
- '사용 인원 수'에서 사용자가 원하는 규모의 시설물을 선택할 수 있습니다.
- '시작시간'과 '종료시간'을 설정합니다.
- '검색'을 선택하여 대여가능한 시설물을 확인할 수 있습니다.
### 3-2) 검색결과화면
- 사용자가 선택한 시간에 사용 가능한 시설물이 나타납니다.
- '예약'을 선택하여 시설물 예약을 완료합니다.
### 4) 대여현황화면
- 사용자가 대여한 시설물들을 확인할 수 있습니다.
- 대여현황 옆의 각각의 버튼을 선택하여 해당 시설물의 대여를 취소할 수 있습니다.
##### 기타 문의사항은 2018-2 데이터베이스 'DB아파트209호'로 연락주시고 얼마든지 가져다 쓰시면 감사하겠습니다.
\ No newline at end of file
......
# -*- coding: utf-8 -*-
# 한글 인코딩을 위한 주석입니다.
# 사전설정:
# pymysql 패키지가 있어야 합니다.
# pip install pymysql
# 보안상 user_info에서 DB id, password를 가져옵니다.
# user_info.py에서 DB id, password를 설정하고 사용해주세요.
# 외부에서 사용법:
# from ReservationControl import *
import pymysql
import user_info
import datetime
# getReservations - 대여현황반환 함수
# input:
# string user_id
# output:
# 성공시 : tuple형태로 반환 => ( (1 ,"steven123", 7, "전자정보대학", "136호", 10, datetime.datetime(2018,12,5,12,0,0), datetime.datetime(2018,12,5,12,10,0), ), )
# 순서 : reservations_id, user_id, facility_id, location, location_detail, capacity, start_time, end_time
# 실패시 : result[0][0]="SQL Error!"인 tuple 반환 => ( ("SQL Error!", ), )
# 사용예:
# result = getReservations("khucse123")
# reservation_start_time = result[0][3]
def getReservations(user_id):
try:
db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd,
db='dbname', charset='utf8')
curs = db.cursor()
# curs.execute("select * from reservations where user_id=%s", user_id)
curs.execute(
"select r.reservations_id, r.user_id, r.facility_id, f.location, f.location_detail, f.capacity, r.start_time, r.end_time from reservations r, facilities f where r.user_id=%s AND r.facility_id=f.facility_id;",
user_id)
result = curs.fetchall()
print("Fetch Success!")
return result
except:
print("SQL Error!")
return (("SQL Error!",),)
finally:
db.close()
# deleteReservations - 대여현황삭제 함수
# input:
# int reservations_id
# output:
# 성공시 : True
# 실패시 : False
# 사용예:
# deleteReservations(5)
# 주의사항:
# 테스트환경에서 없는 reservations_id를 넣으면 에러가 날 수 있음
def deleteReservations(reservations_id):
try:
db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd,
db='dbname', charset='utf8')
curs = db.cursor()
curs.execute("delete from reservations where reservations_id=%s", reservations_id)
db.commit()
print("Delete Success!")
return True
except:
print("SQL Error!")
return False
finally:
db.close()
# addReservations - 대여현황추가 함수
# input:
# string user_id
# int facility_id
# datetime.datetime start_time
# datetime.datetime end_time
# output:
# 성공시 : True
# 실패시 : False
# 사용예:
# tstart = datetime.datetime(2018,12,5,0,11,12)
# tend = datetime.datetime(2018,12,5,0,20,12)
# addReservations("khucse123", 6, tstart, tend)
# 주의사항:
# 테스트환경에서 없는 user_id를 넣으면 에러가 날 수 있음
# 테스트환경에서 없는 facility_id를 넣으면 에러가 날 수 있음
def addReservations(user_id, facility_id, start_time, end_time):
try:
db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd,
db='dbname', charset='utf8')
curs = db.cursor()
curs.execute("insert into reservations (user_id, facility_id, start_time, end_time) values (%s,%s,%s,%s)",
(user_id, facility_id, start_time, end_time))
db.commit()
print("Add Reservation Success!")
return True
except:
print("SQL Error!")
return False
finally:
db.close()
# getAvailableFacilities - 사용가능시설물 반환함수
# input:
# string location
# int capacity
# datetime.datetime start_time
# datetime.datetime end_time
# output:
# 성공시 : tuple형태로 반환 => ( (1, "전자정보대학", "B01호", 40, "강의실", "빔프로젝터", ), )
# 순서 : facility_id, location, location_detail, capacity, facility_type, equipment
# 사용가능한 시설물이 없을 시 : result[0][0]="NoAvailableFacilites"인 tuple 반환 => ( ("NoAvailableFacilites", ), )
# 실패시 : result[0][0]="SQL Error!"인 tuple 반환 => ( ("SQL Error!", ), )
# 사용예:
# tstart = datetime.datetime(2018,12,5,12,11,12)
# tend = datetime.datetime(2018,12,5,14,20,12)
# result = getAvailableFacilities("전자정보대학", 40, tstart, tend)
# facility_id = result[0][0]
def getAvailableFacilities(location, capacity, start_time, end_time):
try:
db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd,
db='dbname', charset='utf8')
curs = db.cursor()
curs.execute(
"select facility_id, location, location_detail, capacity, facility_type, equipment from facilities where (facility_id not in(select facility_id from reservations where (start_time<=%s AND %s<end_time) OR (start_time<%s AND %s<=end_time) OR (%s<=start_time AND end_time<=%s))) AND location=%s AND %s<=capacity;",
(start_time, start_time, end_time, end_time, start_time, end_time, location, capacity))
result = curs.fetchall()
print("Fetch Success!")
# 사용 가능한 시설물이 있을 경우
if (len(result) != 0):
return result
# 사용 가능한 시설물이 없을 경우
else:
print("No Available Facilities")
return (("NoAvailableFacilities",),)
except:
print("SQL Error!")
return (("SQL Error!",),)
finally:
db.close()
# -*- coding: utf-8 -*-
# 한글 인코딩을 위한 주석입니다.
# 사전설정:
# pymysql 패키지가 있어야 합니다.
# pip install pymysql
# 보안상 user_info에서 DB id, password를 가져옵니다.
# user_info.py에서 DB id, password를 설정하고 사용해주세요.
# 외부에서 사용법:
# from Users import *
import pymysql
import user_info
# UserLogin - 유저 로그인 함수
# input:
# string user_id
# string password
# output:
# 성공시 : True
# 실패시 : False
# 사용예:
# UserLogin("khucse124", "steven1234")
def UserLogin(user_id, password):
try:
db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd,
db='dbname', charset='utf8')
curs = db.cursor()
curs.execute("select exists (select user_name from users where user_id=%s and password=%s) as result",
(user_id, password))
result = curs.fetchall()
if (result[0][0] == 1):
print("User login Success!")
return True
else:
print("User login Failed!")
return False
except:
print("SQL ERROR!!")
return False
finally:
db.close()
# UserJoin - 유저 회원가입 함수
# input:
# string user_id
# int dept_id
# string user_name
# string pwd
# string phone
# string mail
# output:
# 성공시 : True
# 실패시 : False
# 사용예:
# UserJoin("khucse124", 7, "Steven", "steven1234", "031-201-2566", "cs@khu.ac.kr")
# 주의사항:
# 테스트환경에서 같은 user_id가 있으면 에러가 날 수 있음
# 테스트환경에서 dept_id는 departments 테이블에 없는 값을 넣으면 에러가 날 수 있음
def UserJoin(user_id, dept_id, user_name, pwd, phone, mail):
try:
db = pymysql.connect(host='host-address', port=3306, user=user_info.user_id, password=user_info.user_passwd,
db='dbname', charset='utf8')
curs = db.cursor()
curs.execute(
"insert into users (user_id, department_id, user_name, password, phone, mail_address) values (%s,%s,%s,%s,%s,%s)",
(user_id, dept_id, user_name, pwd, phone, mail))
db.commit()
print("User Join Success!")
return True
except:
print("SQL ERROR!!")
return False
finally:
db.close()
# -*- coding: utf8 -*-
from flask import request, render_template, redirect, session, flash, Flask
from Users import *
from ReservationControl import *
from datetime import datetime
app = Flask(__name__)
app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'
@app.route('/', redirect_to="/login")
def http_prepost_response():
return "helloworld"
@app.route('/login', methods=["GET"])
def login():
if session.get('ID'):
return redirect('/myhome')
elif request.args.get('retry') == 'true':
return render_template("login.html", retry=True)
return render_template("login.html", retry=False)
@app.route('/join')
def join():
return render_template('join.html')
@app.route('/join/confirm', methods=['POST'])
def join_confirm():
join_item = request.form
print(join_item)
if UserJoin(join_item.get('id'),join_item.get('deptid'),join_item.get('name'),join_item.get('password'),join_item.get('phone'),join_item.get('email')):
flash('회원가입 성공!')
return redirect('/login')
flash('회원가입 실패!')
return redirect('/join')
@app.route('/logincheck', methods=["POST"])
def login_check():
IDPW = request.form
if UserLogin(IDPW.get('id'),IDPW.get('pw')):
session['ID'] = IDPW.get('id')
welcome = IDPW.get('id')+" 님 안녕하세요!"
flash(welcome)
return redirect('/myhome')
flash("ID와 비밀번호를 확인해주세요.")
return redirect('/login?retry=true')
@app.route('/myhome')
def mystat():
return render_template("myhome.html", ID=session['ID'])
@app.route('/viewresv')
def view_resv():
resv_list = getReservations(session['ID'])
print(resv_list)
return render_template('resv_view.html', resv_list=resv_list)
@app.route('/deleteresv', methods=['POST'])
def delete_resv():
resv_id = request.form
if deleteReservations(resv_id.get('resv_id')):
flash("예약이 삭제되었습니다")
else:
flash("예약 삭제에 실패했습니다")
return redirect('/viewresv')
@app.route('/search')
def book():
return render_template("resv_sch.html", ID=session['ID'])
@app.route('/search/result', methods=['POST'])
def search_result():
searchdata = request.form
starttime = datetime.strptime(searchdata.get('starttime'),'%Y-%m-%dT%H:%M')
endtime = datetime.strptime(searchdata.get('endtime'),'%Y-%m-%dT%H:%M')
if(starttime.strftime('%Y%m%d') == endtime.strftime('%Y%m%d')):
result = getAvailableFacilities(searchdata.get('deptid'),searchdata.get('capacity'),starttime,endtime)
print(result)
return render_template("searchresult.html", resv_list=result, starttime=starttime, endtime=endtime)
else:
flash("2일 이상의 일정으로 예약 불가합니다")
return redirect("/search")
@app.route('/search/resv', methods=['POST'])
def book_confirm():
book_query=request.form
print(book_query)
starttime = datetime.strptime(book_query.get('start_time'), '%Y-%m-%d%H:%M')
endtime = datetime.strptime(book_query.get('end_time'), '%Y-%m-%d%H:%M')
if addReservations(session['ID'],book_query.get('fac_id'),starttime,endtime):
flash("예약에 성공했습니다")
return redirect('/myhome')
else:
flash("예약에 실패했습니다.")
return redirect('/search')
@app.route('/logout')
def logout():
session.clear()
flash("로그아웃 되었습니다.")
return redirect('/login')
if __name__ == '__main__':
print("done")
app.config['SESSION_TYPE'] = 'filesystem'
app.run(host="0.0.0.0", port=80)
100 B
101 B
102 B
103 B
104 B
105 B
106 B
107 B
108 B
109 B
110 B
120 B
121 B
130 B
140 B
141 B
142 B
143 B
144 B
145 B
146 B
147 B
148 B
150 B
151 B
152 B
153 B
160 B
162 B
171 B
172 B
173 B
201 B
202 B
240 B
241 B
242 B
260 B
261 B
262 B
270 B
271 B
272 B
273 B
301 B
302 B
303 B
320 B
333 B
340 B
341 B
342 B
343 B
350 B
360 B
362 B
370 B
400 B
401 B
402 B
405 B
406 B
420 B
421 B
440 B
441 B
452 B
461 B
463 B
470 B
472 B
500 B
501 B
502 B
503 B
504 B
505 B
506 B
507 B
540 B
541 B
542 B
571 B
600 B
601 B
602 B
603 B
604 B
605 B
606 B
640 B
641 B
643 B
650 B
651 B
652 B
653 B
654 B
661 B
662 B
670 B
672 B
673 B
674 B
700 B
701 B
702 B
704 B
705 B
707 B
708 B
710 B
720 B
721 B
740 B
741 B
750 B
751 B
752 B
753 B
761 B
771 B
773 B
774 B
0017 G
1014 G
1017 G
1020 G
1111 G
1113 G
1114 G
1115 G
1116 G
1119 G
1120 G
1122 G
1124 G
1126 G
1127 G
1128 G
1129 G
1130 G
1131 G
1132 G
1133 G
1135 G
1136 G
1137 G
1138 G
1139 G
1140 G
1141 G
1142 G
1143 G
1144 G
1154 G
1155 G
1156 G
1162 G
1164 G
1165 G
1167 G
1213 G
1218 G
1221 G
1222 G
1224 G
1226 G
1227 G
1711 G
2012 G
2013 G
2014 G
2015 G
2016 G
2112 G
2113 G
2114 G
2115 G
2211 G
2221 G
2222 G
2224 G
2227 G
2230 G
2233 G
2234 G
2235 G
2311 G
2312 G
2412 G
2413 G
2415 G
8221 G
3011 G
3012 G
3212 G
3214 G
3216 G
3217 G
3220 G
3313 G
3314 G
3315 G
3316 G
3317 G
3318 G
3319 G
3321 G
3322 G
3411 G
3412 G
3413 G
3414 G
3416 G
3417 G
3422 G
3425 G
3426 G
8331 G
4211 G
4212 G
4318 G
4319 G
4412 G
4419 G
4432 G
4433 G
4435 G
8441 G
5012 G
5413 G
5511 G
5513 G
5515 G
5516 G
5517 G
5519 G
5522 G
5523 G
5524 G
5525 G
5528 G
5530 G
5531 G
5534 G
5535 G
5536 G
5537 G
5615 G
5616 G
5617 G
5618 G
5619 G
5620 G
5621 G
5623 G
5624 G
5625 G
5626 G
5627 G
5630 G
5633 G
5712 G
5713 G
5714 G
8541 G
8551 G
8552 G
6211 G
6411 G
6511 G
6512 G
6513 G
6514 G
6515 G
6516 G
6611 G
6613 G
6614 G
6615 G
6616 G
6617 G
6620 G
6623 G
6624 G
6625 G
6627 G
6628 G
6629 G
6630 G
6631 G
6632 G
6635 G
6637 G
6638 G
6640 G
6642 G
6645 G
6647 G
6648 G
6649 G
6654 G
6657 G
6712 G
6714 G
6715 G
6716 G
7011 G
7013 G
7016 G
7017 G
7018 G
7019 G
7021 G
7022 G
7024 G
7025 G
7211 G
7212 G
7611 G
7612 G
7613 G
7711 G
7713 G
7715 G
7719 G
7720 G
7722 G
7723 G
7726 G
7727 G
7728 G
7730 G
7734 G
7737 G
7738 G
7739 G
8761 G
8771 G
8772 G
8774 G
8777 G
9401 R
9403 R
9404 R
9408 R
9701 R
9703 R
9707 R
9709 R
9711A R
9714 R
N13 N
N15 N
N16 N
N26 N
N30 N
N37 N
N61 N
N62 N
N65 N
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>대여화면2</title>
</head>
<style>
body {
background-color: rgb(230, 243, 255);
}
img {
display:block;
margin:auto;
}
input[type=text] {
width: 300px;
box-sizing: border-box;
border: 3px solid lightgray;
border-radius: 4px;
font-size: 16px;
background-color: rgb(230, 243, 255);
background-image: searchicon.png;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 50%;
}
#btn1 {
width: 300px;
height: 50px;
font-size:25px;
font-family: '배달의민족 도현';
color: gray;
background: white;
border: solid 5px white;
border-radius: 5px;
}
</style>
<body>
<br><br>
<img style="border-radius:15px;" width="300px;" src="캡처6.png"/>
<form>
<br>
<center><input type="text" name="search" placeholder="Search.."><image width="30px"src="searchicon.png"></center><br>
<center><button id="btn1">강의실</button></center><br>
<center><button id="btn1">회의 공간</button></center><br>
<center><button id="btn1">체육 시설</button></center><br>
<center><button id="btn1">예술 / 문화 시설</button></center>
<img width="100;" height="70;" align="bottom;" src="khu.png"/>
</form>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>처음화면</title>
</head>
<style>
body {
background-color: rgb(230, 243, 255);
}
img {
display:block;
margin:auto;
border-radius: 50%;
width: 350px;
height: 340px;
}
</style>
<body>
<br><br><br><br><br>
<img src="캡처5.png"/>
</body>
</html>
\ No newline at end of file
No preview for this file type
No preview for this file type
No preview for this file type
language: node_js
node_js:
- "8"
before_script:
- "export DISPLAY=:99.0"
- "sh -e /etc/init.d/xvfb start"
- sleep 3 # give xvfb some time to start
\ No newline at end of file
Copyright (c) 2013 http://xdsoft.net
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
\ No newline at end of file
# jQuery DateTimePicker
[Demo and Documentation](https://xdsoft.net/jqplugins/datetimepicker/)
[![Build Status](https://travis-ci.org/xdan/datetimepicker.svg?branch=master)](https://travis-ci.org/xdan/datetimepicker)
[![npm version](https://badge.fury.io/js/jquery-datetimepicker.svg)](https://badge.fury.io/js/jquery-datetimepicker)
[![npm](https://img.shields.io/npm/dm/jquery-datetimepicker.svg)](https://www.npmjs.com/package/jquery-datetimepicker)
PLEASE. Help me update documentation.
[Doc.tpl](https://github.com/xdan/datetimepicker/blob/master/doc.tpl)
This file will be automatically displayed on the site
# Installation
```bash
npm install jquery-datetimepicker
```
OR
```bash
yarn add jquery-datetimepicker
```
or download [zip](https://github.com/xdan/datetimepicker/releases)
# datetimepicker
==============
**!!! The latest version of the options 'lang' obsolete. The language setting is now global. !!!**
Use this:
```javascript
jQuery.datetimepicker.setLocale('en');
```
[Documentation][doc]
jQuery Plugin Date and Time Picker
DateTimePicker
![ScreenShot](https://raw.github.com/xdan/datetimepicker/master/screen/1.png)
DatePicker
![ScreenShot](https://raw.github.com/xdan/datetimepicker/master/screen/2.png)
TimePicker
![ScreenShot](https://raw.github.com/xdan/datetimepicker/master/screen/3.png)
Options to highlight individual dates or periods
![ScreenShot](https://raw.github.com/Mingpao/datetimepicker/master/screen/4.png)
![ScreenShot](https://raw.github.com/Mingpao/datetimepicker/master/screen/5.png)
![ScreenShot](https://raw.github.com/Mingpao/datetimepicker/master/screen/6.png)
[doc]: https://xdsoft.net/jqplugins/datetimepicker/
### JS Build help
**Requires Node and NPM** [Download and install node.js](http://nodejs.org/download/).
Install:
1. Install `bower` globally with `npm install -g bower`.
2. Run `npm install`. npm will look at `package.json` and automatically install the necessary dependencies.
3. Run `bower install`, which installs front-end packages defined in `bower.json`.
Notice: If you use Bower v1.5.2, you will get error: `The "main" field cannot contain minified files`
You can regress to version 1.3.12
1. `npm uninstall bower -g`
2. `npm install -g bower@1.3.12`
Build:
First install npm requirements: `npm install -g uglifycss concat-cli`
Then build the files: `npm run build`
When build completed, you'll have the following files:
- **build/jquery.datetimepicker.full.js** - browser file
- **build/jquery.datetimepicker.full.min.js** - browser minified file
- **build/jquery.datetimepicker.min.js** - amd module style minified file
{
"name": "datetimepicker",
"version": "2.5.11",
"main": [
"build/jquery.datetimepicker.full.min.js",
"jquery.datetimepicker.css"
],
"ignore": [
"**/screen",
"**/datetimepicker.jquery.json",
"**/*.png",
"**/*.txt",
"**/*.md",
"**/*.html",
"**/*.tpl",
"**/jquery.js",
"bower_components",
"node_modules"
],
"keywords": [
"calendar",
"date",
"time",
"form",
"datetime",
"datepicker",
"timepicker",
"datetimepicker",
"validation",
"ui",
"scroller",
"picker",
"i18n",
"input",
"jquery",
"touch"
],
"authors": [
{
"name": "Chupurnov Valeriy",
"email": "chupurnov@gmail.com",
"homepage": "http://xdsoft.net/contacts.html"
}
],
"dependencies": {
"jquery": ">= 1.7.2",
"jquery-mousewheel": ">= 3.1.13",
"php-date-formatter": ">= 1.3.3"
},
"license": "MIT",
"homepage": "http://xdsoft.net/jqplugins/datetimepicker/",
"repository": {
"type": "git",
"url": "git://github.com:xdan/datetimepicker.git"
}
}
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
{
"name": "datetimepicker",
"version": "2.5.4",
"title": "jQuery Date and Time picker",
"description": "jQuery plugin for date, time, or datetime manipulation in form",
"keywords": [
"calendar",
"date",
"time",
"form",
"datetime",
"datepicker",
"timepicker",
"datetimepicker",
"validation",
"ui",
"scroller",
"picker",
"i18n",
"input",
"jquery",
"touch"
],
"author": {
"name": "Chupurnov Valeriy",
"email": "chupurnov@gmail.com",
"url": "http://xdsoft.net/contacts.html"
},
"maintainers": [{
"name": "Chupurnov Valeriy",
"email": "chupurnov@gmail.com",
"url": "http://xdsoft.net"
}],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/xdan/datetimepicker/blob/master/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/xdan/datetimepicker/issues",
"homepage": "http://xdsoft.net/jqplugins/datetimepicker/",
"docs": "http://xdsoft.net/jqplugins/datetimepicker/",
"download": "https://github.com/xdan/datetimepicker/archive/master.zip",
"dependencies": {
"jquery": ">=1.7"
}
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
<style type="text/css">
.custom-date-style {
background-color: red !important;
}
.input{
}
.input-wide{
width: 500px;
}
</style>
</head>
<body>
<p><a href="http://xdsoft.net/jqplugins/datetimepicker/">Homepage</a></p>
<h3>DateTimePicker</h3>
<input type="text" value="" id="datetimepicker"/><br><br>
<h3>DateTimePickers selected by class</h3>
<input type="text" class="some_class" value="" id="some_class_1"/>
<input type="text" class="some_class" value="" id="some_class_2"/>
<h3>Mask DateTimePicker</h3>
<input type="text" value="" id="datetimepicker_mask"/><br><br>
<h3>TimePicker</h3>
<input type="text" id="datetimepicker1"/><br><br>
<h3>DatePicker</h3>
<input type="text" id="datetimepicker2"/><br><br>
<h3>Inline DateTimePicker</h3>
<!--<div id="console" style="background-color:#fff;color:red">sdfdsfsdf</div>-->
<input type="text" id="datetimepicker3"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
<h3>Button Trigger</h3>
<input type="text" value="2013/12/03 18:00" id="datetimepicker4"/><input id="open" type="button" value="open"/><input id="close" type="button" value="close"/><input id="reset" type="button" value="reset"/>
<h3>TimePicker allows time</h3>
<input type="text" id="datetimepicker5"/><br><br>
<h3>Destroy DateTimePicker</h3>
<input type="text" id="datetimepicker6"/><input id="destroy" type="button" value="destroy"/>
<h3>Set options runtime DateTimePicker</h3>
<input type="text" id="datetimepicker7"/>
<p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
<h3>onGenerate</h3>
<input type="text" id="datetimepicker8"/>
<h3>disable all weekend</h3>
<input type="text" id="datetimepicker9"/>
<h3>Default date and time </h3>
<input type="text" id="default_datetimepicker"/>
<h3>Show inline</h3>
<a href="javascript:void(0)" onclick="var si = document.getElementById('show_inline').style; si.display = (si.display=='none')?'block':'none';return false; ">Show/Hide</a>
<div id="show_inline" style="display:none">
<input type="text" id="datetimepicker10"/>
</div>
<h3>Disable Specific Dates</h3>
<p>Disable the dates 2 days from now.</p>
<input type="text" id="datetimepicker11"/>
<h3>Custom Date Styling</h3>
<p>Make the background of the date 2 days from now bright red.</p>
<input type="text" id="datetimepicker12"/>
<h3>Dark theme</h3>
<p>thank for this <a href="https://github.com/lampslave">https://github.com/lampslave</a></p>
<input type="text" id="datetimepicker_dark"/>
<h3>Date time format and locale</h3>
<p></p>
<select id="datetimepicker_format_locale">
<option value="en">English</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="uk">Ukrainian</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
</select>
<input type="text" value="D, l, M, F, Y-m-d H:i:s" id="datetimepicker_format_value"/>
<input type="button" value="applay =>" id="datetimepicker_format_change"/>
<input type="text" id="datetimepicker_format" class="input input-wide"/>
</body>
<script src="./jquery.js"></script>
<script src="node_modules/php-date-formatter/js/php-date-formatter.min.js"></script>
<script src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script>/*
window.onerror = function(errorMsg) {
$('#console').html($('#console').html()+'<br>'+errorMsg)
}*/
$.datetimepicker.setLocale('en');
$('#datetimepicker_format').datetimepicker({value:'2015/04/15 05:03', format: $("#datetimepicker_format_value").val()});
console.log($('#datetimepicker_format').datetimepicker('getValue'));
$("#datetimepicker_format_change").on("click", function(e){
$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
});
$("#datetimepicker_format_locale").on("change", function(e){
$.datetimepicker.setLocale($(e.currentTarget).val());
});
$('#datetimepicker').datetimepicker({
dayOfWeekStart : 1,
lang:'en',
disabledDates:['1986/01/08','1986/01/09','1986/01/10'],
startDate: '1986/01/05'
});
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:03', step:10});
$('.some_class').datetimepicker();
$('#default_datetimepicker').datetimepicker({
formatTime:'H:i',
formatDate:'d.m.Y',
//defaultDate:'8.12.1986', // it's my birthday
defaultDate:'+03.01.1970', // it's my birthday
defaultTime:'10:00',
timepickerScrollbar:false
});
$('#datetimepicker10').datetimepicker({
step:5,
inline:true
});
$('#datetimepicker_mask').datetimepicker({
mask:'9999/19/39 29:59'
});
$('#datetimepicker1').datetimepicker({
datepicker:false,
format:'H:i',
step:5
});
$('#datetimepicker2').datetimepicker({
yearOffset:222,
lang:'ch',
timepicker:false,
format:'d/m/Y',
formatDate:'Y/m/d',
minDate:'-1970/01/02', // yesterday is minimum date
maxDate:'+1970/01/02' // and tommorow is maximum date calendar
});
$('#datetimepicker3').datetimepicker({
inline:true
});
$('#datetimepicker4').datetimepicker();
$('#open').click(function(){
$('#datetimepicker4').datetimepicker('show');
});
$('#close').click(function(){
$('#datetimepicker4').datetimepicker('hide');
});
$('#reset').click(function(){
$('#datetimepicker4').datetimepicker('reset');
});
$('#datetimepicker5').datetimepicker({
datepicker:false,
allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00'],
step:5
});
$('#datetimepicker6').datetimepicker();
$('#destroy').click(function(){
if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
$('#datetimepicker6').datetimepicker('destroy');
this.value = 'create';
}else{
$('#datetimepicker6').datetimepicker();
this.value = 'destroy';
}
});
var logic = function( currentDateTime ){
if (currentDateTime && currentDateTime.getDay() == 6){
this.setOptions({
minTime:'11:00'
});
}else
this.setOptions({
minTime:'8:00'
});
};
$('#datetimepicker7').datetimepicker({
onChangeDateTime:logic,
onShow:logic
});
$('#datetimepicker8').datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date')
.toggleClass('xdsoft_disabled');
},
minDate:'-1970/01/2',
maxDate:'+1970/01/2',
timepicker:false
});
$('#datetimepicker9').datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date.xdsoft_weekend')
.addClass('xdsoft_disabled');
},
weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
timepicker:false
});
var dateToDisable = new Date();
dateToDisable.setDate(dateToDisable.getDate() + 2);
$('#datetimepicker11').datetimepicker({
beforeShowDay: function(date) {
if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
return [false, ""]
}
return [true, ""];
}
});
$('#datetimepicker12').datetimepicker({
beforeShowDay: function(date) {
if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
return [true, "custom-date-style"];
}
return [true, ""];
}
});
$('#datetimepicker_dark').datetimepicker({theme:'dark'})
</script>
</html>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
'jquery.datetimepicker.css',
'node_modules/php-date-formatter/js/php-date-formatter.js',
'jquery.js',
'jquery.datetimepicker.js',
'tests/bootstrap.js',
'tests/tests/*.js'
],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
browsers: ['Firefox'],
autoWatch: true,
singleRun: false, // Karma captures browsers, runs the tests and exits
concurrency: Infinity,
plugins: [
'karma-firefox-launcher',
'karma-mocha',
'karma-chai'
],
client: {
captureConsole: true
}
})
};
\ No newline at end of file
This diff could not be displayed because it is too large.
{
"name": "jquery-datetimepicker",
"version": "2.5.20",
"description": "jQuery Plugin DateTimePicker it is DatePicker and TimePicker in one",
"main": "build/jquery.datetimepicker.full.min.js",
"scripts": {
"test": "karma start --browsers Firefox karma.conf.js --single-run",
"concat": "concat-cli -f node_modules/php-date-formatter/js/php-date-formatter.min.js jquery.datetimepicker.js node_modules/jquery-mousewheel/jquery.mousewheel.js -o build/jquery.datetimepicker.full.js",
"minify": "uglifyjs jquery.datetimepicker.js -c -m -o build/jquery.datetimepicker.min.js && uglifycss jquery.datetimepicker.css > build/jquery.datetimepicker.min.css",
"minifyconcat": "uglifyjs build/jquery.datetimepicker.full.js -c -m -o build/jquery.datetimepicker.full.min.js",
"github": "git add --all && git commit -m \"New version %npm_package_version% \" && git tag %npm_package_version% && git push --tags origin HEAD:master && npm publish",
"build": "npm run minify && npm run concat && npm run minifyconcat",
"public": "npm run test && npm version patch --no-git-tag-version && npm run build && npm run github"
},
"repository": {
"type": "git",
"url": "https://github.com/xdan/datetimepicker.git"
},
"keywords": [
"jquery-plugin",
"calendar",
"date",
"time",
"datetime",
"datepicker",
"timepicker"
],
"author": "Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/)",
"license": "MIT",
"bugs": {
"url": "https://github.com/xdan/datetimepicker/issues"
},
"homepage": "https://github.com/xdan/datetimepicker",
"dependencies": {
"jquery": ">= 1.7.2",
"jquery-mousewheel": ">= 3.1.13",
"php-date-formatter": "^1.3.4"
},
"devDependencies": {
"chai": "^4.1.2",
"concat": "azer/concat",
"concat-cli": "^4.0.0",
"karma": "^2.0.0",
"karma-chai": "^0.1.0",
"karma-firefox-launcher": "^1.1.0",
"karma-mocha": "^1.3.0",
"mocha": "^5.0.4",
"uglifycss": "^0.0.27",
"uglifyjs": "^2.4.10"
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>jQuery DateTimepicker Tests </title>
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script>
mocha.ui('bdd');
mocha.reporter('html');
</script>
<link rel="stylesheet" href="./app.css" />
<link rel="stylesheet" href="../jquery.datetimepicker.css" />
<script src="../jquery.js"></script>
<script src="../node_modules/php-date-formatter/js/php-date-formatter.js"></script>
<script src="../jquery.datetimepicker.js"></script>
<script src="./tests/bootstrap.js"></script>
<script src="./tests/init.js"></script>
<script src="./tests/destroy.js"></script>
<script src="./tests/options.js"></script>
<script src="./tests/methods.js"></script>
<script src="./tests/events.js"></script>
<script>
window.onload = function() {
if (window.mochaPhantomJS) {
mochaPhantomJS.run();
} else {
mocha.run();
}
};
</script>
</body>
</html>
\ No newline at end of file
var inputs = [];
var box = document.createElement('div');
document.body.appendChild(box);
var getInput = function () {
var input = document.createElement('input');
input.setAttribute('type', 'text');
inputs.push(input);
box.appendChild(input);
return input;
};
var clear = function() {
inputs.forEach(function (inp) {
$(inp).datetimepicker('destroy');
inp.parentNode && inp.parentNode.removeChild(inp)
});
};
var PICKER = 'xdsoft_datetimepicker';
var simulateEvent = function (type, element, keyCodeArg, options) {
if (!keyCodeArg) {
keyCodeArg = 0;
}
if (element instanceof jQuery) {
element = element[0];
}
var evt = (element.ownerDocument || document).createEvent('HTMLEvents')
evt.initEvent(type, true, true);
evt.keyCode = keyCodeArg;
evt.which = keyCodeArg;
if (options) {
options(evt);
}
if (type.match(/^mouse/)) {
['pageX', 'pageY', 'clientX', 'clientY'].forEach(function (key) {
if (evt[key] === undefined) {
evt[key] = 0;
}
})
}
element.dispatchEvent(evt);
};
afterEach(clear);
var expect = chai.expect;
chai.config.includeStack = true
\ No newline at end of file
describe('Check destructor', function () {
describe('Init picker and after this init again with command destroy', function () {
it('Should remove picker from DOM and remove all listeners from original input', function (done) {
var input = getInput();
$(input).datetimepicker();
var dtp = $(input).data('xdsoft_datetimepicker');
expect(dtp).to.be.not.equal(null);
expect(dtp[0].tagName).to.be.equal('DIV');
expect(dtp[0].classList.contains('xdsoft_datetimepicker')).to.be.true;
expect(dtp.is(':hidden')).to.be.true;
$(input).datetimepicker('destroy');
expect($(input).data('xdsoft_datetimepicker')).to.be.equal(null);
$(input).trigger('mousedown')
setTimeout(function () {
expect(dtp.is(':hidden')).to.be.true;
done();
}, 150)
});
});
});
\ No newline at end of file
describe('Test events', function () {
describe('onSelectDate', function () {
it('Should fired after user selected day', function (done) {
var input= $(getInput()).val('2011/04/15');
var picker = input.datetimepicker({
onSelectDate: function (time, inp, evt) {
expect(picker).to.be.equal(this);
expect(time.getDate()).to.be.equal(17);
expect(time.getMonth()).to.be.equal(3);
expect(time.getFullYear()).to.be.equal(2011);
expect(inp[0]).to.be.equal(input[0]);
expect(evt.type).to.be.equal('click');
done();
},
format: 'Y/m/d'
}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var select = picker.find('td[data-date="17"][data-month="3"][data-year="2011"]');
expect(select.length).to.be.equal(1);
select.trigger('click');
}, 100);
});
});
});
\ No newline at end of file
describe('Init', function () {
describe('jQuery.fn', function () {
it('Should have datetimepicker method', function () {
expect(typeof jQuery.fn.datetimepicker).to.be.equal('function');
expect(typeof $.fn.datetimepicker).to.be.equal('function');
});
});
describe('jQuery.fn.datetimepicker', function () {
it('Should have `defaults` property', function () {
expect(typeof jQuery.fn.datetimepicker.defaults).to.be.equal('object');
expect(jQuery.fn.datetimepicker.defaults.format).to.be.equal('Y/m/d H:i');
});
});
describe('Create datetimepicker', function () {
describe('Without parameters', function () {
it('Should create plugin with default options', function (done) {
var input = getInput();
$(input).datetimepicker();
var dtp = $(input).data('xdsoft_datetimepicker');
expect(dtp).to.be.not.equal(null);
expect(dtp[0].tagName).to.be.equal('DIV');
expect(dtp[0].classList.contains('xdsoft_datetimepicker')).to.be.true;
expect(dtp.is(':hidden')).to.be.true;
$(input).trigger('mousedown')
setTimeout(function () {
expect(dtp.is(':hidden')).to.be.false;
done();
}, 150)
});
});
describe('In inline mode', function () {
it('Should create picker and replace original input', function () {
var input = getInput();
$(input).datetimepicker({
inline: true
});
var dtp = $(input).data('xdsoft_datetimepicker');
expect(dtp.is(':hidden')).to.be.false;
expect($(input).is(':hidden')).to.be.true;
});
});
});
describe('Set locale', function () {
describe('Change locale', function () {
it('Should create different pickers fro all locales', function (done) {
$.datetimepicker.setLocale('en');
var $input = $(getInput());
$input.datetimepicker({inline: true});
setTimeout(function () {
var text = $input.data('xdsoft_datetimepicker').text();
$input.datetimepicker('destroy');
$.datetimepicker.setLocale('ru');
$input.datetimepicker({inline: true});
setTimeout(function () {
expect($input.data('xdsoft_datetimepicker').text()).to.be.not.equal(text);
done();
}, 100)
}, 100)
});
});
});
describe('Select day', function () {
it('Should set selected date to input by format', function (done) {
var input= $(getInput()).val('2011/04/15');
var picker = input.datetimepicker({
format: 'Y/m/d'
}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var start = picker.find('td[data-date="15"][data-month="3"][data-year="2011"]');
expect(start.length).to.be.equal(1);
expect(start.hasClass('xdsoft_disabled')).to.be.false;
expect(start.hasClass('xdsoft_current')).to.be.true;
var select = picker.find('td[data-date="17"][data-month="3"][data-year="2011"]');
expect(start.length).to.be.equal(1);
select.trigger('click');
expect(input.val()).to.be.equal('2011/04/17')
done();
}, 100);
});
});
});
\ No newline at end of file
describe('Test methods', function () {
describe('Show', function () {
it('Should show picker', function () {
var input= $(getInput());
var picker = input
.datetimepicker()
.datetimepicker('show')
.data(PICKER);
expect(picker.is(':hidden')).to.be.false;
});
});
describe('Hide', function () {
it('Should hide picker', function () {
var input= $(getInput());
var picker = input
.datetimepicker()
.datetimepicker('show')
.data(PICKER);
expect(picker.is(':hidden')).to.be.false;
input.datetimepicker('hide')
expect(picker.is(':hidden')).to.be.true;
});
});
describe('Toggle', function () {
it('Should hide/show picker', function () {
var input= $(getInput());
var picker = input
.datetimepicker()
.datetimepicker('show')
.data(PICKER);
expect(picker.is(':hidden')).to.be.false;
input.datetimepicker('toggle')
expect(picker.is(':hidden')).to.be.true;
input.datetimepicker('toggle')
expect(picker.is(':hidden')).to.be.false;
});
});
describe('Reset', function () {
it('Should restore default value', function (done) {
var input= $('<input type="text" value="15.12.2008"/>').appendTo(document.body);
var picker = input
.datetimepicker({format: 'd.m.Y'})
.datetimepicker('show')
.data(PICKER);
setTimeout(function () {
var select = picker.find('td[data-date="16"][data-month="11"][data-year="2008"]');
expect(select.length).to.be.equal(1);
select.trigger('click');
expect(input.val()).to.be.equal('16.12.2008');
input.datetimepicker('reset');
expect(input.val()).to.be.equal('15.12.2008');
input.datetimepicker('destroy').remove();
done();
}, 100)
});
});
});
\ No newline at end of file
describe('Test options', function () {
describe('dayOfWeekStart', function () {
it('Should change default start of week', function (done) {
$.datetimepicker.setLocale('en');
var input = $(getInput());
var picker = input.datetimepicker({inline: true}).trigger('mousedown').data('xdsoft_datetimepicker');
setTimeout(function () {
var day = picker.find('th').eq(0).text();
var date = picker.find('td').eq(0).text();
input.datetimepicker('destroy');
var picker2 = $(getInput()).datetimepicker({
inline: true,
dayOfWeekStart: 2
}).trigger('mousedown').data(PICKER);
setTimeout(function () {
expect(picker2.find('th').eq(0).text()).to.be.not.equal(day);
expect(picker2.find('td').eq(0).text()).to.be.not.equal(date);
done();
}, 100);
}, 100);
});
});
describe('disabledDates and startDate', function () {
it('Should disable some dates in picker and picker should be open on startDate', function (done) {
var input= $(getInput());
var picker = input.datetimepicker({
disabledDates:['1986/01/08','1986/01/09','1986/01/10'],
startDate: '1986/01/05'
}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var day = picker.find('td[data-date="8"][data-month="0"][data-year="1986"]');
expect(day.hasClass('xdsoft_disabled')).to.be.true;
var start = picker.find('td[data-date="5"][data-month="0"][data-year="1986"]');
expect(start.length).to.be.equal(1);
expect(start.hasClass('xdsoft_disabled')).to.be.false;
done();
}, 100);
});
});
describe('defaultDate', function () {
it('Should open picker on some date', function (done) {
var input= $(getInput());
var picker = input.datetimepicker({formatDate:'d.m.Y', defaultDate: '+03.01.1970'}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var now = new Date();
now.setDate(now.getDate() + 2)
var start = picker.find('td[data-date="' + now.getDate() + '"][data-month="' + now.getMonth() + '"][data-year="' + now.getFullYear() + '"]');
expect(start.length).to.be.equal(1);
expect(start.hasClass('xdsoft_disabled')).to.be.false;
expect(start.hasClass('xdsoft_current xdsoft_today')).to.be.true;
done();
}, 100);
});
});
describe('Value', function () {
it('Should set value to plugin', function (done) {
var input= $(getInput());
var picker = input.datetimepicker({value: '2011/04/15 05:03'}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var start = picker.find('td[data-date="15"][data-month="3"][data-year="2011"]');
expect(start.length).to.be.equal(1);
expect(start.hasClass('xdsoft_disabled')).to.be.false;
done();
}, 100);
});
});
describe('timepicker = false', function () {
it('Should create only datepicker', function (done) {
var input= $(getInput());
var picker = input.datetimepicker({
timepicker: false
}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var timepicker = picker.find('.xdsoft_timepicker');
expect(timepicker.length).to.be.equal(1);
expect(timepicker.is(':hidden')).to.be.true;
done();
}, 100);
});
});
describe('datepicker = false', function () {
it('Should create only timepicker', function (done) {
var input= $(getInput());
var picker = input.datetimepicker({
datepicker: false
}).trigger('mousedown').data(PICKER);
setTimeout(function () {
var datepicker = picker.find('.xdsoft_datepicker');
expect(datepicker.length).to.be.equal(1);
expect(datepicker.is(':hidden')).to.be.true;
done();
}, 100);
});
});
});
\ No newline at end of file
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.ttf') format('truetype');
}
\ No newline at end of file
<html>
<head>
<link rel="stylesheet" href="toast.css"/>
<script src="toast.js" charset="utf-8"></script>
</head>
<script type="text/javascript">
function init () {
drawToast("HTML toast likes Android");
}
</script>
<body onload="init();">
</body>
</html>
\ No newline at end of file
#toast{
position: fixed;
top: 80%;
left: 50%;
width: 200px;
background-color: black;
color:white;
margin-left: -100px;
border: 1px solid #666;
padding: 10px 0 ;
text-align:center;
opacity: .9;
/* opacity time */
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
/* round border */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
\ No newline at end of file
var intervalCounter = 0;
function hideToast(){
var alert = document.getElementById("toast");
alert.style.opacity = 0;
clearInterval(intervalCounter);
}
function drawToast(message){
var alert = document.getElementById("toast");
if (alert == null){
var toastHTML = '<div id="toast">' + message + '</div>';
document.body.insertAdjacentHTML('beforeEnd', toastHTML);
}
else{
alert.style.opacity = .9;
}
intervalCounter = setInterval("hideToast()", 1000);
}
\ No newline at end of file
{% extends "main.html" %}
{% block head %}
{% endblock %}
{% block style %}
<style>
#btn2 {
width: 150px;
height: 47px;
font-size:25px;
font-family: '배달의민족 도현';
color: gray;
background: white;
border: solid 5px white;
border-radius: 5px;
}
input[type=text] {
width: 60%;
padding: 12px 20px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
font-family: '배달의민족 도현';
display: inline;
float: right;
}
input[type=text]:focus {
border: 3px solid #555;
}
input[type=password] {
width: 60%;
padding: 12px 20px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
display: inline;
float: right;
}
input[type=password]:focus {
border: 3px solid #555;
}
select{
width: 60%;
padding: 12px 20px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
font-family: '배달의민족 도현';
display: inline;
float: right;
border-radius: 5px;
}
h2 {
display: inline;
vertical-align: bottom;
}
input{
}
#wrapper {
width: 400px;
}
.item{
height: 50px;
}
</style>
{% endblock %}
{% block content %}
<a href="/myhome"> <img style="border-radius:15px;" width="300px;" src="{{ url_for('static', filename = 'logo.png') }}"/></a>
<form action="/join/confirm" method="post">
<br><br>
<div id="wrapper">
<div class="item"><H2>ID</H2><input style="border-radius:10px;" type="text" name="id" placeholder="ID 입력" required></div>
<div class="item"><H2>PW</H2><input style="border-radius:10px;" type="password" name="password" placeholder="비밀번호 입력" required><br></div>
<div class="item"><H2>이름</H2><input style="border-radius:10px;" type="text" name="name" placeholder="사용자 이름 입력" required><br></div>
<div class="item"><H2>메일주소</H2><input style="border-radius:10px;" type="text" name="email" placeholder="메일주소 입력" required><br></div>
<div class="item"><H2>전화번호</H2><input style="border-radius:10px;" type="text" name="phone" placeholder="전화번호 입력" required><br></div>
<div class="item"><H2>부서 ID</H2>
<select name="deptid" required><option value="1">전자정보대학</option>
<option value="2">외국어대학</option>
<option value="3">공과대학</option>
<option value="4">예술디자인대학</option>
<option value="5">체육대학</option>
<option value="6">국제대학</option>
<option value="7">대학본부</option></select>
<br></div>
</div>
<br>
<center><input type="submit" id="btn2" value="회원가입"></center><br>
</form>
{% endblock %}
\ No newline at end of file
<!doctype html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
&copy; Copyright 2010 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>로그인화면</title>
</head>
{% extends "main.html" %}
{% block title %}Select Menu{% endblock %}
{% block head %}
{% endblock %}
{% block style %}
<style>
body {
background-color: rgb(230, 243, 255);
......@@ -20,6 +21,8 @@ input[type=text] {
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
font-family: 'MyWebFont';
min-width: 200px;
}
input[type=text]:focus {
border: 3px solid #555;
......@@ -34,6 +37,8 @@ input[type=password] {
transition: 0.5s;
outline: none;
margin-right: 7px;
font-family: 'MyWebFont';
min-width: 200px;
}
input[type=password]:focus {
border: 3px solid #555;
......@@ -42,7 +47,7 @@ input[type=password]:focus {
width: 120px;
height: 45px;
font-size:25px;
font-family: '배달의민족 도현';
font-family: 'MyWebFont';
color: gray;
background: white;
border: solid 5px white;
......@@ -52,39 +57,31 @@ input[type=password]:focus {
width: 150px;
height: 47px;
font-size:25px;
font-family: '배달의민족 도현';
font-family: 'MyWebFont';
color: gray;
background: white;
border: solid 5px white;
border-radius: 5px;
}
h2 {
font-family: '배달의민족 도현';
font-family: 'MyWebFont';
}
</style>
<body>
</style>
{% endblock %}
{% block content %}
<br><br>
<br><br>
<img style="border-radius:15px;" width="300px;" src="캡처6.png"/>
<form>
<img style="border-radius:15px;" width="300px;" src="{{ url_for('static', filename = 'logo.png') }}"/>
<br>
<form action="/logincheck" method="post">
<center><H2>ID&nbsp;&nbsp;<input style="border-radius:10px;" type="text" name="id" placeholder="ID 입력" required><br></H2></center>
<center><H2>PW&nbsp;<input style="border-radius:10px;" type="password" name="password" placeholder="비밀번호 입력" required><br></H2></center>
<center><H2>PW&nbsp;<input style="border-radius:10px;" type="password" name="pw" placeholder="비밀번호 입력" required><br></H2></center>
<br>
<center><button id="btn1">로그인</button></center><br>
<center><button id="btn2">회원가입</button></center><br>
<!--<center><button class="btn;" id="btn;" type="submit;"><img width="120;" height="45;" class="btn-img" src="로그인.png"></button></center><br>
<center><button class="btn;" id="btn;" type="submitl"><img width="150;" height="47;" class="btn-img" src="회원가입.png"></button></center><br>-->
<img width="100;" height="70;" align="bottom;" src="khu.png"/>
</form>
</body>
</html>
\ No newline at end of file
<center><input type="submit" id="btn1" value="로그인" ></center><br></form>
<center><button id="btn2" onclick="window.location.href='/join'">회원가입</button></center><br>
{% endblock %}
......
<!DOCTYPE html>
<html>
<head>
<title>대여화면1</title>
{% block head %}
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
<link rel="stylesheet" href="{{url_for('static', filename='toast/toast.css')}}"/>
<script src="{{url_for('static', filename='toast/toast.js')}}" charset="utf-8"></script>
</head>
<script type="text/javascript">
function init () {
drawToast("HTML toast likes Android");
}
</script>
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='font.css')}}"/>
<style>
body {
background-color: rgb(230, 243, 255);
font-family: 'MyWebFont';
}
img {
display:block;
margin:auto;
}
#page_title{
font-family : 'MyWebFont';
text-align: center;
color: gray;
}
#btn1 {
width: 150px;
height: 150px;
font-size:32px;
font-family: '배달의민족 도현';
font-family: 'MyWebFont';
color: rgb(165, 210, 134);
background: white;
border: solid 5px white;
border-radius: 50%;
margin-right: 150px;
margin-top: 50px;
}
#btn2 {
width: 150px;
height: 150px;
font-size:32px;
font-family: '배달의민족 도현';
font-family: 'MyWebFont';
color: rgb(251, 199, 205);
background: white;
border: solid 5px white;
border-radius: 50%;
margin-left: 150px;
margin-top: 50px;
}
#btn3 {
width: 150px;
height: 150px;
font-size:32px;
font-family: 'MyWebFont';
color: rgb(165, 210, 134);
background: white;
border: solid 5px white;
border-radius: 50%;
margin-top: 50px;
}
</style>
{% block style %}{% endblock %}
<body>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<script type="text/javascript">drawToast("{{ message }}")</script>
{% endfor %}
{% endif %}
{% endwith %}
<br><br>
<img style="border-radius:15px;" width="300px;" src="캡처6.png"/><br>
<form>
<br>
<center><button id="btn1">대여하기</button></center>
<center><button id="btn2">대여현황</button></center>
<center><div id="content">{% block content %}{% endblock %}</div></center>
<br><br><br><br>
<img width="100;" height="70;" align="bottom;" src="khu.png"/>
<img width="100;" height="70;" align="bottom;" src="{{ url_for('static', filename = 'khu.PNG') }}"/>
</form>
......
{% extends "main.html" %}
{% block title %}Select Menu{% endblock %}
{% block head %}
{% endblock %}
{% block style %}
<style>
body {
background-color: rgb(230, 243, 255);
}
img {
display:block;
margin:auto;
}
#btn1 {
width: 150px;
height: 150px;
font-size:32px;
font-family: 'MyWebFont';
color: rgb(165, 210, 134);
background: white;
border: solid 5px white;
border-radius: 50%;
margin-top: 50px;
}
#btn2 {
width: 150px;
height: 150px;
font-size:32px;
font-family: 'MyWebFont';
color: rgb(251, 199, 205);
background: white;
border: solid 5px white;
border-radius: 50%;
margin-top: 50px;
}
#btn3 {
width: 150px;
height: 150px;
font-size:32px;
font-family: 'MyWebFont';
color: rgb(165, 210, 134);
background: white;
border: solid 5px white;
border-radius: 50%;
margin-top: 50px;
}
</style>
{% endblock %}
{% block content %}
<br><br>
<img style="border-radius:15px;" width="300px;" src="{{ url_for('static', filename = 'logo.png') }}"/><br>
<br>
<center><button id="btn1" onclick="window.location.href='/search'">대여하기</button></center>
<center><button id="btn2" onclick="window.location.href='/viewresv'">대여현황</button></center>
<center><button id="btn3" onclick="window.location.href='/logout'">로그아웃</button></center>
{% endblock %}
\ No newline at end of file
{% extends "main.html" %}
{% block head %}
{% endblock %}
{% block style %}
<style>
body {
background-color: rgb(230, 243, 255);
}
#select1 {
width: 300px;
border: 3px solid rgb(191, 191, 191);
border-radius: 4px;
font-size: 20px;
font-family: '배달의민족 도현';
background-color: rgb(230, 243, 255);
background-position: 5px 2.5px;
-webkit-appearance: none;
-moz-appearance: none;
background: url('select-arrow.png') no-repeat 95% 50%;
padding: 10px 10px 10px 20px;
}
select::-ms-expand {
display: none;
}
#select2 {
width: 150px;
border: 3px solid rgb(191, 191, 191);
border-radius: 4px;
font-size: 20px;
font-family: '배달의민족 도현';
background-color: rgb(230, 243, 255);
background-position: 5px 2.5px;
-webkit-appearance: none;
-moz-appearance: none;
background: url('select-arrow.png') no-repeat 95% 50%;
padding: 10px 10px 10px 20px;
margin-left: 50;
}
input[type=number] {
width: 109px;
border: 3px solid rgb(191, 191, 191);
border-radius: 4px;
font-size: 20px;
font-family: '배달의민족 도현';
background-color: rgb(230, 243, 255);
background-position: 5px 2.5px;
padding: 10px 10px 10px 20px;
margin-left: 50;
}
input[type=text] {
width: 300px;
box-sizing: border-box;
border: 3px solid rgb(191, 191, 191);
border-radius: 4px;
font-size: 18px;
font-family: '배달의민족 도현';
background-color: rgb(230, 243, 255);
padding: 10px 10px 10px 20px;
}
input[type=submit] {
width: 300px;
box-sizing: border-box;
border: 3px solid rgb(251, 199, 205);
border-radius: 4px;
font-size: 25px;
font-family: '배달의민족 도현';
background-color: rgb(251, 199, 205);
padding: 10px 10px 10px 10px;
}
input[type=datetime-local] {
width: 320px;
box-sizing: border-box;
border: 3px solid rgb(191, 191, 191);
border-radius: 4px;
font-size: 18px;
font-family: '배달의민족 도현';
background-color: rgb(230, 243, 255);
padding: 10px 10px 10px 20px;
}
#btn1 {
width: 147px;
height: 60px;
font-size:16px;
font-family: '배달의민족 도현';
text-align: left;
color: gray;
background: white;
border: solid 5px white;
border-radius: 5px;
vertical-align: bottom;
}
#btn2 {
width: 147px;
height: 60px;
font-size:25px;
font-family: '배달의민족 도현';
color: rgb(045, 098, 155);
background: white;
border: solid 5px white;
border-radius: 5px;
}
#btn3 {
width: 147px;
height: 60px;
font-size:25px;
font-family: '배달의민족 도현';
color: rgb(164, 025, 018);
background: white;
border: solid 5px white;
border-radius: 5px;
}
#btn3 {
width: 65px;
height: 65px;
font-size:25px;
font-family: '배달의민족 도현';
color: rgb(164, 025, 018);
border-radius: 50%;
border: solid 5px rgb(230, 243, 255);
background-image: url('back-arrow.png');
}
form {
font-family: '배달의민족 도현';
font-size:20px;
}
#wrapper {
width: 400px;
text-align: center;
display: inline-block;
}
select{
width: 60%;
padding: 12px 20px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
font-family: '배달의민족 도현';
display: inline;
float: right;
border-radius: 5px;
}
#maxpeople{
width: 60%;
padding: 12px 20px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
font-family: '배달의민족 도현';
display: inline;
float: right;
border-radius: 5px;
}
.item{
height: 50px;
margin: 10px;
}
h3 {
display: inline-block;
vertical-align: middle;
margin-top: 15px;
}
</style>
{% endblock %}
{% block content %}
<br>
<a href="/myhome"> <img style="border-radius:15px;" width="300px;" src="{{ url_for('static', filename = 'logo.png') }}"/></a>
<div id="wrapper">
<form action="/search/result" method="post">
<br><br>
<div class="item"><H3>건물</H3>
<select name="deptid" required><option value="전자정보대학">전자정보대학</option>
<option value="외국어대학">외국어대학</option>
<option value="공과대학">공과대학</option>
<option value="예술,디자인대학">예술,디자인대학</option>
<option value="체육대학">체육대학</option>
<option value="국제대학">국제대학</option>
<option value="1호관 테니스장">1호관 테니스장</option>
<option value="3호관 운동장">3호관 운동장</option>
<option value="3호관 테니스장">3호관 테니스장</option>
<option value="6호관 야구장">6호관 야구장</option>
<option value="6호관 운동장">6호관 운동장</option>
<option value="골프 연습장">골프 연습장</option>
<option value="6호관 운동장">6호관 운동장</option>
<option value="수영장">수영장</option>
<option value="필드 하키장(공과대학 앞)">필드 하키장(공과대학 앞)</option>
<option value="학생회관">학생회관</option></select>
<br></div>
<center><div class="item"><H3>사용 인원 수</H3><input type="number" id="maxpeople" name="capacity" min="1" max="200"></div></center><br>
<center>시작 시간<br><br><input type="datetime-local" name="starttime"></center><br>
<center>종료 시간<br><br><input type="datetime-local" name="endtime"></center><br>
<br>
<center><input type="submit" value="검색"></center></form>
</div>
{% endblock %}
\ No newline at end of file
{% extends "main.html" %}
{% block title %}예약 현황{% endblock %}
{% block head %}
{% endblock %}
{% block style %}
<style>
#list_item{
width: 275px;
height: 100px;
font-size:20px;
font-family: '배달의민족 도현';
color: gray;
background: white;
border: solid 5px white;
border-radius: 5px;
vertical-align: bottom;
line-height: 150%;
display: inline-block;
}
#delete_btn{
width: 47px;
height: 110px;
box-sizing: border-box;
font-size: 20px;
font-family: '배달의민족 도현';
background-color: rgb(255, 101, 101);
color: white;
border-radius:5px;
border: solid 5px rgb(255, 101, 101);
float: right;
display: inline-block;
}
</style>
{% endblock %}
{% block content %}
<a href="/myhome"> <img style="border-radius:15px;" width="300px;" src="{{ url_for('static', filename = 'logo.png') }}"/></a>
<h1>예약 현황</h1>
{% if not resv_list %}
<p>예약 데이터가 없습니다.</p>
{% endif %}
<table>
{% for resv_item in resv_list %}
<tr><td><form method="post" action="/deleteresv"><div id="list_item">{{ resv_item[3] }} {{ resv_item[4] }}<br>{{ resv_item[6].strftime('%Y-%m-%d') }}<br>{{ resv_item[6].strftime('%H:%M') }} ~ {{ resv_item[7].strftime('%H:%M') }}<form method="post" action="/deleteresv"><input type="hidden" name="resv_id" value="{{ resv_item[0] }}"></div><input type="submit" id="delete_btn" value="X"></form></td></tr>
{% endfor %}
</table>
{% endblock %}
\ No newline at end of file
{% extends "main.html" %}
{% block title %}예약 현황{% endblock %}
{% block head %}
{% endblock %}
{% block style %}
<style>
#list_item{
width: 263px;
height: 100px;
font-size:20px;
font-family: '배달의민족 도현';
color: gray;
background: white;
border: solid 5px white;
border-radius: 5px;
vertical-align: bottom;
line-height: 150%;
display: inline-block;
padding-left: 7px;
}
#delete_btn{
width: 60px;
height: 110px;
box-sizing: border-box;
font-size: 20px;
font-family: '배달의민족 도현';
background-color: rgb(90, 200, 90);
color: white;
border-radius:5px;
border: solid 5px rgb(90, 200, 90);
float: right;
display: inline-block;
}
</style>
{% endblock %}
{% block content %}
<a href="/myhome"> <img style="border-radius:15px;" width="300px;" src="{{ url_for('static', filename = 'logo.png') }}"/></a><br>
<h1>검색 결과</h1>
{% if resv_list[0][0] == "NoAvailableFacilities" %}
<p>가능한 강의실이 없습니다.</p>
{% else %}
<table>
{% for resv_item in resv_list %}
<tr><td><form method="post" action="/search/resv"><div id="list_item">{{ resv_item[1] }} {{ resv_item[2] }}<br>{{ starttime.strftime('%Y-%m-%d') }}<br>{{ starttime.strftime('%H:%M') }} ~ {{ endtime.strftime('%H:%M') }}
<input type="hidden" name="fac_id" value="{{ resv_item[0] }}">
<input type="hidden" name="start_time" value="{{ starttime.strftime('%Y-%m-%d%H:%M') }}">
<input type="hidden" name="end_time" value="{{ endtime.strftime('%Y-%m-%d%H:%M') }}">
</div><input type="submit" id="delete_btn" value="예약"></form></td></tr>
{% endfor %}
</table>
{% endif %}
{% endblock %}
user_id = ' '
user_passwd = ' '
\ No newline at end of file