프로그래밍/스크립트

jquery 달력 datepicker 날짜, 이미지 커스트마이징

Doonee 2013. 12. 18. 11:16
반응형

1. 헤더부분

<link type="text/css" rel="stylesheet" href="/Scripts/jquery-ui-1.8.11/css/ui-lightness/jquery-ui-1.8.11.custom.css" />

<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.11/js/jquery-ui-1.8.11.custom.min.js"></script>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.11/js/jquery.ui.datepicker-ko.js"></script>

<script type="text/javascript">var $j = jQuery.noConflict();</script>


2. 본문

<asp:TextBox ID="tbxPeriod" runat="server" CssClass="input_term" />


3. 스크립트

<script type="text/javascript">

$j(document).ready(function () {

     $j.datepicker.setDefaults($j.datepicker.regional["ko"]);

     $j('#tbxPeriod').datepicker({

          dateFormat: 'yymmdd',

          showOn: "button",

          buttonImage: "/images/pop/icon_calender.gif",

          buttonImageOnly: true

     });

     $j('img.ui-datepicker-trigger').attr('style', 'margin-left:4px; vertical-align:middle; cursor: Pointer; border: 0;');

});