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
Related
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');
}
}
The dayClick in fullCalendar is defined as:
dayClick: function (start, allDay, jsEvent, view) {
alert('You clicked me!');
}
This is triggered when the user clicks on a day.
I wanted to access data of events when a user clicks on a particular day. Sort of merging the eventClick function in dayClick so that when I click on a particular day, I get the event title, starttime, endtime of all events occurring that particular day.
I hope this help you
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
var cache = new Date().getTime();
$.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
function(data) {
// do stuff with the JSOn data
}
}
});
You can try this:
eventClick: function(xEvent, jsEvent, view) {
alert("Title: " + xEvent.title //Get the event title
+ "\n StartTime: " + xEvent.start //Get the event start date
+ "\n EndTime: " + xEvent.end //Get the event end date
);
console.log(xEvent); //See your console for all event properties/objects
}
xEvent properties/object lists.
dayClick: function(date, allDay, jsEvent, view) {
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime();
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime();
var cache = new Date().getTime();
$.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache,
function(data) {
// do stuff with the JSOn data
});
alert('ENTROU!');
},
now it works
it opens a alert, you just have to put the information wanted.
I think this is what you are looking for.
dayClick: function(date, allDay, jsEvent, view) {
var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate()+1);
//This gives the next day of the clicked day('date' contains the clicked day)
var todaysEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
// Below statement returns the EVENT OBJECT of the clicked day after comparing the two dates
return event.start >= date && event.start < date2;
});
// You can now access the returned object & extract what you want
// console.log(todaysEvents); --> returns the complete object
// console.log(todaysEvents[0].title); --> returns that day's event title
},
I Hope this helped.
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);
i want to use jquery datepicker to pick a date then when select it to do select query from the database according to the selected date
i've seek about that and found this question
jQuery datepicker with php and mysql
they say i should use ajax to do it
but i can't understand the implementation they do!
can anybody help please
i try to do something like that
<script>
$(function() {
$( "#datepicker" ).datepicker({minDate: 0, showAnim: "bounce",
onSelect: function(dateText, inst) {<?php mysql_select_db($database_conn, $conn);
$query_time = "SELECT reservation.R_time FROM reservation WHERE reservation.R_date='"?>dateText<?php "'" ;
$time = mysql_query($query_time, $conn) or die(mysql_error());</script>
Change your JS to send an ajax call in the onSelect, passing the dateText.
$( "#datepicker" ).datepicker({
minDate: 0,
showAnim: "bounce",
onSelect: function(dateText, inst) {
$.ajax({
type: 'POST',
url: 'select_time.php',
data: {date : dateText},
success: function(resp){
if(false !== resp){
alert(resp);
}
}
});
}
});
Then in select_time.php
<?php
if(!empty($_POST['date'])):
$mysqli = new mysqli('connection info'); //mysqli connection
$stmt= $mysqli->prepare('SELECT reservation.R_time FROM reservation WHERE reservation.R_date = ?'); //prepare the statement
$stmt->bind_param('s', $_POST['date']); //bind our parameters
$stmt->execute(); //execute our query
$stmt->store_result(); // store result so we can check rows
$stmt->bind_result($resTime); //we only want the reserveration time
$stmt->fetch(); //fetch the rows
if($stmt->num_rows() > 0):
echo $resTime; //return the time from the database
$stmt->close(); //close the statement
else:
return false; //row doesn't exist, return false
endif;
endif;
?>
This is untested, but I don't see any reason why it shouldn't work.
I think you're confusing a couple of things:
First, the PHP will always run before the page is loaded (and therefor the jQuery), so calling the PHP on the jQuery selector will never work.
What you need to do is create an ajax function that will fire on the jQuery's onSelect (and I generally use the onClose event if it is a popup calendar).
Javascript:
$( "#datepicker" ).datepicker({
minDate: 0,
showAnim: "bounce",
onClose: function(dateText, inst) {
$.post('select_time.php?dateText=' + dateText, function(queryResult){
// do something with the return query
});
}
});
PHP page:
$connection = mysqli_connect("localhost","username","password","db");
$sql = "SELECT reservation.R_time FROM reservation WHERE reservation.R_date={$_post['dateText']}";
if ($result = mysqli_query($connection , $sql))
{
while ($getData = mysqli_fetch_field($result))
{
echo $getData->R_time;
}
mysqli_free_result($result);
}
mysqli_close($connection);
I have the following function to set the default value of minDate:
$(function() {
$( "#arrival_date" ).datepicker();
$( "#arrival_date" ).datepicker('option','minDate','<?php echo $minDate ?>');
});
But after the page load the $minDate variable sometimes change based on the earliest date in some of my function.
Example if the value of $minDate is "7/29/2012" and after the page is fully loaded sometimes the $mindDate date changes to earlier than "7/29/2012". Say it will change to "7/20/2012".
If this happens I want to change the minDate value of DatePicker to the new date (i.e. "7/20/2012" instead of "7/29/2012").
How to call this function?
UPDATE*
Example code:
<?php
$checkin = "7/29/2012";
$minDate = $checkin;
?>
<head>
$(function() {
$( "#arrival_date" ).datepicker();
$( "#arrival_date" ).datepicker('option','minDate','<?php echo $minDate ?>');
});
</head>
<body>
<?php
for($i=0;$i<$max;$i++){
$r_id=$_SESSION['cart'][$i]['room_id'];
if (!isset($room_id)){
$room_id=$r_id;
}else{
$room_id=$room_id . "," . $r_id;
}
$checkin=$_SESSION['cart'][$i]['checkin'];
$checkout=$_SESSION['cart'][$i]['checkout'];
$nights=$_SESSION['cart'][$i]['nights'];
$q=$_SESSION['cart'][$i]['qty'];
$pname=get_room_type($r_id);
if ($checkin < $minDate) $minDate = $checkin; //<--- here...how can I change the minDate of datepicker to the new value?
}
?>
</body>
</html>
In your case you can so this.
$(function() {
$( "#arrival_date" ).datepicker();
$( "#arrival_date" ).datepicker({ minDate: new Date(<?php echo $checkin ?>) });
});
$( "#arrival_date" ).datepicker( "option", "minDate", selectedDate );
Please refer this link. this may help you. http://jqueryui.com/demos/datepicker/#date-range
I hope this is what you want.
This is taken from an earlier stackoverflow post but it should help you solve your problem
jQuery datepicker minDate variable
$("#checkinDate").change(function() {
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
$("#arrival_date").datepicker("option", "minDate", testm);
});
i don't know when or how checkin changes, but maybe something like..
$checkin.change(function () {
newDate = $(this).val();
$( ".selector" ).datepicker({
minDate: new Date(newDate)
});
});