日期選擇器如何在蛋糕PHP添加我們需要的步驟

Question

* jQuery的日期選擇器蛋糕PHP的安裝步驟*

php echo $this->Form->input("date", array('label' => "Date : ", 'type' => 'text', 'class' => 'fl tal vat w300p', 'error' => false , 'id' => 'select_date')); ?> 
    <?php echo $this->Html->div('datepicker_img w100p fl pl460p pa', $this->Html->image('calendar.png'),array('id' => 'datepicker_img')); ?> 
    <?php echo $this->Html->div('datepicker fl pl460p pa', ' ' ,array('id' => 'datepicker')); ?> 

Answer 1

希望這將幫助你：

步驟：

1）從http://jqueryui.com/download/下載Jquery UI庫。在我的情況下，我已經下載了版本1.8.22庫。提取下載的zip文件夾。

2）拷貝\ js \ jquery-ui-version.custom.min.js文件到\ app \ webroot \ js \ jquery-ui-version.custom.min.js 如果你還沒有包含jquery主文件然後將 \ js \ jquery-version.min.js文件複製到\ app \ webroot \ js \ jquery-version.min.js

3）複製\ css \ ui-lightness \ jquery-ui-version。 custom.css文件到\ app \ webroot \ css \ jquery-ui-version.custom.css

4）將所有圖像從\ css \ ui-lightness \ images ..複製到\ app \ webroot \ img \ ... 5）打開\ app \ webroot \ css \ jquery-ui- version.custom.css文件並用「../img/」替換「images /」文本（路徑）。

6）打開視圖文件幷包含以下三行：我在這裏提到了我的文件名。

<?php echo $this->Html->css(‘jquery-ui-1.8.22.custom’); ?> 
<?php echo $this->Html->script(‘jquery-1.8.2.min’); ?> 
<?php echo $this->Html->script(‘jquery-ui-1.8.22.custom.min’); ?> 

7）添加一個div id爲「日期選擇器」要顯示壓延

<div style="height:500px;"> 
     <div style="clear:both;float:left;padding-left:60px;"><H1>DatePicker Example</H1></div> 
     <div>&nbsp;</div> 
     <?php echo $this->Form->create(false); ?> 
     <?php echo $this->Form->input("date", array('label' => "Date : ", 'type' => 'text', 
           'class' => 'fl tal vat w300p', 'error' => false , 'id' => 'select_date')); ?> 
     <?php echo $this->Html->div('datepicker_img w100p fl pl460p pa', 
          $this->Html->image('datepicker_calendar_icon.gif'),array('id' => 'datepicker_img')); ?> 
     <?php echo $this->Html->div('datepicker fl pl460p pa', ' ' ,array('id' => 'datepicker')); ?> 
     <div>&nbsp;</div> 
     <?php echo $this->Form->end(); ?> 
</div> 

8）添加以下在文件末尾的JavaScript代碼。

的JavaScript

$(document).ready(function(){ 
       $("#datepicker_img img").click(function(){ 
        $("#datepicker").datepicker(
        { 
          dateFormat: 'yy-mm-dd', 
          onSelect: function(dateText, inst){ 
           $('#select_date').val(dateText); 
           $("#datepicker").datepicker("destroy"); 
          } 
        } 
        ); 
       }); 
     });