{"id":148,"date":"2017-08-07T09:29:52","date_gmt":"2017-08-07T15:29:52","guid":{"rendered":"http:\/\/www.polysyncronism.com\/wordpress\/?p=148"},"modified":"2017-08-07T09:34:05","modified_gmt":"2017-08-07T15:34:05","slug":"fuelphp-framework-jquery-datetimepicker","status":"publish","type":"post","link":"http:\/\/www.polysyncronism.com\/wordpress\/2017\/08\/07\/fuelphp-framework-jquery-datetimepicker\/","title":{"rendered":"FuelPHP framework jQuery DateTimePicker"},"content":{"rendered":"

\"\"I have recently started learning about the FuelPHP framework. I have been working on understanding how to use the framework as intended by the creators, and I think I’m doing a fair job of that, except possibly with regards to using external jQuery libraries.<\/p>\n

I have a simple CRUD application that I built as a proof of concept for using a third party jQuery DateTimePicker library.<\/p>\n

This is the jQuery DateTimePicker library<\/a> that I found and used.<\/p>\n

\"\"<\/p>\n

This is not including the public asset folder that contains the actual Javascript and CSS.<\/p>\n

Model<\/strong>
\nfuel\/app\/classes\/model\/dtpsample.php<\/strong><\/p>\n

<?php\r\nclass Model_Dtpsample extends Model_Crud\r\n{\r\n\tprotected static $_table_name = 'dtpsample';\r\n\t\r\n\tpublic static function validate($factory)\r\n\t{\r\n\t\t$val = Validation::forge($factory);\r\n\t\t$val->add_field('name', 'Name', 'required|max_length[255]');\r\n\t\t$val->add_field('event_date', 'Event Date', 'required');\r\n\t\t\r\n\r\n\t\treturn $val;\r\n\t}\r\n\r\n}<\/pre>\n
View Template<\/strong>
\nfuel\/app\/views\/template_dtpsample.php<\/strong><\/p>\n
I want to specifically point out this piece of code. The main thing to notice is Asset::js and the JavaScript code.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<meta charset=\"utf-8\">\r\n\t<title><?php echo $title; ?><\/title>\r\n\t<?php echo Asset::css('bootstrap.css'); ?>\r\n\t<?php echo Asset::css('jquery.datetimepicker.css'); ?>\r\n\t\r\n\t\r\n\t<style>\r\n\t\tbody { margin: 40px; }\r\n\r\n\t<\/style>\r\n\t\r\n\t<?php \r\n\t     echo Asset::js(array(\r\n\t\t'\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js',\r\n\t\t'bootstrap.js',\r\n\t\t'jquery.datetimepicker.js',\r\n\t\t'moment.js',\r\n\t\t'moment-timezone.js'\r\n\t)); \r\n\t?>\r\n\t\r\n\t\r\n\t\r\n\t<script type=\"text\/javascript\">\r\n  $(function() {\r\n      \r\n    $(\"#form_name\").focus();  \r\n\r\n    $('#form_event_date').datetimepicker({\r\n        formatTime:'g:i A', \r\n        \/\/format:'Y-m-d h:i A',\r\n        format:'unixtime',\r\n        step:30,\r\n        inline:true,\r\n        onChangeDateTime:function(dp,$input){\r\n    \/\/$(\"#form_event_date\").val($input.val());\r\n    \r\n    var strDate = moment.unix($input.val()).format(\"YYYY-MM-DD h:mm a\");\r\n    \/\/var dtDate = new Date($input.val() * 1000).format('Y-m-d h:i:s a')\r\n    $(\"#dtResult\").val(strDate);\r\n\r\n  }\r\n    });\r\n    \r\n    \r\n  \r\n\r\n  });\r\n  \r\n  \r\n  \r\n<\/script>\r\n<\/head>\r\n<body>\r\n\t<div class=\"container\">\r\n\t\t<div class=\"col-md-12\">\r\n\t\t\t<h1><?php echo $title; ?><\/h1>\r\n\t\t\t<hr>\r\n<?php if (Session::get_flash('success')): ?>\r\n\t\t\t<div class=\"alert alert-success\">\r\n\t\t\t\t<strong>Success<\/strong>\r\n\t\t\t\t<p>\r\n\t\t\t\t<?php echo implode('<\/p><p>', e((array) Session::get_flash('success'))); ?>\r\n\t\t\t\t<\/p>\r\n\t\t\t<\/div>\r\n<?php endif; ?>\r\n<?php if (Session::get_flash('error')): ?>\r\n\t\t\t<div class=\"alert alert-danger\">\r\n\t\t\t\t<strong>Error<\/strong>\r\n\t\t\t\t<p>\r\n\t\t\t\t<?php echo implode('<\/p><p>', e((array) Session::get_flash('error'))); ?>\r\n\t\t\t\t<\/p>\r\n\t\t\t<\/div>\r\n<?php endif; ?>\r\n\t\t<\/div>\r\n\t\t<div class=\"col-md-12\">\r\n<?php echo $content; ?>\r\n\t\t<\/div>\r\n\t\t<footer>\r\n\t\t\t<p class=\"pull-right\">Page rendered in {exec_time}s using {mem_usage}mb of memory.<\/p>\r\n\t\t\t<p>\r\n\t\t\t\t<a href=\"http:\/\/fuelphp.com\">FuelPHP<\/a> is released under the MIT license.<br>\r\n\t\t\t\t<small>Version: <?php echo e(Fuel::VERSION); ?><\/small>\r\n\t\t\t<\/p>\r\n\t\t<\/footer>\r\n\t<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Screenshot of the DateTimeStamp picker on the page.
\n\"\"<\/p>\n
Views<\/strong>
\nfuel\/app\/views\/dtpsample\/_form.php<\/strong><\/p>\n
<?php echo Form::open(array(\"class\"=>\"form-horizontal\")); ?>\r\n\r\n\t<fieldset>\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<?php echo Form::label('Name', 'name', array('class'=>'control-label')); ?>\r\n\r\n\t\t\t\t<?php echo Form::input('name', Input::post('name', isset($dtpsample) ? $dtpsample->name : ''), array('class' => 'col-md-4 form-control', 'placeholder'=>'Name')); ?>\r\n\t\t<\/div>\r\n\t\t<div class=\"form-group\">\r\n\t\t    <?php echo Form::label('DateTime', 'event_date', array('class'=>'control-label')); ?><br>\r\n\t\t    <input id=\"dtResult\" size=\"20\" type = \"text\" readonly\/><br>   \r\n\t\t    <?php echo Form::input('event_date', Input::post('event_date', isset($dtpsample) ? $dtpsample->event_date : ''), array('class' => 'col-md-4 form-control', 'placeholder'=>'DateTime')); ?>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t<div class=\"form-group\">\r\n\t\t\t<label class='control-label'>&nbsp;<\/label>\r\n\t\t\t<?php echo Form::submit('submit', 'Save', array('class' => 'btn btn-primary')); ?>\t\t<\/div>\r\n\t<\/fieldset>\r\n<?php echo Form::close(); ?><\/pre>\n
<h2>New dtpsample<\/h2>\r\n<br>\r\n\r\n<?php echo render('dtpsample\/_form'); ?>\r\n\r\n\r\n<p><?php echo Html::anchor('dtpsample', 'Back'); ?><\/p><\/pre>\n
<h2>Editing dtsample<\/h2>\r\n<br>\r\n\r\n<?php echo render('dtpsample\/_form'); ?>\r\n<p>\r\n\t<?php echo Html::anchor('dtpsample\/view\/'.$dtpsample->id, 'View'); ?> |\r\n\t<?php echo Html::anchor('dtpsample', 'Back'); ?><\/p><\/pre>\n
<h2>dtpsample<\/h2>\r\n<br>\r\n<?php if ($dtpsamples): ?>\r\n<table class=\"table table-striped\">\r\n\t<thead>\r\n\t\t<tr>\r\n\t\t\t<th>Name<\/th>\r\n\t\t\t<th>Event Date<\/th>\r\n\t\t\t<th><\/th>\r\n\t\t<\/tr>\r\n\t<\/thead>\r\n\t<tbody>\r\n\t    \r\n<?php date_default_timezone_set('America\/Chicago'); ?>\t    \r\n<?php foreach ($dtpsamples as $item): ?>\t\t<tr>\r\n\r\n\t\t\t<td><?php echo $item->name; ?><\/td>\r\n\t\t\t<td><?php echo date('Y-m-d g:i:s A', $item->event_date); ?><\/td>\r\n\t\t\t\r\n\t\t\t<td>\r\n\t\t\t\t<?php echo Html::anchor('dtpsample\/view\/'.$item->id, 'View'); ?> |\r\n\t\t\t\t<?php echo Html::anchor('dtpsample\/edit\/'.$item->id, 'Edit'); ?> |\r\n\t\t\t\t<?php echo Html::anchor('dtpsample\/delete\/'.$item->id, 'Delete', array('onclick' => \"return confirm('Are you sure?')\")); ?>\r\n\r\n\t\t\t<\/td>\r\n\t\t<\/tr>\r\n<?php endforeach; ?>\t<\/tbody>\r\n<\/table>\r\n\r\n<?php else: ?>\r\n<p>No dtsamples.<\/p>\r\n\r\n<?php endif; ?><p>\r\n\t<?php echo Html::anchor('dtpsample\/create', 'Add new dtsample', array('class' => 'btn btn-success')); ?>\r\n\r\n<\/p>\r\n\r\n<\/pre>\n
Controller<\/strong>
\nfuel\/app\/classes\/controller\/dtpsample.php<\/strong><\/p>\n
<?php\r\nclass Controller_Dtpsample extends Controller_Template\r\n{\r\n\r\n    public $template = 'template_dtpsample';\r\n\r\n\tpublic function action_index()\r\n\t{\r\n\t\t$data['dtpsamples'] = Model_Dtpsample::find_all();\r\n\t\t$this->template->title = \"DateTimePicker Sample\";\r\n\t\t$this->template->content = View::forge('dtpsample\/index', $data);\r\n\r\n\t}\r\n\r\n\tpublic function action_view($id = null)\r\n\t{\r\n\t\tis_null($id) and Response::redirect('dtpsample');\r\n\r\n\t\t$data['dtpsample'] = Model_Dtpsample::find_by_pk($id);\r\n\r\n\t\t$this->template->title = \"DateTimePicker Sample\";\r\n\t\t$this->template->content = View::forge('dtpsample\/view', $data);\r\n\r\n\t}\r\n\r\n\tpublic function action_create()\r\n\t{\r\n\t\tif (Input::method() == 'POST')\r\n\t\t{\r\n\t\t\t$val = Model_Dtpsample::validate('create');\r\n\r\n\t\t\tif ($val->run())\r\n\t\t\t{\r\n\t\t\t\t$dtpsample = Model_Dtpsample::forge(array(\r\n\t\t\t\t\t'name' => Input::post('name'),\r\n\t\t\t\t\t'event_date' => Input::post('event_date')\r\n\t\t\t\t));\r\n\r\n\t\t\t\tif ($dtpsample and $dtpsample->save())\r\n\t\t\t\t{\r\n\t\t\t\t\tSession::set_flash('success', 'Added dtpsample #'.$dtpsample->id.'.');\r\n\t\t\t\t\tResponse::redirect('dtpsample');\r\n\t\t\t\t}\r\n\t\t\t\telse\r\n\t\t\t\t{\r\n\t\t\t\t\tSession::set_flash('error', 'Could not save dtpsample.');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\tSession::set_flash('error', $val->error());\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t$this->template->title = \"DateTimePicker Sample\";\r\n\t\t$this->template->content = View::forge('dtpsample\/create');\r\n\r\n\t}\r\n\r\n\tpublic function action_edit($id = null)\r\n\t{\r\n\t\tis_null($id) and Response::redirect('dtpsample');\r\n\r\n\t\t$dtpsample = Model_Dtpsample::find_one_by_id($id);\r\n\r\n\t\tif (Input::method() == 'POST')\r\n\t\t{\r\n\t\t\t$val = Model_Dtpsample::validate('edit');\r\n\r\n\t\t\tif ($val->run())\r\n\t\t\t{\r\n\t\t\t\t$dtpsample->name = Input::post('name');\r\n                $dtpsample->event_date = Input::post('event_date');\r\n\r\n\t\t\t\tif ($dtpsample->save())\r\n\t\t\t\t{\r\n\t\t\t\t\tSession::set_flash('success', 'Updated dtpsample #'.$id);\r\n\t\t\t\t\tResponse::redirect('dtpsample');\r\n\t\t\t\t}\r\n\t\t\t\telse\r\n\t\t\t\t{\r\n\t\t\t\t\tSession::set_flash('error', 'Nothing updated.');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\tSession::set_flash('error', $val->error());\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t$this->template->set_global('dtpsample', $dtpsample, false);\r\n\t\t$this->template->title = \"DateTimePicker Sample\";\r\n\t\t$this->template->content = View::forge('dtpsample\/edit');\r\n\r\n\t}\r\n\r\n\tpublic function action_delete($id = null)\r\n\t{\r\n\t\tif ($dtpsample = Model_Dtpsample::find_one_by_id($id))\r\n\t\t{\r\n\t\t\t$dtpsample->delete();\r\n\r\n\t\t\tSession::set_flash('success', 'Deleted dtpsample #'.$id);\r\n\t\t}\r\n\r\n\t\telse\r\n\t\t{\r\n\t\t\tSession::set_flash('error', 'Could not delete dtpsample #'.$id);\r\n\t\t}\r\n\r\n\t\tResponse::redirect('dtpsample');\r\n\r\n\t}\r\n\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
I have recently started learning about the FuelPHP framework. I have been working on understanding how to use the framework as intended by the creators, and I think I’m doing a fair job of that, except possibly with regards to using external jQuery libraries. I have a simple CRUD application that I built as a … Continue reading “FuelPHP framework jQuery DateTimePicker”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,21,14],"tags":[],"class_list":["post-148","post","type-post","status-publish","format-standard","hentry","category-code","category-javascript","category-jquery","category-php"],"_links":{"self":[{"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":7,"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"predecessor-version":[{"id":158,"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/posts\/148\/revisions\/158"}],"wp:attachment":[{"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.polysyncronism.com\/wordpress\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}