datepicker如何添加蛋糕php我们需要的步骤

时间:2014-03-27 12:29:32

标签: php jquery cakephp

* 用于蛋糕php安装步骤的jquery日期选择器*

   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 个答案:

答案 0 :(得分:7)

希望这会对你有所帮助:

步骤:

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文件,将“images /”文本(路径)替换为“../ img /".

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)添加一个id为“datepicker”的div,用于显示日历

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