jquery ui date picker limit to Sundays - javascript

I have looked at some of the answers here to this type of question but could not get them to work how I needed them to. I need to have my jQuery UI datepicker only allow Sundays in the past to be selected. Is this possible to do?
Thank you

// Enable Sunday only
$("#datepickerID").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 1,
beforeShowDay: enableSUNDAYS
});
// Custom function to enable SUNDAY only in jquery calender
function enableSUNDAYS(date) {
var day = date.getDay();
return [(day == 0), ''];
}

It's not exactly your situation, but contains what you need to know to do what you need to do:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 0 = monday, 1 = tuesday, 2 = wednesday, 3 = thursday,
// 4 = friday, 5 = saturday, 6 = sunday
var daysToDisable = [2, 4, 5];
$('#<%= txtDate.ClientID %>').datepicker({
beforeShowDay: disableSpecificWeekDays
});
function disableSpecificWeekDays(date) {
var day = date.getDay();
for (i = 0; i < daysToDisable.length; i++) {
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
}
return [true];
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</form>
</body>
</html>

Related

How to show next 7 days while using datetimepicker?

function getNext7WorkingDays(){
var d = new Date();
var day = d.getDay();
if(day>=0 && day<=3) return 9;
else if(day!=6) return 10;
else return 11;
}
$('.datepicker_quiz_dataa').datetimepicker({
timepicker:false,
format:'d-m-Y',
formatDate:'Y/m/d',
minDate: 1,
maxDate: '+'+getNext7WorkingDays()+'D'
});
In this code I using datetimepicker where I am getting only date in d-m-y format and I want that it show current date to next 7 days dates only but now I am getting previous 14 days dates. So, How can I do this? Please help me.
Thank You
Try this below :
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "7d",
dateFormat: "d-m-y"
});
OR
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "1w",
dateFormat: "d-m-y"
});
Hope it helps
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker").datepicker({
minDate: 0,
maxDate: 6,
dateFormat: "d-m-y",
onSelect : function(r) { console.log(r) }
});
</script>
</body>
</html>

Display specific dates in bootstrap datepicker

I'm using bootstrap date picker in my project. It's a session booking project. From the admin panel, I add the sessions for specific dates and I want the user's of my website to be able to see the dates for which I have added a session. My frontend receives the data from database. The data contains all the dates for which I have added a session. I want my datepicker to display only these dates from the data and disable the other dates.
Currently I have temporarily used a select box to solve this issue. But a datepicker would be better as it looks good is easy to navigate.
See the picture below. This is how I have used a select box to temporarily solve the problem
Here is the desired output that I want
It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled
I tried searching it on google but I'm not able to find the solution. Is this possible using bootstrap date picker? If yes, please suggest a workaround.
You can use beforeShowDay function to enable only the dates returned from your back end system.
Documentation here
This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.
$(function () {
let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return enabledDates.indexOf(fullDate) != -1
}
});
});
beforeShowDay function also allows you to return classes for custom styling
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
if (enabledDates.indexOf(fullDate) != -1) {
return {
classes: 'enabled',
tooltip: 'You can select this date'
};
} else
return false
}
.enabled {
background: #DCDCDC;
}
None of the other solutions worked for me so here is my solution.
The documentation is not so clear and lacks of example but you can see a function that takes a date as a parameter and returns a Boolean, indicating whether or not this date is selectable
In this snippet, look at January 2020 for example in order to see only the active dates.
$(document).ready(function() {
var datesEnabled = [
'2021-01-01', '2021-01-11', '2021-01-21',
'2021-02-01', '2021-02-11', '2021-02-21',
'2021-03-01', '2021-03-11', '2021-03-21',
'2021-04-01', '2021-04-11', '2021-04-21',
'2021-05-01', '2021-05-11', '2021-05-21'
];
$("#datepicker-lorem").datepicker({
language: "fr",
autoclose: true,
todayHighlight: true,
todayBtn: true,
title: 'Test ;-)',
weekStart: 1,
format: 'dd/mm/yyyy',
// On n'active que les dates possibles
beforeShowDay: function(date) {
var allDates = date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
if (datesEnabled.indexOf(allDates) != -1) {
return {
classes: 'date-possible',
tooltip: 'Vous pouvez choisir cette date'
}
} else {
return false;
}
}
});
});
/* For better frontend result, add class to active date and add opacity to disabled date */
td.day.disabled {
opacity: 0.4;
}
td.date-possible {
background-color: red;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<input class="form-text form-control" type="text" id="datepicker-lorem" name="date_demande" value="" size="60" maxlength="128">
</div>
</div>
</div>
Using 'beforeShowDay' parameter you can disable dates:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
//date list that you want to disable
disableddates = ['10-10-2018', '10-11-2018', '10-12-2018'];
$("#datepicker").datepicker({
format: 'dd-mm-yyyy',
beforeShowDay: function(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
var currentdate = (m + 1) + '-' + d + '-' + y;
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1) {
return [false];
}
}
return [true];
},
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
});
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
</body>
</html>

JQuery Datepicker

