Kawa.netxp [JavaScript] JKL.Calendar�^�|�b�v�A�b�v����J�����_�[�\���N���X

JKL.Calendar �́A�|�b�v�A�b�v�ŃJ�����_�[�\�����s���N���X�ł��B

2006�N10���ɃN���X����ύX���܂������A2005�N4���̃����[�X�����̃N���X�� JKL.Calender ��
�ʖ���`���Ă���̂ŁA����������p�”\�ł��B���N�O�ɂ��w�E���������� typo �ł����B
���킹�āA�I���”\�ȓ��t�͈͎w��p�̃v���p�e�B min_date�^max_date ��lj����܂����B

Yahoo! UI ���C�u�����̃J�����_�[�@�\�����Ȃ苭�͂Ȃ̂ŁA �ŋ߂Ȃ� YUI ���I�X�X���ł������ł����A
���� JKL.Calendar �̕������{��‹��ł͎g���₷�������肷�邩������܂���B

JavaScript �\�[�X�̃_�E�����[�h�͂�����F jkl-calendar.js JavaScript
�i�E�N���b�N���ām�Ώۂ��t�@�C���ɕۑ��n��I���j

��MOM���� �@�\�A�b�v�o�[�W���� ��񋟂���Ă��܂��̂ŁA��������������������B

�ȉ��̂悤�ȃt�H�[���ŗ��p���܂��B�i���͗����N���b�N���Ă݂Ă��������j

���t��I���F

�g����

�܂��AHTML �w�b�_���� jkl-calendar.js ���Ăяo���܂��B

<head>
<script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script>
</head>

���ɁA�y�[�W���̔C�ӂ̈ʒu�ɁA���L�̃X�N���v�g�𖄂ߍ��݂܂��B

<script><--
    var cal1 = new JKL.Calendar("calid","formid","colname");
//--></script>

1�s�ڂ� new JKL.Calendar() �R���X�g���N�^���Ăяo���A�ȉ��̕R�t�����s���Ă��܂��B

setFormValue() ���\�b�h�ł́A�f�t�H���g�l�Ƃ��č����̓��t���������͂��Ă��܂��B
�Ō�ɁA���t���͂̃t�H�[�����Ɉȉ��̂悤�� onClick�EonChange �C�x���g��lj����Ă��������B

<form id="formid" action="">
	���t��I���F
    <input type="text" name="colname" onClick="cal1.write();" 
        onChange="cal1.getFormValue(); cal1.hide();"><br>
    <div id="calid"></div>
</form>

onClick="" �C�x���g�ɂ��A�}�E�X�N���b�N�ŃJ�����_�[���|�b�v�A�b�v�\�����܂��B

�����̃J�����_�[�𗘗p����ꍇ

�����̓��͗��𗘗p���邱�Ƃ��”\�ł��B
�ȉ��̂悤�ɕ����� JKL.Calendar �I�u�W�F�N�g�𗘗p���܂��B
�J�����_�[�}���p�� div �v�f�� id ���A�J�u��Ȃ��悤�ɕ����Ă��������B
��ʂ��₷���悤�ɁAsetStyle() �ŃJ�����_�[�̃t���[���̐F��ς��Ă��܂��B
�܂��AonClick �ŕЕ��̃J�����_�[���J���Ƃ��ɂ́Ahide() �ő�����‚��܂��B

���t�͈͂�I���F
�`
<script><--
    var cal2 = new JKL.Calendar("caldiv2","formid","start_date");
    cal2.setStyle( "frame_color", "#3333CC" );
    var cal3 = new JKL.Calendar("caldiv3","formid","last_date");
    cal3.setStyle( "frame_color", "#CC3333" );
//--></script>
<table><tr>
    <td>���t�͈͂�I���F</td>
    <td><input type="text" name="start_date" onClick="cal3.hide(); cal2.write();" 
        onChange="cal2.getFormValue(); cal2.hide();"><br><div id="caldiv2"></div></td>
    <td>�`</td>
    <td><input type="text" name="last_date" onClick="cal2.hide(); cal3.write();" 
        onChange="cal3.getFormValue(); cal3.hide();"><br><div id="caldiv3"></div></td>
</tr></table>

�\���X�^�C���̃J�X�^�}�C�Y

JKL.Calendar �Ń|�b�v�A�b�v�\�������J�����_�[�̐F�Ȃǂ̓J�X�^�}�C�Y�ł��܂��B

    cal3.setStyle( "���ږ�", "�l" );

setStyle() �Ŏw��ł��鍀�ڂ͈ȉ��̒ʂ�ł��B

���t�I�����̃t�F�[�h�A�E�g

�f�t�H���g�ł́A���t��I������ƃ|�b�v�A�b�v�̃J�����_�[�̓X�O�ɏ����܂����A JKL.Calendar �N���X�������Ȃ� JKL.Opacity �N���X�����݂���ꍇ�� ���t�I����ɃJ�����_�[�����̃t�F�[�h�A�E�g�\�����s���܂��B
�i�|�b�v�A�b�v���������ɂȂ��ď����čs���̂����C�ɓ���I�j

<head>
<script type="text/javascript" src="jkl-calendar.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="jkl-opacity.js" charset="Shift_JIS"></script>
</head>

���̃t�F�[�h�A�E�g�𗘗p����菇�͊ȒP�ŁA jkl-calendar.js �ɉ����� jkl-opacity.js
���Ăяo���Ă���������OK�ł��B
���̃y�[�W�̃|�b�v�A�b�v�J�����_�[���t�F�[�h�A�E�g�𗘗p���Ă��܂��B

�I���”\���t�͈͂̎w��

�f�t�H���g�ł́A�C�ӂ̓��t��I���ł��܂��B
���������`������������I�����������ꍇ�́Amin_date �v���p�e�B�ɑI���”\�ȍŏ��̓��t�A max_date �v���p�e�B�ɍŌ�̓��t��Date �I�u�W�F�N�g�Ŏw�肵�Ă��������B new Date() �̈����� "�N/��/��" �̌`���Ŏw�肵�܂��B

���t��I���F �@�i�͈͎w�肠��j
<script><!--
    var cal4 = new JKL.Calendar("calid","formid","colname");
    cal4.min_date = new Date( "2006/10/09" );
    cal4.max_date = new Date( "2006/11/12" );
//--></script>

min_date�Emax_date ���w�肵�Ȃ��ꍇ�͐����͂�����܂���B
�Е��̒l�݂̂��w�肷�邱�Ƃ��ł��܂��̂ŁA new Date() �Ō��݂̓��t�𐶐����� max_date �Ɏw�肷��΁A �����ȍ~�̓��t�݂̂�I���”\�ȃt�H�[���ɂȂ�܂��B

���t�I���F �@�i�����ȍ~�̂݁j
<script><!--
    var cal5 = new JKL.Calendar("calid","formid","colname");
    cal5.min_date = new Date();
//--></script>

�X�V����

�R�����g�͂������ by AjaxCom

���̑��̃y�[�W�ւ̃����N

���̃y�[�W�ւ̃g���b�N�o�b�N by AjaxTB

�g���b�N�o�b�NURL�Fhttp://www.kawa.net/service/tb/ajaxtb.cgi/works/js/jkl/calender.html

Kawa.netxp © Copyright 2002-2006 Yusuke Kawasaki