How To Disable Specific Days and Dates Using BeforeShowDay In jQueryUiDatepicker? - datepicker

I already have functioning code in jQueryUiDatepicker that disables Fridays and Saturdays and all previous days (plus 2 days). My issue is trying to add 2 specific dates to this existing Datepicker code that will also disable these dates.
This is my existing code on starting line 92 in jQueryUiDatepicker:
beforeShowDay: function(date) {
var show = true;
if(date.getDay()==5||date.getDay()==6) show=false
return [show];
},
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8AM
if(hour >= 08){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
},
I am trying to disable 18th and 19th October 2017 and failing, this is the code I have added directly underneath the above code:
beforeShowDay: var array = ['18/10/2017', '19/10/2017']
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [ array.indexOf(string) == -1 ]
},
My question is how can I disable all previous dates, all Fridays and Saturdays and these 2 dates in the October?
Note# This coding has to be done in jquery.ui.datepicker, not a script in html

Hope this helps
use inArray instead of indexOf and you can also disable all previous dates using minDate
var array = ["18/10/2017", "19/10/2017"];
$(function() {
$('input').datepicker({
minDate: new Date(),
beforeShowDay: function (date) {
$thisDate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
var day = date.getDay();
if ($.inArray($thisDate, array) == -1&&day!=5&&day!=6) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
});
});
DEMO

Related

Date Picker is not disabling dates

I need to disable the first and third Wednesday in each month. The code I am using is below.This was working but when I added the new dates for 2021 it stopped working. Please help. Thanks
<script>
var dates = ["6-3-2019","20-3-2019","3-4-2019","17-4-2019","1-5-2019","15-5-2019","5-6-2019","19-6-2019","3-7-2019","17-7-2019","7-8-2019","21-8-2019","4-9-2019","18-9-2019","2-10-2019","16-10-2019","6-11-2019","20-11-2019","4-12-2019","18-12-2019","1-1-2020","15-1-2020","5-2-2020","19-2-2020","4-3-2020","18-3-2020","1-4-2020","15-4-2020","6-5-2020","20-5-2020","3-6-2020","17-6-2020","1-7-2020","15-7-2020","5-8-2020","19-8-2020","2-9-2020","16-9-2020","7-10-2020","21-10-2020","4-11-2020","18-11-2020","2-12-2020","16-12-2020","06-01-2021","20-01-2021","03-02-2021","17-02-2021","03-03-2021","17-03-2021","07-04-2021","21-04-2021","05-05-2021","19-05-2021","02-06-2021","16-06-2021","07-07-2021","21-07-2021","04-08-2021","18-08-2021","01-09-2021","15-09-2021","06-10-2021","20-10-2021","03-11-2021","17-11-2021","01-12-2021","15-12-2021"];
function DisableDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [dates.indexOf(string) == -1];
}
$(function() {
$("#datepicker2").datepicker({
beforeShowDay: DisableDates,
minDate: +1
});
});
</script>

How to get the current date in React Native

I'm trying to get the current day/month/year in a React Native App. I am new at this, so I have many doubts about the implementation.
I tried to follow the following solution, but does not work for me:
currentDay: new Date(),
console.log('Date:'+this.state.currentDay ,);
console.log('Day: '+this.state.currentDay.getDay() , 'Month: ' + this.state.currentDay.getMonth(), 'Year :'+ this.state.currentDay.getYear());
Most easiest way to install npm install moment --save
Moment is a JavaScript date and time manipulation library for parsing, validating, manipulating, and formatting dates. 
You can simply import it in your code:
import moment from 'moment';
var now = moment().format();
if you just want current date and output in your desired format, you can use moment with format function
var currentDate = moment().format("DD/MM/YYYY");
Result
30/03/2019
You can change date format according to your requirement using Moment library
You can refer the following documents read about how to use moment and what function they will provide
https://momentjs.com
https://devhints.io/moment
Install the moment package: npm i moment
import moment from 'moment';
var dateAndTime= moment().format("DD/MM/YYYY HH:mm:ss")
output: 15/11/2019 15:33:23
var date= moment().format("DD/MM/YYYY")
output: 15/11/2019
(this output is only for current date, of course).
const onPressDateValidation = () =>{
const currentDate ='2022-02-20'
// const currentDate ='2022-02-25'
// const currentDate ='2022-02-26'
const fromDate ='2022-02-20'
const toDate = '2022-02-25'
console.log("Umesh_______1 ", currentDate);
console.log("Umesh_______2 ", fromDate);
if ( moment(currentDate).isSameOrAfter(fromDate) ) {
if( moment(currentDate).isSameOrBefore(toDate)){
alert("Show your Ad either it's Banner Ad or Video Ad")
}else{
alert(" Ad is Expired")
}
} else {
alert("Ad is not started yet")
}
}
You need to add a getDate() function after newDate() .. i.e. var date = new Date.getDate()
The following code example (which should clarify implementation purposes) is illustrated on AboutReact.com, where you can run the code online.
import React, { Component } from 'react';
import { StyleSheet, View, Alert, Text } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
//default value of the date time
date: '',
};
}
componentDidMount() {
var that = this;
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
var hours = new Date().getHours(); //Current Hours
var min = new Date().getMinutes(); //Current Minutes
var sec = new Date().getSeconds(); //Current Seconds
that.setState({
//Setting the value of the date time
date:
date + '/' + month + '/' + year + ' ' + hours + ':' + min + ':' + sec,
});
}
render() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
fontSize: 20,
}}>
Current Date Time
</Text>
<Text
style={{
fontSize: 20,
marginTop: 16,
}}>
{this.state.date}
</Text>
</View>
);
}
}
Obviously, the style is flexible and you could omit the time element of the code sample (but it may be useful to other users)..
Hope this helps

