How will I disable specific date together with future date? I tried this code but only the specific date is working.
var array = ["2017-10-07","2017-10-08"]
$('#INVOICE_TRANSACTIONDATE').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
maxDate: 0
}
});
Related
I want to manipulate with some dates in my datepicker calendar, I just don't know how can I write the dates in the date format that I want. When I use dateFormat in my code it won't work.
My answer probably lies here somewhere but I can't figure it out where to use it in my code.
http://api.jqueryui.com/datepicker/#utility-formatDate
http://api.jqueryui.com/datepicker/#option-dateFormat
My code:
<script>
jQuery(function($) {
$(document).ready(function(){
var sesa1 = new Date(2019, 05, 04); // I want to write this dates in dd-mm-yy format
var sesa2 = new Date(2019, 06, 06); // They curently work in yy-mm-dd format
$(".picker").datepicker({
//dateFormat: 'dd-mm-yy' , // If I uncoment this line the defaultDate will go in year 2024!
defaultDate: '05/07/2019', // It works in format mm-dd-yy and I want it to be in dd-mm-yy
beforeShowDay: function (date) {
var day = date.getDay();
if (date >= sesa1 && date <= sesa2) {
return [(day != 0 && day != 1 ) ? true : false, 'green', 'some text'];
}
return [true, "", "sometext"];
}
});
});
defaultDate
Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
Since your default date is not presented in the proper format, it is not read right.
jQuery(function($) {
$(function(){
var sesa1 = new Date(2019, 05, 04);
var sesa2 = new Date(2019, 06, 06);
$(".picker").datepicker({
dateFormat: 'dd-mm-yy',
defaultDate: '07-05-2019',
beforeShowDay: function (date) {
var day = date.getDay();
if (date >= sesa1 && date <= sesa2) {
return [(day != 0 && day != 1 ) ? true : false, 'green', 'some text'];
}
return [true, "", "sometext"];
}
});
});
});
Also if you need to make a Date from a string, try using $.datepicker.parseDate().
$.datepicker.parseDate( format, value, options )
Extract a date from a string value with a specified format.
This way, if you can have date strings that are different formats, you can get a Date object regardless. To reverse it, use $.datepicker.formatDate( format, date, options ).
Hope that helps.
I have 5 datepickers one followed by other.If I select date1 then when I select date2 it should disable all the dates before selected date and when I select date2 ,date3 should automatically come with the same date as date2 .And when I select date4 it should disable all the dates before the selected date.
You can make an array of dates your want to disable and set their index to -1. for example
var array = ["2018-03-14","2018-03-15","2018-03-16","2018-03-17","2018-03-18"]
$('#your_date_field').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
I'm facing a issue with datetimepicker.
I have a page with an Order, that has a delivery date.
Whenever the Order is listed, the datetimepicker has a certain value (for example, some day last week.) I want to be able to edit it but only select a set of avaiable dates (from today up to 30 days including "some day last week").
How should I proceed?
Function of the picker:
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent:true,
showClose:true,
defaultDate: $.now(),
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
maxDate:maxdate,
});
EDIT:
I'm guessing i wasn't very explicit with my question.
Example for what i want:
minDate = 2017/10/14
maxDate = 2017/10/30
(at this point everything works fine)
Date option that i want to pick = 2017/09/10 (that is 1 month older than minDate) without changing minDate!
I want to create an exception date that is not inside the range of min/max date.
For the options showed I guess you are using eonasdan-datetimepicker.
So proceed like this:
var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent: true,
showClose: true,
defaultDate: $p.now(),
minDate: moment().startOf('day'),
maxDate: maxDate,
});
Where maxDate will have 30 days added using moment method .add()
for minDate It is easier if you use startOf('day') as will be the same you have, but easier to read.
EDIT
Ok so what you want is to allow your users to choose a "special day" that is not in the array, so for that you could use enabledDates option.
In which you will add your special day and the range of the days enabled, so only thus will be allowed to be selected and would be something like this:
let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
moment(specialDay, currentFormat), //this is our "special day"
moment(startDate, currentFormat) // we format the date to the format needed ];
//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
//apply the format
let date = moment().add(i, 'day').format(currentFormat);
enabledDates.push(moment(date, currentFormat));
}
//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view
$("#myDatepicker").datetimepicker({
format: currentFormat,
useCurrent: false,
showClose: true,
minDate: moment(specialDay, currentFormat),
maxDate: maxDate,
enabledDates: enabledDates,
});
Working fiddle https://jsfiddle.net/William_/2ze7bo27/
Edit: Make easier to change format and special date
I have the following date picker setup so that only the dates in the available dates collection defined in the page can be selected:
var availableDates = ["08-12-2015","29-12-2015"];
$('.departureDate').datepicker({
beforeShowDay: departureDates,
onSelect: filterInstances,
altField: '#uniformDate',
altFormat: 'dd-mm-yy',
defaultDate: get_default_date
});
function departureDates(date) {
// Change the format of the date for local independent comparison
var dmy = jQuery.datepicker.formatDate('dd-mm-yy', date);
if (availableDates.indexOf(dmy) == -1) {
return [false];
} else {
return [true];
}
}
function get_default_date() {
var date = new Date(availableDates[0])
return date;
}
The problem I have now is that my date picker won't default to the first available date.
In my Firebug console i receive the following error using the code shown above:
TypeError: i.getTime is not a function
http://localhost:54044/scripts/jquery-ui-1.11.4.min.js Line 8
Any help with this issue would be greatly appreciated.
Cheers,
jezzipin
For all of those interested in this post, this was the solution:
$('.departureDate').datepicker({
beforeShowDay: departureDates,
onSelect: filterInstances,
altField: '#uniformDate',
altFormat: 'dd-mm-yy',
defaultDate: get_default_date()
});
function departureDates(date) {
// Change the format of the date for local independent comparison
var dmy = jQuery.datepicker.formatDate('dd-mm-yy', date);
if (availableDates.indexOf(dmy) == -1) {
return [false];
} else {
return [true];
}
}
function get_default_date() {
var date = availableDates[0];
date = date.split("-");
date = new Date(date[2], date[1] - 1, date[0]);
return date;
}
You need to invoke get_default_date.
Replace:
defaultDate: get_default_date
With:
defaultDate: get_default_date()
get_default_date returns the function. get_default_date() returns whatever the function returns, so in this case, the default date.
Also, your date strings are formatted incorrectly. Instead of dd-mm-yyyy, the Date constructor expects mm-dd-yyyy.
Replace:
var availableDates = ["08-12-2015","29-12-2015"];
With:
var availableDates = ["12-08-2015","12-29-2015"];
The date format you are using is wrong.
08-12-2015 became : Wed Aug 12 2015 00:00:00 GMT+0200 (CEST) and is not in the valid date range.
29-12-2015 is invalid.
I am using a jquery datepicker and i had an option box being populated with info depending on what day it was..
Worked perfectly...
$('#bydate').datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
beforeShowDay: unavailable,
minDate: -0,
dateFormat: "dd/mm/yy",
onSelect: function(e) {
var date = new Date(e);
var day = date.getDay(); // 0 = sunday etc...
// clean all the options
$("#duration").empty();
// if monday
if (day === 1) {
// add "5 days" options
$("#duration").append("<option value='5'>5 days</option>");
// else if friday
} else if (day === 5) {
// add 3 / 7 / 14 days options
$("#duration").append("<option value='3'>3 days</option>"
+ "<option value='7'>7 days</option>"
+ "<option value='14'>14 days</option>");
} else { // else...
}
}
Until i came to needing to change the format from mm/dd/yy to dd/mm/yy.
Now it doesn't work, it looks like getDay is getting the month number and trying to calculate the day number...
I need date to know its dd/mm/yy or getDay to know that I am using dd/mm/yy
example here http://offline.raileisure.com/
The problem is that you changed the format of how the datepicker shows the dates, but not the one of the constructor Date(). You can do this:
onSelect: function(e) {
e = e.split('/')[1] + '/' + e.split('/')[0] + '/' + e.split('/')[2];
var date = new Date(e);
...
You can also use the datepicker's parseDate function, which takes the date format as parameter. See http://docs.jquery.com/UI/Datepicker/parseDate for details