Month and year datepicker problem in codeigniter - php

I have a problem in using a datepicker for my data. I need to input only the month and year for my database. This is my type for the data
So far i have this view:
<div class="form-group">
<label for="Periode" class="col-md-2">
Periode <text style="color:red"><b>*</b></text>
</label>
<div class="col-md-4">
<script type="text/javascript">
$(function() {
$("#periode").datepicker({
dateFormat: 'YYYY-MM',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(date, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
}
});
$("#periode").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
});
</script>
<input class="form-control" name="periode" id="periode" data-format="YYYY-MM" class="Periode" required />
The datepicker is working (it shows only month and year in the display)
But Once i clicked the submit button, the data is not successfully inputed into the database, i checked the data from xampp and it clearly shows 0000-00-00 in the table
Is there any better solution for the problem? already tried to look on another questions but i can't find any clear solution :/
EDIT: in case if you are wondering, this is the controller
public function submit(){
$data = array(
'kode_karyawan'=>$this->input->post('kode_karyawan'),
'nama_karyawan'=>$this->input->post('nama_karyawan'),
'periode'=>$this->input->post('periode')
);
$this->absengaji_m->insert($data);
redirect('absengaji');
}
}
and this is the model:
public function insert($data){
print_r($data);
$this->db->insert('uangmakan',$data);
}

This is a function to convert date from YYYY-MM to YYYY-MM-DD and then insert to database
function con2mysql($date) {
$date = explode("-",$date);
if ($date[2]<=9) { $date[2]="0".$date[2]; }
$date = array($date[0], $date[1], $date[2]);
return $n_date=implode("-", $date);
}
If you are using PHP 5 >= 5.1.0 there is native funciton
$dateTime = new DateTime($yourDate);
$formatted_date = date_format($dateTime, 'Y-m-d' );
you need to change
public function submit(){
$data = array(
'kode_karyawan'=>$this->input->post('kode_karyawan'),
'nama_karyawan'=>$this->input->post('nama_karyawan'),
'periode'=>$this->input->post('periode')
);
$this->absengaji_m->insert($data);
redirect('absengaji');
}
}
To
public function submit(){
$dateTime = new DateTime($this->input->post('periode'));
$formatted_date = date_format($dateTime, 'Y-m-d' );
$data = array(
'kode_karyawan'=>$this->input->post('kode_karyawan'),
'nama_karyawan'=>$this->input->post('nama_karyawan'),
'periode'=> $formatted_date
);
$this->absengaji_m->insert($data);
redirect('absengaji');
}
}

Related

How to Highlight Particular Dates in bootstrap full calendar and highlighted dates fetch from database in phpand on click open a table

<div data-provide="calendar" id="calendar"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
// An array of dates
var eventDates = {};
eventDates[ new Date( '2017/04/29' )] = new Date( '2017/04/29' );
eventDates[ new Date( '2017/05/29' )] = new Date( '2017/05/29' );
jQuery('#calendar').fullCalendar({
beforeShowDay: function( date ) {
var highlight = eventDates[date];
if( highlight ) {
return [true, "event", highlight];
} else {
return [true, '', ''];
}
}
});
});
</script>

How to add Tooltip (dynamically) to specific dates in Bootstrap datepicker using php variables

