Cara Mengubah Tampilan Tanggal di Cimande
Sharing pengetahuan baru yuuuuukkkk???
Kalian tau gak cara mengubah tampilan tanggal di cimande???
Kalau belum tahu kalian bisa baca blog ku ini,pelajari juga yahhh??? :)
Berikut ini contoh gambar tampilan tanggal yang ada di jscalendar-1.0 :
1.calendar-blue
"gambar calendar-blue"
2.calendar-blue2
"gambar calendar-blue2"
3.calendar-brown
"gambar calendar-brown"
4.calendar-green
"gambar calendar-green"
5.calendar-system
"gambar calendar-system"
6.calendar-tas
"gambar calendar-tas"
7.calendar-win2k-1
"gambar calendar-win2k-1"
8.calendar-win2k-2
"gambar calendar-win2k-2"
9.calendar-win2k-cold-1
"gambar calendar-win2k-cold-1"
10.calendar-win2k-cold-2
"gambar calendar-win2k-cold-2"
Kalau mau ngubah tampilan sesuai dengan gambar diatas cukup mudah kok,
cukup ubah nama calendar yang ada di link script htmlnya.
ex : <link rel="stylesheet" href='../../css/jscalendar-1.0/calendar-blue2.css' type="text/css" />
Terus kalau kalian mau lihat macam-macam tampilannya lihat aja di cimeng,webcontent,css.
Nanti pasti ada jenis-jenisnya seperti yang telah saya contohkan diatas.
tapi sebelum itu harus ada jscalender-1.0 di cimengnya.
jika belum punya bisa download di sini http://www.brothersoft.com/jscalendar-9063.html
Bagi yang magang di meruvian bisa minta temen-temen dan kakak senior..... :)
Berikut script html yang digunakan pada pembuatan tanggal :
*Script ini diletakkan di bagian atas :
<link rel="stylesheet" href='../../css/jscalendar-1.0/calendar-blue2.css' type="text/css" />
<link rel="stylesheet" href='../../css/jstabs.css' type="text/css" />
<link rel="stylesheet" href='../../css/form.css' type="text/css" />
<link rel="stylesheet" href='../../css/menu.css' type="text/css" />
<script src="../../jscript/simple_ajax.js"></script>
<script src="../../jscript/jscalendar-1.0/calendar.js"></script>
<script src="../../jscript/jscalendar-1.0/lang/calendar-ina.js"></script>
<script src="../../jscript/jscalendar-1.0/calendar-setup.js"></script>
<script src="../../jscript/jstabs.js"></script>
<script src="../../jscript/currency.js"></script>
<script src="../../jscript/prototype.js"></script>
<script src="../../jscript/rico.js"></script>
<script>
function calendarSetup(textFieldID,btnID) {
Calendar.setup ({inputField:textFieldID,ifFormat:"%d-%m-%Y",button:btnID});
}
function genRandom(){
var dt = new Date();
var result = Math.floor(Math.random( ) * (dt.getTime()));
return result;
}
function enlargeScreen(){
}
function normalScreen(){
}
</script>
<style type="text/css">
</style>
*Script ini diletakkan pada inputan tanggal nya :
<input name="startDate" id="f_date_a" value="$!startDate" readonly dir="rtl" maxlength="255"/>
<img name="popcal" id="btn_f_date_a" align="absmiddle" src="../../jscript/jscalendar-1.0/img.jpg"
width="34" height="22" border="0" alt="" />
*Script ini diletakkan di bagian bawah :
<script>
calendarSetup("f_date_a","btn_f_date_a");
</script>
Berikut ini contoh sederhana script htmlnya(file.vm) :
<link rel="stylesheet" href='../../css/jscalendar-1.0/calendar-blue2.css' type="text/css"> <link rel="stylesheet" href='../../css/jstabs.css' type="text/css"> <link rel="stylesheet" href='../../css/form.css' type="text/css"> <link rel="stylesheet" href='../../css/menu.css' type="text/css"> <script src="../../jscript/simple_ajax.js"></script> <script src="../../jscript/jscalendar-1.0/calendar.js"></script> <script src="../../jscript/jscalendar-1.0/lang/calendar-ina.js"></script> <script src="../../jscript/jscalendar-1.0/calendar-setup.js"></script> <script src="../../jscript/jstabs.js"></script> <script src="../../jscript/currency.js"></script> <script src="../../jscript/prototype.js"></script> <script src="../../jscript/rico.js"></script> <script> function calendarSetup(textFieldID,btnID) { Calendar.setup ({inputField:textFieldID,ifFormat:"%d-%m-%Y",button:btnID}); } function genRandom(){ var dt = new Date(); var result = Math.floor(Math.random( ) * (dt.getTime())); return result; } function enlargeScreen(){ } function normalScreen(){ } </script> <style type="text/css"> </style> #if (!$actionErrors.isEmpty()) <div class="errorMessage"><b><img src="../../images/magento/error-msg.png" border="0" /><font color="red">Errors</font></b></div> <ul class="errorMessage"> #foreach( $error in $actionErrors ) <li><font color = "red"> $error </font> </li> #end </ul> #end <form method="post" action="save.action"> <table width="97%" border="0" cellpadding = "2" cellspacing="1" bgcolor="#999999"> <tr bgcolor="#ffffff"> <td height="20" colspan="3" background="../../images/tjungking/backMenu.png" bgcolor="#A4C5F3"><strong><font size="2">Form Izin</font> </strong></td> </tr> <tr bgcolor="#ffffff"> <td width="17%" bgcolor="#FfFfFF"><div align="right">Mulai </div></td> <td width="1%" bgcolor="#FfFfFF">:</td> <td width="82%" bgcolor="#FfFfFF"> <input name="startDate" id="f_date_a" value="$!startDate" readonly dir="rtl" maxlength="255"/> <img name="popcal" id="btn_f_date_a" align="absmiddle" src="../../jscript/jscalendar-1.0/img.jpg" width="34" height="22" border="0" alt=""> </td> </tr> <tr bgcolor="#ffffff"> <td bgcolor="#FfFfFF"><div align="right">Sampai </div></td> <td bgcolor="#FfFfFF">:</td> <td bgcolor="#FfFfFF"> <input name="endDate" id="f_date_b" value="$!endDate" readonly dir="rtl" maxlength="255"/> <img name="popcal" id="btn_f_date_b" align="absmiddle" src="../../jscript/jscalendar-1.0/img.jpg" width="34" height="22" border="0" alt=""> </td> </tr> <tr bgcolor="#ffffff"> <td bgcolor="#FfFfFF"><div align="right">Kategori</div></td> <td bgcolor="#FfFfFF">:</td> <td bgcolor="#FfFfFF"><label> <select name="kategori"> #if($kategori != "") <option name="kategori" value="$!kategori">$!kategori</option> #end <option value="">pilih kategori</option> <option value="sakit">sakit</option> <option value="izin">izin</option> </select> </label></td> </tr> <tr bgcolor="#ffffff" valign="top"> <td bgcolor="#FfFfFF"><div align="right">Alasan</div></td> <td bgcolor="#FfFfFF">:</td> <td bgcolor="#FfFfFF"><label> <textarea name="alasan" cols="28" rows="6"></textarea> </label></td> </tr>
<tr bgcolor="#dodcff" height="20"> <td colspan="3" bgcolor="#A4C5F3"><input name="submit" type="submit" class="submit" value="Submit"/></td> </tr> </table> </form> <script> calendarSetup("f_date_a","btn_f_date_a"); </script> <script> calendarSetup("f_date_b","btn_f_date_b"); </script> |
THANK YOU FOR READING MY BLOG ^^