Datepicker Materializecss disabled days function

I'm working with datepicker from materializecss and I need to disabled all days unless the Monday, at other plugins I used 'daysOfWeekDisabled'
parameter but in this case I must to use disableDayFn: function(){} and when I insert a parameter all calendar is disabled. Here is an example
$('#initCourse').datepicker({
firstDay: 1,
minDate: new Date(),
format: "dd.mm.yyyy",
disableDayFn: function(){
return disabled = '0, 2, 3, 4, 5, 6'
}
});
Any idea? Thanks in advance
It worked fine, but I use another way in case you need to disable one or more dates
disableDayFn:function (date) {
let disableListDate = [new Date('2018,12,5').toDateString(),new Date('2018,12,6').toDateString()];
if(disableListDate.includes(date.toDateString())) {
return true
}else{
return false
}
}
Here's a working example.
disableDayFn has a parameter date which you can use to find every occurrency of a specific date.
disableDayFn: function(date) {
if(date.getDay() == 1) // getDay() returns a value from 0 to 6, 1 represents Monday
return false;
else
return true;
}

How to set disabled minutes

I've been using this DateTime picker on a section of my website, I have a schedule per week which has a start and end time depending on the day of the week and I wanted to disable the time that was out of the schedule range and that includes minutes, what was my surprise? I couldn't find any documentation about disabling minutes. I decided to change the DateTime plugin for another one but I would have to change all the code that I already have. so I came back to [eonasdan-datetimepicker] Is there any way to get this done? I'm able of disabling hours successfully but I'm talking about minutes.
You could use the option disabledTimeIntervals but this only work for specific dates (moments), then you must specify the interval for each available day. I did something like this:
var addingColacionInterval = function (disabledTimeIntervals, currDate) {
var intervalsPerDay = {
1: { //1-7 where 1 is Monday and 7 is Sunday
startHour:15,
startMinute: 40,
durationInMinutes: 30
},
2: {
startHour:8,
startMinute: 20,
durationInMinutes: 50
}
// etc
}
var intervalForWeekDay = intervalPerDay[currDate.isoWeekday()]; //.isoWeekday(); // returns 1-7 where 1 is Monday and 7 is Sunday
var initialTime = currDate.clone().set({ hour: intervalForWeekDay.startHour, minute: intervalForWeekDay.startMinute });
disabledTimeIntervals.push([initialTime, initialTime.clone().add(parseInt(intervalForWeekDay.durationInMinutes), 'minutes')]);
}
var minDate = moment("the min selectable date");
var maxDate = moment("the max allowed date");
//for disable colación minutes intervals we can't use disableHours because don't work with minutes disabledTimeIntervals doesn't work for all days (like, but you have to loop trought
var disabledTimeIntervals = [];
var currDate = minDate.clone().startOf('day');
var lastDate = maxDate.clone().endOf('day');
do {
addingColacionInterval(disabledTimeIntervals, currDate);
} while (currDate.add(1, 'days').diff(lastDate) < 0);
var disabledHours = [0, 1, 2, 3, 4, 5, 6, 7, 23];
$scope.disableDays = [];
if ($scope.import.disableSunday) {
$scope.disableDays = [0];
}
//
$scope.dateSecOptions = {
minDate: minDate.format('YYYY-MM-DD'),
maxDate: maxDate.format('YYYY-MM-DD'),
disabledHours: disabledHours,
disabledTimeIntervals: disabledTimeIntervals,
stepping: 10,
};
in contrast with disabledTimeIntervals also exist the option disabledHours which allow you to disable hours for all available (selectable) days in the calendar widget.
what exactly do you want? like for example just allowing users to select specific times like just half hour [30] or whole hour? [00] because if that is the case, you can use the stepping function, what it does is that when users select the up or down arrow, the minutes advance as much as you choose, for example 30 minutes:
$(document).ready(function () {
$('#datetimepicker4').datetimepicker({
stepping:30
});
});

jQuery Datepicker popup tooltip

I'm really just looking to assign additional information to dates. I am currently setting up datepicker with the following:
beforeShowDay: function(date){
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, ajaxDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
},
Where ajaxDates is an array containing a list of available dates such as:
var ajaxDates = [ "26-2-2015", "27-2-2015"];
It's for a booking system were I have another array containing the number of seats available for every date. I had seen a post that I can no longer find were someone was attaching additional information to the dates. If someone could point me in the right direction that would be great!
Edit: I have noticed that the a title is attached to each date which on hover shows the tooltip as "Available" or "Unavailable". Is there any easy method to access through the datepicker?
The solution that I was referring to was:
Add custom parameter to jQuery UI Datepicker
An example of how to set additional parameters is as followed:
var input = $("#datepicker");
var result = $("#result");
var courses = {
"02-09-2013" : "history",
"10-09-2013": "physics"
};
input.datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
firstDay: 1,
numberOfMonths: 3,
onSelect: function(dateText, pickerObj){
result.attr("data-course-id", courses[dateText]);
course.innerHTML = courses[dateText];
},
altField: "#result"
});
http://jsfiddle.net/Seandeburca/qbLwD/