disable the dates before the selected date - javascript

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 ]
}
});

Related

how to compare date with timestamp

I have a date in format yyyy-mm-dd(this date type is "Date"). assume this date as userdate. I have two more dates in format yyyy-mm-dd hh:mm:ss+00(date1 and date2) which is of the type Timestamp. assume these two dates as date1 and date2.
for example: 2022-05-02 18:12:44+00.
my requirement is if the userdate lies between date1 and date2 I should list some products from the warehouse. for this, I need to compare the userdate with date1 and date2.
the logic goes like this ..if userdate is in Between date1 and date2 then loop using FTL(freemarker template) for listing products.
the code is mentioned below.
<input type="date" id="myDate">
Submit
when user clicks on "submit" after selecting date. I'm passing this user selected date from url to other page.now I want to compare this userdate with other two dates which are timestamps.and I'm fetching these two timestamps from database table.
how shall I acheive this when the type of dates are different.
You can simply transfer Date to timestamp by getTime method.
let timestamp = date.getTime();
or transfer timestamp to Date by new Date.
let data = new Date(timestamp)
You can directly pass the timestamp into a new date object and then compare the values
const date1 = new Date(timestamp1);
const date2 = new Date(timestamp2);
const userDate = new Date(valueReceivedFromInput);
if(date1<=userDate && userDate<=date2){
// list products from the warehouse
}
Note:
If you are only looking to compare <= and >= then you don't need to use .getTime() unless you are looking to compare dates to check if they are equal like date1.getTime()===date2.geTime().
var date1 = new Date('December 25, 2017 01:30:00');
var date2 = new Date('June 18, 2016 02:30:00');
if(date1.getTime() === date2.getTime()){
//same date
}`enter code here`
best to use .getTime() to compare dates in js

Pikaday bug with a disableDayFn array to remove specific days

I am using Pikaday datepicker. All works well but for some complicated date manipulation I need to add/remove multiple dates.
<code>
var start_date = new Pikaday({
disableDayFn: function(date) {
var enabled_dates = ["06/11/2019","06/17/2019","06/24/2019"]; // dates I want to enable.
var disabled_dates = ["06/15/2019", "06/22/2019"]; // dates I want to disable.
if ((date.getDay() === 1 || date.getDay() === 2 || ($.inArray(moment(date).format("MM/DD/YYYY"), disabled_dates) === 0)) && $.inArray(moment(date).format("MM/DD/YYYY"), enabled_dates) === -1) {
return date;
}
},
format: 'MM/DD/YYYY',
field: document.getElementById('start_date'),
});
</code>
In this example above:
[this works fine] I am using an enabled_dates array to enable multiple dates I need to display on calendar.
[this works fine] I am removing ALL mondays and tuesdays using the actual day value '1' and '2' example: date.getDay() === x
[not working] when I try pass multiple dates in an array the first date is removed but the subsequent dates are not actioned.
In this example all good except for the date "06/22/2019" not removed as appears only removes the first date in array not subsequent
Fiddle demo:
http://jsfiddle.net/netfast/k36nhacz/18/

Date Picker Disabled Specific Date and Future date

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
}
});

How to change date in text box to desired format when something changed in a dropdown

I have a form which has bunch of input text boxes with date picker (datepicker.js). When user changes value in locale dropdown, I am changing the date format and reinitializing the date picker with that local specific format. If user has already entered/selected date in the textbox and changes locale then I want that date to be automatically get converted into that desired format.
For example if user has selected the date when locale drop down shows en_US and date will be 04/30/2016, if he changes the locale drop down to en_UK then I want the date to be shown as 30/04/2016 in the text box. I tried few libraries, but none of them seems to be simple. Can we do it in JQuery or UnderscorJS or in simple javascript?
dateFormat = (currentLocale == that.defaultLocale) ? 'm/d/Y' : 'd/m/Y';
var options = {
lazyInit : false, // Lazy init to prevent a lot of instances right away
timepicker : false,
format : dateFormat,
minDate: 0,
closeOnDateSelect: true
};
$('input.datetime').datetimepicker(options);
if(currentLocale == that.defaultLocale)
$('input.datetime').attr("placeholder", "mm/dd/yyyy");
else
$('input.datetime').attr("placeholder", "dd/mm/yyyy");
Are you looking for something like this? :
function getFormattedDate(date) {
var year = date.getFullYear();
var month = (1 + date.getMonth()).toString();
month = month.length > 1 ? month : '0' + month;
var day = date.getDate().toString();
day = day.length > 1 ? day : '0' + day;
return month + '/' + day + '/' + year;
}

How to move current date to the first row of the jQuery datepicker calendar

Is that possible to shift current day to the first row of the datepicker calendar? So the first row always contains the current day.
Following code will set minDate as First date of current month and maxdate as last date of current month.
var currentTime = new Date();
// First Date Of the month
var startDateFrom = new Date(currentTime.getFullYear(),currentTime.getMonth(),1);
// Last Date Of the Month
var startDateTo = new Date(currentTime.getFullYear(),currentTime.getMonth() +1,0);
$("#datepicker").datepicker({
dateFormat: 'dd.mm.yy',
minDate: startDateFrom,
maxDate: startDateTo
});

Categories

Resources