I am using this code to create a jquery calendar on my page
$(function(){
//set the datepicker
var dateToday = new Date();
$('#pikdate').datetimepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
});
how to add a day in this calendar that calendar should be start from after 24 hour.
You can do like this.
$('#pikdate').datepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
You could add a day in the date you are setting as "minDate".
See the example here (I changed your code):
$(function(){
//set the datepicker
var dateToday = new Date();
dateToday.addDays(1); // it will add one day to the current date (ps: add the following functions)
$('#pikdate').datetimepicker({
minDate: dateToday,
dateFormat: 'dd/mm/yy',
defaultDate: '+1w'
});
});
But to make the "addDays" function work you must create the function as you can see down.
I always create 7 functions, to work with date in JS: addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addYears.
You can see an example here: http://jsfiddle.net/tiagoajacobi/YHA8x/
This are the functions:
Date.prototype.addSeconds = function(seconds) {
this.setSeconds(this.getSeconds() + seconds);
return this;
};
Date.prototype.addMinutes = function(minutes) {
this.setMinutes(this.getMinutes() + minutes);
return this;
};
Date.prototype.addHours = function(hours) {
this.setHours(this.getHours() + hours);
return this;
};
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Date.prototype.addWeeks = function(weeks) {
this.addDays(weeks*7);
return this;
};
Date.prototype.addMonths = function (months) {
var dt = this.getDate();
this.setMonth(this.getMonth() + months);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
Date.prototype.addYears = function(years) {
var dt = this.getDate();
this.setFullYear(this.getFullYear() + years);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
They are propotype functions it means that every variable from the type "Date" will have this functions.
Related
I have this code for jquery UI datepicker modified to select a complete week, i want to highlight the current selected week, right now the activate date which is today is highlighted but i want it should the entire week starting from sunday
the code is already selecting the week when i clik on any row, but the only issue is on load it does not select the current week, it just select the todays date
Here is the code i am using
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
changeMonth: true,
changeYear: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
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();
}
});
$('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
any idea how can i do this
html is
<div class="week-picker"></div>
here is the fiddle
https://jsfiddle.net/6mbp3Lgn/
i want that today is 3rd nov, it should keep the first row selected because 3rd falls in first week and like that
I have 2 datepickers. #datepicker0 and #datepicker1 and the following code to check if the date_from is after date_to:
$('#datepicker0').datepicker({
dateFormat: 'yy-mm-dd'
});
var valeDate = {
dateFormat: 'yy-mm-dd',
onSelect: function() {
if ($('#datepicker0').val() > $(this).val()) {
alert("Date problem");
$(this).val(null)
}
$(this).change();
}
}
$("#datepicker1").datepicker(valeDate).on("change", function() {
display("Change event");
I would like to remove the parameter #datepicker0 from the onSelect function in order to make the function reusable.
Could anyone show me how to make it?
function validateDate(datepicker, value) {
if (value > datepicker.val()) {
alert("Date problem")
datepicker.val(null)
}
datepicker.change()
}
var valeDate = {
dateFormat: 'yy-mm-dd',
onSelect: function() {
validateDate($(this), $('#datepicker0').val())
}
}
Next time, please address questions like this (everything works but code require modifications) to code review (https://codereview.stackexchange.com/)
finally i used this code:
function datepickerValidator(startDate,endDate) {
var datepickerFrom = startDate;
var datepickerTo = endDate;
// returns the millisecond obtained from the string 'dd-mm-yy'
function getTimeMillis(dateString) {
var splittedFrom = dateString.split("-");
var day = splittedFrom[0];
var month = splittedFrom[1];
var year = splittedFrom[2];
var dateTmp = new Date(year + "-" + month + "-" + day);
var timeMillis = dateTmp.getTime();
return timeMillis;
}
var validateDatePickerOption = {dateFormat: 'dd-mm-yy',
onSelect: function() {
from = getTimeMillis(datepickerFrom.val());
to = getTimeMillis($(datepickerTo).val());
if ( from > to ) {
alert("Date problem: value 'To' must be after 'From'");
$(this).val(null)
}
}
}
return validateDatePickerOption;
}
and for each datepicker:
var from = $("#From");
var to = $("#To");
var datepickerOption = datepickerValidator(from,to);
from.datepicker(datepickerOption);
to.datepicker(datepickerOption);
Here is a javascript made by materialize, and I am trying to disable specific dates. But I tried a lot of code here but could not get any result from this.
<script>
var dateToday = new Date();
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
format: "yyyy-mm-dd",
min: dateToday,
max: new Date(2030, 11, 31),
closeOnSelect: true,
onOpen: function () {
this.clear();
},
onSet: function () {
var x,y,year,date,month;
x = $('.datepicker1').pickadate().val().toString();
y = x.split(/[ ,]+/);
date = y[0];
month = y[1];
year = y[2];
console.log(y[0]+" "+ y[1]+ " "+ y[2]);
if(date && month && year){
this.close();
}
}
});
$("#mcDateFrom").click(function(event) {
event.stopPropagation();
$("#mcDateFrom").first().pickadate("picker").open();
});
$("#mcDateTo").click(function(event) {
event.stopPropagation();
$("#mcDateTo").first().pickadate("picker").open();
});
</script>
I am also trying the below code also.
var array = ["2018-06-28","2013-03-15","2013-03-16"]
$('.datepicker').pickadate({
beforeShowDay: function(date){
var string = jQuery.pickadate.formatDate('yyyy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
But no result after trying a lot of things as well as this code. I need help. Thanks in advance.
I have a question regarding jquery.ui datepicker.
I have a project where the week starts on Friday.
That I have no problem with that.
The thing is datepicker not find the way to make the select that I have for weeks, beginning with Friday and also select default Thursday click anywhere for that week.
In summary:
Week Starts Thursday.
The Selection of the week begins Thursday (range)
OnSelect Automatically switches to the selected week Thursday.
Can you help?
My code:
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 5,
dateFormat: "dd/mm/yy",
maxDate : "+0",
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
//window.location = '<?php echo HTTP_URI; ?>ranking/week?day=' + dateText + '';
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
Yeep! I find my own solution.
My code
$(function() {
var selectCurrentWeek = function(callback) {
window.setTimeout(function () {
$(".week-picker").find("a.ui-state-active").parents("tr").find("a.ui-state-default").each(function(key, node) {
$(this).addClass("ui-state-active");
});
callback();
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 5,
dateFormat: "dd/mm/yy",
maxDate : "+0",
onSelect: function(dateText, inst) {
selectCurrentWeek(function() {
var startDayy = $(".week-picker").find("a.ui-state-active").eq(0);
var EndDayy = $(".week-picker").find("a.ui-state-active").eq(6);
var startDay = startDayy.text();
var EndDay= EndDayy.text();
var monthStart = startDayy.parent().attr('data-month');
var monthEnd= EndDayy.parent().attr('data-month');
var yearStart = startDayy.parent().attr('data-year');
var yearEnd = EndDayy.parent().attr('data-year');
if(monthStart < 10){ monthStart = '0'+monthStart; }
if(monthEnd < 10){ monthEnd = '0'+monthEnd; }
var CompleteStartDay = startDay +'/'+ monthStart +'/'+yearStart;
var CompleteEndDay = EndDay +'/'+ monthEnd +'/'+yearEnd;
$('#startDate').text(CompleteStartDay);
$('#endDate').text(CompleteEndDay);
//window.location = '<?php echo HTTP_URI; ?>ranking/week?day=' + CompleteStartDay + '';
});
}
});
});
I have to set the startdate/Mindate in jquery datapicked calender. i am using datepicker v1.7.2. and using mindate and max date prpperty but its not working fine.
Try this code. In this the end date is 1 day after start date.
$('#enddate').datepicker({
dateFormat: "dd M yy",
beforeShow: customRange,
//Your other configurations.
});
function customRange(input) {
if (input.id == "enddate")
{
dateMin = new Date();
if ($("#startdate").datepicker("getDate") != null)
{
dateMin = $("#startdate").datepicker("getDate");
dateMin.setDate(dateMin.getDate() + 1); //here we are adding 1 day to start date/
}
}
return {
minDate: dateMin
};
}