Could someone help me to change code, I want to let my members choose a sunday between March – October (of every year ).
But only the 2nd or 4th Sunday of the month.
Thanks for help!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#datepic").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 2 || day == 5| day == 4| day == 6| day == 1| day == 3)
{
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
});
</script>
</head>
<body>
<p>Uw voorkeursdatum: <input id="datepic"/>
</body>
</body>
</html>
beforeShowDay option is the right place to allow 2nd and 4th sundays only to be picked.
In order to do this, I used two "flags" (variable used to determine a certain state within a loop).
One flag which toggles each time a sunday is encountered in the loop.
And one to be sure to consider only the current month sundays.
DatePicker is looping through each table cells in the function provided in the beforeShowDay option.
And even if it isn't "rendered", days from the previous or next months ARE going through this loop.
I also used a 100ms timeout to reset these flags once a month has been drawn.
It is needed when navigating from a month to another.
Here is the function working in this CodePen.
I left a couple useful console.log.
;)
$(function() {
var even=false;
var inCurrentMonth=false;
$("#DatePicker").datepicker({
beforeShowDay: function(fulldate) {
//console.log(fulldate);
var day = fulldate.getDay();
var date = fulldate.getDate();
// In current month when the date 1 is found.
if(date==1){
inCurrentMonth=!inCurrentMonth;
// To reset values right after month draw.
setTimeout(function(){
even=false;
inCurrentMonth=false;
},100);
}
// This condition prevents conting syndays frome the previous month.
if(inCurrentMonth){
// If NOT a sunday.
if ( day != 0 ){
return [false,"Otherdays"]
} else {
// If this sunday is even (2nd or 4th)
if(even){
even=!even;
return [true,"Selectable-Sunday","You can select me!"]
}else{
even=!even;
return [false,"Unselectable-Sunday"]
}
}
}
}
}).focus();
});

Jquery datepicker in master page

I know there is so many similar question already been asked but none of them solved my problem. I tried so many times but the datepicker still not work.
So in my master page
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<head/>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
In my content Page(head section inside asp content place holder 1)
// i tried this 4 way but still not work
// $("[id$=txtStart]")
// $("input[id$='date2']").datepicker();
<%--<%=txtStart.ClientID%>--%>
<%-- $("#<%=txtStart.ClientID %>")--%>
$(document).ready(function () {
$('[id$=txtStart]').datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$('[id$=txtEnd]').datepicker('option', 'minDate', min); // Set other min, default to today
}
});
//another datepicker same as above
$('[id$=txtEnd]').datepicker({
.....
}
});
});
this is my control
<td class="auto-style3"><asp:TextBox ID="txtStart" runat="server" > </asp:TextBox>
<td class="auto-style3"><asp:TextBox ID="txtEnd" runat="server" > </asp:TextBox>
Your code should be
$(document).ready(function () {
$("#<%=txtStart.ClientID%>").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$("#<%=txtEnd.ClientID%>").datepicker('option', 'minDate', min); // Set other min, default to today
}
});
});
I've tested and works fine with this code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
$(document).ready(function() {
$("[id$=txtStart]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("[id$=txtEnd]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
from <asp:TextBox ID="txtStart" runat="server"/> to <asp:TextBox ID="txtEnd" runat="server"/>
</div>
</asp:Content>
Thought I would suggest another datepicker range.
then your code would be:
<script>
$(document).ready(function () {
var dtStart = $('[id$=txtStart]'),
dtEnd = $('[id$=txtEnd]');
$('[id$=txtStart]').dateRangePicker(
{
separator: ' to ',
getValue: function() {
if (dtStart.val() && dtEnd.val())
return dtStart.val() + ' to ' + dtEnd.val();
else
return '';
},
setValue: function(s, s1, s2) {
dtStart.val(s1);
dtEnd.val(s2);
}
});
});
</script>
and your master page:
<link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/daterangepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>
result:

Check Date greater than 30 days from today's date

I am using jQuery datepicker and tried to find out difference between todays date and selected date , but getting issues... rather than issues... I was not able to find it perfectly...
I tried to do this on 'onSelect event of datepicker '
Question:
How to check whether selected Date using jQuery Datepicjer is greater than 30 days from todays date ?
Any help will be appreciated....!!
note: dont want to use any libraries, I need to solve this by using only jQuery.
Get the timestamp for 30 days from now:
var timestamp = new Date().getTime() + (30 * 24 * 60 * 60 * 1000)
// day hour min sec msec
Compare that timestamp with the timestamp for the selected date.
if (timestamp > selectedTimestamp) {
// The selected time is less than 30 days from now
}
else if (timestamp < selectedTimestamp) {
// The selected time is more than 30 days from now
}
else {
// -Exact- same timestamps.
}
I have created one sample for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <input type="text" id="thedate"/>
<div id="checkDate">Check Date</div>
</body>
</html>
and Js
$('#thedate').datepicker();
$('#checkDate').bind('click', function() {
var selectedDate = $('#thedate').datepicker('getDate');
var today = new Date();
var targetDate= new Date();
targetDate.setDate(today.getDate()+ 30);
targetDate.setHours(0);
targetDate.setMinutes(0);
targetDate.setSeconds(0);
if (Date.parse(targetDate ) >Date.parse(selectedDate)) {
alert('Within Date limits');
} else {
alert('not Within Date limits');
}
});
You can check this code online Here
Try this:
$('input').datepicker({
onSelect: function()
{
var date = $(this).datepicker('getDate');
var today = new Date();
if((new Date(today.getFullYear(), today.getMonth(), today.getDate()+30))>date)
{
//Do somthing here..
}
},
});
demo: http://jsfiddle.net/jeY7S/

Categories