I want to add Tooltip to specific dates that they are reserved. I mean I will read my database and get reserved dates by PHP and then pass them into jQuery and add Tooltip to them. This is my code. However it doesn't work.
This code adds Tooltip just to first period of dates:
<?php
$result = mysql_query("SELECT in_date,out_date FROM bookings");
$count = mysql_num_rows($result);
$query = $db->get_results("SELECT in_date,out_date FROM bookings");
foreach($query as $row){
$in_date=$row->in_date;
$out_date=$row->out_date;
$in_day=substr($row->in_date,-2);
$out_day=substr($row->out_date,-2);
?>
<script>
$('#dpbs').datepicker({
format: "yyyy-mm-dd",
startView:1,
weekStart: 6,
todayBtn: true,
language: "de",
daysOfWeekDisabled: "0,1,2,3,4,5,6",
datesDisabled: ['11/14/2016', '11/10/2016'],
daysOfWeekHighlighted: "6",
calendarWeeks: true,
beforeShowDay: function (date){
for (var ij = 1; ij < <?php echo json_encode($count);?>; ij++){
if (date.getMonth() == (new Date()).getMonth())
for(var i=<?php echo json_encode($in_day);?>;i<<?php echo json_encode($out_day);?>;i++){
switch (date.getDate()){
case i:
return {
tooltip: 'Example tooltip',
classes: 'active'
};
}
}
}
},
toggleActive: true
});
</script>
<?php } ?>
Add this :
.on('show',function(e) {
$('td.day.activeClass').each(function(index, element) {
var $element = $(element)
$element.attr("title", "Promo Date");
$element.data("container", "body");
$element.tooltip()
});
Where "activeClass" is your class, or just td.day if you want to tooltip all days!

fullcalendar not show a events with codeigniter

I'm trying to make a calendar with "FullCalendar" and codeigniter. I have read several questions on this page, but still do not understand because the calendar does not show me the events.
I have this routes:
$route['calendar'] = 'user/calendar/showCalendar';
$route['calendar/events'] = 'user/calendar/getEvents';
This is the controller:
public function showCalendar()
{
$this->template->add_css(base_url() . 'assets/plugins/fullcalendar/fullcalendar.min.css');
$this->template->add_js('https://code.jquery.com/ui/1.11.1/jquery-ui.min.js');
$this->template->add_js('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js');
$this->template->add_js(base_url() . 'assets/plugins/fullcalendar/fullcalendar.min.js');
$this->template->add_js(base_url() . 'assets/plugins/fullcalendar/config.js');
$data = array();
$this->template->write('title', 'Calendar', TRUE);
$this->template->write_view('header', 'user/template/header');
$this->template->write_view('sidebar', 'user/template/sidebar');
$this->template->write_view('content', 'user/calendar/calendar', $data, TRUE);
$this->template->render();
}
public function getEvents()
{
if($this->input->is_ajax_request())
{
$events = $this->calendar_mdl->getEvents();
echo json_encode($events);
}
}
My config.js:
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-events div.external-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'hoy',
month: 'mes',
week: 'semana',
day: 'dia'
},
//Random default events
editable: true,
events: "http://project.dev/calendar/events"
});
});
And my model:
public function getEvents()
{
$this->db->select('*');
$this->db->order_by('id', 'DESC');
$query = $this->db_get(dbCalendar); // dbCalendar is a constant
if($query->num_rows() > 0)
{
return $query->result_array();
}
return FALSE;
}
It is the first time I try to use fullCalnedar, and I do not understand why it don't show me my events. I read the documentation, but don't it did not helped me to find out what the error may be.

Remember the date selected in datepicker even after refresh

I just want to know if how can my datepicker remembered what month has been selected. For example, I choose June 1, 2013 even after refresh the month to be displayed in date picker is still June.
Here is my code.
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#weekpicker').datepicker( {
changeYear:true,
changeMonth:true,
showButtonPanel:true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#weekpicker').val($.datepicker.formatDate( dateFormat, startDate, inst.settings )
+ ' - ' + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
You would need to deal with sessions.
Once the website is refreshed, just add the date into a PHP session.
You can read more about sessionsn here and a more concrete example for what you are looking for, here.
Well, you added a space to "" in the if statement. And I guess I have bad logic anyways - you should probably use "&&" instead of "||". So please use the following code exactly as is:
$('input[type=text][id*=myDate1]').datepicker({
showOn: "button",
buttonImage: "/Images/cal.gif",
buttonImageOnly: true,
onSelect: function (dateText, inst) { $('#HiddenField1').val(dateText) },
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1
});
var theDate;
if ($('#HiddenField1').val() != "" && $('#HiddenField1').val() != null) {
theDate = $('#HiddenField1').val();
}
else {
theDate = new Date();
}
alert(theDate);
$('input[type=text][id*=myDate1]').datepicker("option", "showAnim", 'bounce');
$('input[type=text][id*=myDate1]').datepicker("option", "dateFormat", 'dd/mm/yy');
$('input[type=text][id*=myDate1]').datepicker("option", "altFormat", 'dd/mm/yy');
$('input[type=text][id*=myDate1]').datepicker('setDate', theDate);

How to add more past years in jquery calender

I am using modified(following modified code taken from stackoverflow ) jquery calender but i want to add more past years and unable to select day.. in this calender please help how can i do this ?The modified script used in html file is this :-
<script>
$(document).ready(function() {
$(".datepicker").datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
Try this :
$(".datepicker").datepicker({
yearRange: '1700:2050',
the year range gives you more years

Categories