Datepicker don't allow past dates plus today - javascript

Hi I have a bootstrap datepicker. I want to grey out all past dates plus the date today on the calendar. I know that I can grey out all past dates with this:
<script type="text/javascript">
$(function () {
$('#delayed-spiffdate').datepicker({
startDate: '-0d'
});
});
But how do I grey out the current date? Thanks.

If you want to exclude all past dates and today as well, then you need your startDate value to be +1d:
$(function () {
$('#delayed-spiffdate').datepicker({
startDate: '+1d'
});
});
DEMO: jsfiddle

War10ck's answer is the cleanest. Worth noting, you can also set your datepicker parameters to whatever you like using a date object. Here's another answer that also works:
$(function () {
$('#delayed-spiffdate').datepicker({
startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
});
});
http://jsfiddle.net/qy8kvf39/

Related

Gray out all but certain dates on Bootstrap datepicker

I'm setting up a datepicker, but I only want the user to be able to select dates from a pre-determined date array I have populated. These are dates where relevant events happened. Nothing happened on the other dates outside of the array.
Below is an example array that I would have.
dateArr = ["2015-10-27", "2015-10-29", "2015-11-10", "2016-11-30", "2016-12-07", "2017-06-29", "2017-06-30", "2017-10-23", "2017-12-13", "2018-03-27", "2018-03-29", "2018-03-30", "2018-03-31", "2018-04-02", "2018-04-07", "2018-04-08", "2018-04-09"]
I've looked at other examples, but none seem to do what I'm trying to do. The array dates would be selectable, and the rest would be grayed out.
Try with below Jquery code:
HTML Code:
<div id="datepicker"></div>
Jquery Code :
jQuery(function(){
var enableDays = ["7-8-2019", "13-8-2019"];
function enableAllTheseDays(date) {
var sdate = $.datepicker.formatDate( 'd-m-yy', date)
console.log(sdate)
if($.inArray(sdate, enableDays) != -1) {
return [true];
}
return [false];
}
$('#datepicker').datepicker({dateFormat: 'dd-mm-yy', beforeShowDay: enableAllTheseDays});
});
JFiddle Code Here:
http://jsfiddle.net/qampw1n5/

Bootstrap datetime picker use UTC but don' display the offset

So I added this script that displays datetime in bootstrap datetime picker in UTC format
<script type="text/javascript">
$(function () {
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-D HH:mm:ss Z',
});
});
</script>
Now every time the date is displayed like
2017-02-16 08:44:00 +01:00
How can I use UTC date and time but not display the offset +01:00 ?
You can remove 'Z'.
$(function () {
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-D HH:mm:ss',
});
});
I have a suggestion. You can create a global variable. Hope to help :)
var picker = $('#datetimepicker'l).data('datetimepicker');
var utcDate = picker.getDate();

jQuery DatePicker restrict dates

I am trying to restrict jquery datepicker values. So the the from date can not exceed the to date and vice versa.
Demo https://jsfiddle.net/DTcHh/21594/
I've tried multiple instances of this but can not seem to get it to work. Is it because I am using the UK date format?
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#from_date').datepicker({
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
var max = new Date(min.getTime());
max.setMonth(max.getDay() + 1); // Add one month
$('#to_date').datepicker('option', {minDate: min, maxDate: max});
}
});
$('#to_date').datepicker({
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Selected date or null if none
$('#from_date').datepicker('option', {maxDate: max});
}
});
As i'm new to JavaScript i'm keen to know exactly why my code doesn't work, so i can learn from this.
You cannot initialize date picker on same element twice. First, you called the date picker on element with its class; then with its ID.
Try to move the date format to date picker default function.
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy'
});
Or, you need to set dateFormat every time you initialize a date picker element.

Jquery Datetimepicker disable dates

i am using jquery datetime picker for getting date and time using
$(document).ready(function() {
$('#pickup_date').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
but i need to enable 3 weeks from the current date only.How to solve this.thanks in advance
<script>
function DisableWeekDays(date) {
var weekenddate = $.datepicker.noWeekends(date);
// In order to disable weekdays, we will invert the value returned by noWeekends functions.
// noWeekends return an array with the first element being true/false.. So we will invert the first element
var disableweek = [!weekenddate[0]];
return disableweek;
}
$(function() {
$( "#datepicker" ).datetimepicker({
beforeShowDay: DisableWeekDays
});
});
</script>
$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:0, //Today You can also '+1970/01/21' or '-1970/01/21' both ended up meaning -0 or +0
maxDate:'+1970/01/21' //3*7 days from today.
});
use minDate and maxDate
0 means 1970/01/01 which is start time of Unix time.You can plus/minus the String Date to set range of selectable dates.
The case You want to set the range to be yesterday to tomorrow it'll be
$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:'-1970/01/02', //Yesterday(plus one day from the 0 '1970/01/01')
maxDate:'+1970/01/02' //Tomorrow(minus one day from the 0 '1970/01/01')
});
http://xdsoft.net/jqplugins/datetimepicker/
The above answer is a good one, but if you want to set the date dynamically (based on the current date).
$(function () {
var currentDate = new Date();
var date = currentDate.toDateString();
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: date
});
});
Get the current date into a variable
Convert the date to a string
Pass the string to minDate
Or
$(function () {
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment()
});
});
Using JSMoment and pass moment.

jQuery UI Datepicker - Disable current date but NOT the highlight

I have the following code which disables the current date by setting minDate to current date + 1:
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
$("#minDate").datepicker({
showOn: "none",
minDate: tomorrow,
dateFormat: "DD dd-mm-yy",
onSelect: function(dateText) {
minDateChange;
},
inputOffsetX: 5,
});
The problem is that I want to disable the current date, but still keep it highlighted (Blue border around the date) in the calendar.
Is there a native way to do this using the datepicker or do I have to create a highlight script myself?
you don't need to set today and tomorrow as a variable. just set minDate: 1
The datepicker has a class on todays date called "ui-datepicker-today", so I simply added a class to that:
$(".ui-datepicker-today span").addClass("ui-state-hover")

Categories