'2016/11/07'에 해당되는 글 3건

아래 그림처럼 jquery timepicker 를 이용하여 시간 select 하기.

1. 필요한 파일

jquery.timepicker.css

jquery.timepicker.min.js

다운로드 : 

jquery-timepicker.zip

두 파일을 적당한 곳에 올리고 timepicker를 적용할 파일에 인클루드 한다.

<input type="text" name="time1" value="" placeholder="시간선택"  id="time1" required size="8" maxlength="5">

2. 

$("#time1").timepicker({

step: 5,            //시간간격 : 5분

timeFormat: "H:i"    //시간:분 으로표시

});

기타 timeFormat 옵션

H : 24시간제로 표시

h : 12시간제로 표시

i : 분

s : 초

A : AM/PM표시

H:i:s : 24시간:분:초 로 표시

H:i A : 24시간:분 AM으로 표시

페이지 로딩시 현재시간 자동으로 입력.

$(document).ready(function(){

$("#time1").timepicker('setTime', new Date());

});

기타 자세한 내용은 아래 링크에서 확인

https://github.com/jonthornton/jquery-timepicker

끝.

아래 그림처럼 query datepicker 에서 오늘 날짜 배경색을 다른 색으로 변경하기.

방식은 오늘 날짜에 적용할 스타일을 만들고 datepicker() 안에서 적용한다.

<input type="text" name="date1" value="" readonly id="date1" required size="9" maxlength="8" placeholder="날짜선택"> 

1. 스타일 추가

jquery-ui.css 파일에 아래 내용을 추가한다.

jquery-ui.css 파일이 아니어도 상관없으며 datepicker가 사용되는 페이지에서 호출되는 css 파일이면 된다.

/*아래는 추가할 내용*/

.Highlighted a{

   background-color : #456baf !important;

   background-image :none !important;

   color: White !important;

   font-weight:bold !important;

   font-size: 12px;

}

2. datepicker 수정

$(function(){ // 날짜 입력

var today = new Date();

var dd = today.getDate();

var mm = today.getMonth()+1;

var yyyy = today.getFullYear();

if(dd < 10){

dd = '0'+dd

}

if(mm < 10){

mm = '0'+mm

}

today = yyyy+'/'+mm+'/'+dd;     //오늘날짜 ex. 2016/11/12

var todaydate = [today];        //배열에 넣음

$("#date1").datepicker({ 

changeMonth: true, 

changeYear: true, 

dateFormat: "yymmdd", 

        minDate: 0,

        maxDate: '+1Y+6M',

showButtonPanel: true,

beforeShowDay: function(dateStr){

var dd = dateStr.getDate();

var mm = dateStr.getMonth()+1;

var yyyy = dateStr.getFullYear();

if(dd < 10){

dd = '0'+dd

}

if(mm < 10){

mm = '0'+mm

}

date = yyyy+'/'+mm+'/'+dd;        //jquery 달력의 날짜를 yyyy/mm/dd 형태로 만듬.

var Highlight = todaydate[date];    //스타일을 적용할 날짜

if ($.inArray(date, todaydate) >= 0) {    //jquery달력의 날짜가 오늘날짜와 같다면

return [true, "Highlighted", Highlight];    //스타일 적용

}else{

return [true, '', ''];

}

},

});

끝.

ui-bg_flat_75_ffffff_40x100.png 

파일이 없다고 나올때

첨부파일을 해당 경로에 추가해 준다.

ui-bg_flat_75_ffffff_40x100.zip

압축을 풀면 

ui-bg_flat_75_ffffff_40x100.png

파일이 나옴.