Hiii..
My concept is an agent wants add date from backend which is from(6/07/2015) to until(20/07/2015) these dates will store in database. if agent want disable 2 days(ex. 12/07/15 and 14/07/2015) then how to show these dates disable in datepicker on fron end. Because these two day agent haven't product. That's why agent wants these two day disable and remaining day 6 to 20 should be enable.
Please any body have any idea please help me.
Thanks!!!
please refer this link. this is working example with jquery datepicker.
Please see below code.
var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
defaultDate: new Date("3-1-2012"),
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
Bootstrap datepicker:
In the bootstrap datepicker you can use the method:
datesDisabled
String, Array. Default: []
Array of date strings or a single date string formatted in the given date format
for example:
$('#sandbox-container input').datepicker({
datesDisabled: ['07/06/2015', '07/21/2015']
});
JQUERY datepicker UI
In this use the beforeShowDay method
var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
refernce for JQUERY datepicker UI
Related
I have one problem, which I can not resolve and have no idea where is mistake
One I create a tabel called posts and in codeigniter create a form Posts, after createing all post I want to display posts in index.php and I have table called
Date of departure, and date of return. One i create post date looking good but when I display in my index.php it's look like 0000-00-00 00:00:00
In begginig data type was Date, now i change to be DateTime but nothing happend, same problem
Maybe I make mistake in my JS script
Any comment ?
My script
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker1" ).datepicker();
} );
</script>
When your field in MySQL is Date-time it aspects proper format before saving in database.
So convert string to date time format in php using.
date("Y-m-d H:i:s", strtotime($string));
Or you can do the same in Datepicker
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
var h = d.getHours();
h = (h < 10) ? ("0" + h) : h ;
var m = d.getMinutes();
m = (m < 10) ? ("0" + m) : m ;
var s = d.getSeconds();
s = (s < 10) ? ("0" + s) : s ;
datetext = datetext + " " + h + ":" + m + ":" + s;
$('#datepicker').val(datetext);
},
});
});
Fiddle for datepicker
Note if you want date only in MySQL field the omit hour min sec part of conversion
im a javascript / jQuery n00b so bear with me
I have a table in the database that contains multiple rows with startdate & enddate columns
I have on the page a datepicker jquery element
What I need it to do is on the page load check the database table and all the dates from startdate to enddate to be disabled
I have the below which would do individual dates however I dont know how to get it to loop and disable multiple entries ( ranges - from date to date )
For example 24-4-2017 to 26-4-2017 disabled also 30-4-2017 to 17-5-2017 disabled
so multiple ranges need to be disabled
Code I have so far below, please help guys Ive been racking my brains over this for 2 days now and have severe code block
var disabledDays = ["22-04-2017"]; // M-DD-YYYY Format
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
/*
Above 2 are probably redundant because BaT are open Bank Holidays
and also open weekends so ..
*/
/*
Create DatePicker
Change MaxDate below to show more months
*/
jQuery(document).ready(function() {
jQuery('#date').datepicker({
minDate: new Date(2017, 0, 1),
maxDate: new Date(2017, 6, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: nationaldays
});
});
Just compare the day that is currently rendering with disabled dates range.
$(document).ready(function() {
var startDisabledDates = new Date(2017, 03, 10),
endDisabledDates = new Date(2017, 03, 20);
$("#date").datepicker({
beforeShowDay: function(day) {
var isSelectable = day < startDisabledDates || day > endDisabledDates;
return [isSelectable];
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="date">
I am implementing jquery fullcalendar in my php website. i want to make multiple selection for date. After selecting multiple dates automatically jump to agendaDay view Where i can select different time. please help me to solve this issue.Please someone tell me is it possible to select multiple dates in month view , after selecting it will jump to agendaDay view. I need end date in agendaday view so that i can add it in database. Suppose i am seleting dates from "03-02-2015" to "07-02-2015" in month view. after selecting it is jumping to day view where it is giving only "03-02-2015". not displaying "07-02-2015". i need this end date to add in my database so that i can define my schedule is from 3 feb to 7 feb.
This is my code for jump from month to day view
select: function(start, end, jsEvent, view) {
if (view.name=='month') {
var d = new Date();
var month = new Array();
month[0] = "01";
month[1] = "02";
month[2] = "03";
month[3] = "04";
month[4] = "05";
month[5] = "06";
month[6] = "07";
month[7] = "08";
month[8] = "09";
month[9] = "10";
month[10] = "11";
month[11] = "12";
var curr_date = d.getDate();
var curr_month = month[d.getMonth()];
var curr_year = d.getFullYear();
if (curr_date < 10) {
curr_date = "0" + curr_date;
}
var curdate = curr_year + '-' + curr_month + '-' + curr_date;
if(start.format() < curdate)
{
alert('You cannot fix schedule for past date');
}
else
{
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('gotoDate', start, end);
}
} else {
var start = start.format();
var end = end.format();
fee_add("Today Schedule",start, end);
}
},
Display date range on multi-day event in agendaDay view
Using the eventRender callback, you can fully customize how events are displayed.
eventRender: function (event, element, view ) {
if(view.name == 'agendaDay'){ // If day view
element.find('.fc-time').remove(); // Remove the original time element
element.prepend( // Add start and end
"<span>" + event.start.format('MMM D') + // Format however you want
"-</span><span>" + event.end.format('MMM D') + "</span>");
}
},
And your select function is needlessly complicated. Make use of the fact that all dates in fullcalendar are momentjs objects.
select: function (start, end, jsEvent, view) {
if (view.name == 'month') {
if (start.isBefore(moment())) { // moment() creates a date object with the current date
alert('You cannot fix schedule for past date');
return;
} else {
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('gotoDate', start, end);
}
}
$('#calendar').fullCalendar('addEventSource', [{ // This might be different for you
// but you need to actually add the new event somehow
title: "new event",
start: start,
end: end
}]);
}
And here is a working JSFiddle.
I've been trying to create a validation for my form. I've been looking around on how to disable weekends in date time picker as well as holidays. I am using this Jquery script from Trentrichardson http://trentrichardson.com/examples/timepicker/
I am sort of new in JS and am about to pull out my hair as I cannot find a way to make this code work:
$(document).ready(function(){
$('.timepicker').datetimepicker({ beforeShowDay: $.datepicker.noWeekends });
var natDays = [
[2, 26, 'ph'], [2, 6, 'ph'], [2, 17, 'ph']
];
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
});
I found this code yesterday, which is the correct answer(Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?), but I can't get it to work. It doesn't show the holidays but weekends have been disabled(working).
Any ideas?
Checking whether a date is a Saturday or Sunday should not require a separate function:
if (date.getDay() % 6) {
// date is not a weekend
} else {
// date is a weekend
}
Checking for public holidays (which can be much more difficult given that dates change from year to year and place to place) can be easy too. Create a list of the dates in a set format (ISO8601 is convenient), then you can just test against current date:
// You may have a function like this already
// d is a javascript Date object
function dateToISO(d) {
function z(n){return (n<10? '0':'')+n}
return d.getFullYear() + '-' +
z(d.getMonth() + 1) + '-' +
z(d.getDate());
}
// s is a date string in ISO8601 format
function isPublicHoliday(s) {
var holidays = '2012-12-25 2012-12-26'; // list holidays
var m = holidays.match(s);
return !!(m && m.length);
}
isPublicHoliday(dateToISO(date)); // true for 2012-12-25
Of course you will want to implement the above differently, but it gives you the gist of it. Presumably the date picker returns a date object, or a formatted string that you can test. Testing against a string is very fast and saves a lot of hassle with arrays and functions. Very easy to maintain too, since the dates are quite human readable.
I'm having a bit of an issue with jQuery UI Datepicker where I am trying to highlight free days in a given month as determined by an ajax call.
The problem is two-fold -
The beforeShowDay only appears to be executing correctly in Chrome, not FF or IE, the free-day class is simply not being added in those browsers.
Even in Chrome, when scrolling to the previous month, the free day class is not added until returning to that month, in other words the free days are not highlighted on the first view of that month. This does not appear to be an issue moving forward a month though.
javascript
// declare freeDays global
var freeDays = [];
// perform initial json request for free days
fetchFreeDays();
$(document).ready(function()
{
// fairly standard configuration, importantly containing beforeShowDay and onChangeMonthYear custom methods
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: 'DD, d MM, yy',
altField: '#date_due',
altFormat: 'yy-mm-dd',
beforeShowDay: highlightDays,
onChangeMonthYear: fetchFreeDays,
firstDay: 1 // rows starts on Monday
});
});
// query for free days in datepicker
function fetchFreeDays(year, month)
{
var start_date = '';
// if a month and year were supplied, build a start_date in yyyy-mm-dd format
if (year != undefined && month != undefined) {
start_date = year +'-';
start_date += month +'-';
start_date += '01';
}
$.getJSON("ajax.todos.php?start_date="+ start_date, function(data){
$.each(data, function(index, value) {
freeDays.push(value.freeDate); // add this date to the freeDays array
});
});
}
// runs for every day displayed in datepicker, adds class and tooltip if matched to days in freeDays array
function highlightDays(date)
{
for (var i = 0; i < freeDays.length; i++) {
if (new Date(freeDays[i]).toString() == date.toString()) {
return [true, 'free-day', 'no to-do items due']; // [0] = true | false if this day is selectable, [1] = class to add, [2] = tooltip to display
}
}
return [true, ''];
}
php
// ajax.todos.php
$i = 0; // counter prevents infinite loop
$cutoff = '61'; // limit on timespan (in days)
$result = array();
// if date is provided, use it, otherwise default to today
$start_date = (!empty($start_date)) ? mysql_real_escape_string($start_date) : date('Y-m-d');
$check_date = $start_date;
$end_date = date('Y-m-d', strtotime("$start_date +$cutoff days")); // never retrieve more than 2 months
while ($check_date != $end_date)
{
// check if any incomplete todos exist on this date
if (mysql_result(mysql_query("SELECT COUNT(id) FROM " . DB_TODOS . " WHERE date_due = '$check_date'"), 0) == 0)
{
$result[] = array('freeDate' => $check_date);
}
// +1 day to the check date
$check_date = date('Y-m-d', strtotime("$check_date +1 day"));
// break from loop if its looking like an infinite loop
$i++;
if ($i > $cutoff) break;
}
header('Content-type: application/json');
echo json_encode($result);
css
/* override free days background in jquery ui datepicker */
.free-day {
background: #2e9500;
}
.free-day a {
opacity: 0.7;
}
I wrote a tutorial about this a couple of months ago which is might have some extra info, which is here.
The problem is that fetchFreeDays() is asynchronous, so it is possible that $("#datepicker").datepicker() finished executeing before you have populated your freeDays array, therefore you don't see anything when the page first renders.
Try putting $("#datepicker").datepicker() inside your $.getJSONs callback function.