• About Me




    Lily@Melbourne, Australia

    Login

  • Follow 静水深流 || Still waters run deep on WordPress.com
  • Archives

CakePHP-DatePicker

JS: http://jqueryui.com/demos/datepicker/

上周5,Duke问我upload的安装,那时服务器无法登陆,还好在这里做了点笔记。好记性不如烂笔头,老话就是没错!

所以尽量keep up.

1, 安装这两个JS: jquery-1.8.0min, jquery-ui

2, 安装jquery-ui.css, images文件夹放在和css一个目录里,最好改个名字方便辨识,但如此还要修改下css文件里引用的图片

3,php,ctp

<script>
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	</script>

<div>
《input id="datepicker" type="text" /》 //我只能用》来代替>,否则WP又吃掉了,字段是TEXT不是日期

4,效果图
CakePHP datapicker

CakePHP datepicker

5,  扩展

在此基础加上时间的选择:http://trentrichardson.com/examples/timepicker/

$('#ss').datetimepicker({ dateFormat: 'yy-mm-dd' }).val(); //修改成DB接受的格式

请修改slider的css,默认的slider bar 是超过它下拉框的,同时这个left margin =65也要改

.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; } //timepicker.css

6, 定稿
DateTimePicker

DateTimePicker


		
Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: