datepicker如何添加在我们需要的步骤的蛋糕php [英] datepicker how to add in cake php we need for steps

问题描述

* jquery date picker for cake 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')); ?>

推荐答案

希望这将有助于：

步骤：

1）从http://jqueryui.com/download/ 。在我的情况下，我已经下载的1.8.22库。提取下载的zip文件夹。

1) Download Jquery UI library from http://jqueryui.com/download/. In my case I have downloaded version 1.8.22 library. Extract downloaded zip folder.

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

2) Copy \js\jquery-ui-version.custom.min.js file to \app\webroot\js\jquery-ui-version.custom.min.js If you have not included jquery main file then also copy \js\jquery-version.min.js file to \app\webroot\js\jquery-version.min.js

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

3) Copy \css\ui-lightness\jquery-ui-version.custom.css file to \app\webroot\css\jquery-ui-version.custom.css

4）从\css\ui复制所有图像-lightness\images ..至\app\webroot\img\ ...

4) Copy all images from \css\ui-lightness\images.. to \app\webroot\img\…

5）打开\app\webroot\css\jquery -ui-version.custom.css文件，并将images /文本（路径）替换为../ img /\".

5) Open \app\webroot\css\jquery-ui-version.custom.css file and replace "images/" text(path) with "../img/".

6）打开视图文件以下两行：我在这里提到了我的文件名。

6) Open view file and include following two lines : I have mentioned my file names here.

<?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）添加一个id为datepicker的div来显示日历

7) Add a div with id "datepicker" where you want to display calender

<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代码。

8) Add following javascript code at end of the file.

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");
                          }
                     }
                     );
               });
        });

这篇关于datepicker如何添加在我们需要的步骤的蛋糕php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！