How to show next 7 days while using datetimepicker? - javascript

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>

Related

Month and year picker value changes when field is clicked into for second time

I have some code for a month and year date picker which i got from this site, i have edited the date format (mm/dd/yy) and selecting the values works great, however when i click away from the field and back to it the picker changes the date considerably.
For example, the following invokes the picker with todays date and you click 'Done' which puts todays date into the input field, if you click away and then click the input field again the date picker comes up with December last year, do it again and its december the previous year, etc...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd/mm/yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input autocomplete="off" name="startDate" id="startDate" class="date-picker" />
</body>
</html>
I'm new to JavaScript so i am struggling to find out exactly where the issue is.
Changed the following line;
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
To this to pick up the right month and it works;
month = $(this).datepicker('getDate').getMonth();

unable to set calendar start date in pikaday calendar

When i trigger the start date input box, I want to show the future or past month in calendar popup as a starting date in end date calendar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/pikaday.css">
<link rel="stylesheet" href="https://dbushell.com/Pikaday/css/site.css">
</head>
<body>
<input type="text" id="datepicker">
<br/>
<input type="text" id="datepicker2">
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"> </script>
<script src="https://dbushell.com/Pikaday/pikaday.js"> </script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function (date) {
picker2.setMinDate(date);
//picker2.???? to set the starting month of picker2 calendar
}
});
var picker2 = new Pikaday({
field: document.getElementById('datepicker2'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function () {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
</script>
</body>
</html>
please check the above example, based on start day selection i want to trigger the end date calendar starting month. please suggest.
JS bin link
As I understand your question, you want to set the selected month in picker to the picker2 object. use the API onOpen.
Example
var picker = new Pikaday({
field: document.getElementById('datepicker'),
format: 'D MMM YYYY',
minDate: new Date(),
onSelect: function(date) {
//console.log(this.getMoment().format('Do MMMM YYYY'));
console.log('test ' + date);
picker2.setMinDate(date);
//picker2.setStartRange(date)
}
});
var picker2 = new Pikaday({
field: document.getElementById('datepicker2'),
format: 'D MMM YYYY',
minDate: new Date(),
onOpen: function() {
picker2.gotoDate(picker.getDate())
},
onSelect: function() {
console.log(this.getMoment().format('Do MMMM YYYY'));
}
});
When I worked with Pikaday package in Vue.Js project I had to set default date to my date field in form. I tried many different versions of setting default date. But they didn't work for me. Finally I found the solution for my situation. The solution was to set prop like auto-default="autoDefault" here autoDefault is equels to true to Pikaday component like this...
<vue-pikaday v-model='date' auto-default="autoDefault" :options="pikadayOptions" />
data() {
return {
autoDefault : true,
pikadayOptions: {
format : 'YYYY/MM/DD',
minDate : moment().toDate(),
},
}
},

Birthday Date Auto generate year for 18 years old

My question is how to automatically set the date range for 18 years old, like for example today is 2015, so the date range must be 1935-1997, don't mind the 1935. Because the date range is for 18 years old and above, so when it come to 2016 the date range will automatically set to 1935-1998 then so on so forth as the year comes by.
Here's the current code with javascript on it
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997',
onClose: function( selectedDate ) {
$( "#to2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: '1935:1997' ,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="birthday">Birthday</label>
<input type="text" id="from2" name="from">
</body>
</html>
Well as you can see you in my javascript function the range function is hardcoded. :(
Get the range:
var startDate = "1935";
var endDate = new Date().getFullYear() - 18;
var interval = startDate + ":" + endDate;
Set the range to the DatePicker:
yearRange: interval
Fiddle

Capturing a value in a jQuery UI datepicker and alerting it back to the user

I need your help.
How can some functionality be added onto the existing code below such that it will make the options below possible:
If the date1 field is blank and the user selects a date, an alert message will popup and say "User has selected [date]"
If the date1 field is not blank and the user selects a new date, an alert message will popup and say "User has change [old_date_value] to [new_date_value]
I am entirely new to jQuery, so go easy while criticizing me =\
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
$("#date1").datepicker({
changeMonth: true,
changeYear: true
});
}
</script>
</head>
<body>
<input type="text" id="date1">
</body>
</html>
Change the datepicker part of code to this:
var prevDate = null;
$("#date1").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(date) {
if (prevDate === null) {
alert('User has selected ' + date);
} else {
alert('User has change ' + prevDate + ' to ' + date);
}
prevDate = date;
}
});
You can find a suitable place to put the prevDate.
Also jQuery-datepicker would help you a lot.
You'll want to use the onSelect option which is part of the datepicker. The onSelect function has two parameters, the dateText, which is the date string, and the datepicker instance. You can get the last value from the datepicker instance, as lastVal.
Using the above information, your javascript would look like this:
$("#date1").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText,inst) {
if(dateText !== inst.lastVal){
if (inst.lastVal == null) {
alert("User has selected: "+dateText);
} else {
alert("User has change "+inst.lastVal+" to "+dateText)
}
}
}
});
With this solution, you do not need to manage the previous date value in a variable, which is nice.
I've replicated your setup in jsFiddle so you can play around with this while you get used to jQuery.

jquery ui date picker limit to Sundays

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>

Categories