set Default date in datepicker with Tuesdays & Wednesdays only? - javascript

I have a datepicker that has all past days disabled, and all days except Tuesdays and Wednesdays disabled.
I'd like the default day to be the frist enabled day of the week. If it's tuesday, then it should display tuesday, If wednesday, then wednesday. Any other day it should display next tuesday in the input field.
This is the code I'm using for the datepicker.
<script type="text/javascript">
$(document).ready(function(){
$( ".datepicker" ).datepicker({
minDate:'0',
changeMonth:true,
changeYear:true,
beforeShowDay:
function(dt)
{
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
}});
});
</script>
And the input that I'm using the selector on:
<form method="POST">
<div style='margin:0 auto; text-align:center;'>
<label>Appointment Date: </label>
<input type="hidden" name="action" value="list_appointments" />
<input type="text" id="datepicker" name="date" class="datepicker" />
<!--value=--><?php #echo date_format(new DateTime("now",new DateTimeZone('America/Chicago')),'m/d/Y');?>
<input type="submit" value="Refresh List" name="Update" />
<br />
</div>
</form>

You can use momentjs to make getting the next day of the week a little easier and then just have a if-else statement to get the correct day of the week:
function setDate() {
var today = moment().isoWeekday(); //or just = new Date().getDay();
if (today <= 2) {
return moment().isoWeekday(2);
} else if (today === 3) {
return moment().isoWeekday(3);
} else {
return moment().add(1, 'weeks').isoWeekday(2);
}
}
Call the setDate() function then and set that return value as the date in the datepicker.
$('.datepicker').datepicker("setDate", new Date(setDate()));
Here's a working example: https://jsfiddle.net/jutcw0ve/

Related

datetimepicker input automatically filled with current date and disable days before current date

i have a datetimepicker input, i want the input automatically filled with current date, but user still can change the date in the input.
i also want to disable the days before current date.
i've tried to use var today = new Date(); $('#datetimepicker1').value = today;, but it didn't work. When i alert the value, it still shows that the date is undefined.
i've also tried to use
var today = new Date();
$('#datetimepicker1').datepicker({
format: 'dd/mm/yyyy',
defaultDate: today
});
but it only show table of dates like this
the desired output is datetimepicker automatically filled with current date and the days before current date is disabled.
also, the datetimepicker input automatically updated with the selected date's value. filled with selected date. the date table shows when the calendar icon clicked.
my html code:
<div class='input-group date' id='datetimepicker1'>
<input type="date" class="btn isi datetime px-3 py-1" id="datetime" name="date" placeholder="3/22/2022">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="date()"></span>
</span>
</div>
setDate with the current date in will generate a preselected date that is today, minDate 0 disables previous dates. min:current_date also works.
$('#datepicker').datepicker({
"setDate": new Date(),
"autoclose": true,
"minDate": 0,
});
$(function(){
$("#tgl").datepicker({
autoclose: true,
todayHighlight: true,
startDate: "dateToday",
format:'yyyy-mm-dd'
});
}):
'''
you can add atribute starDate
try this
"minDate": 0, to disable the days before current date and "setDate": new Date() automatically filled with current date.
$("#datepicker").datepicker(
{
"minDate": 0,
onSelect: function() {
var dateObject = $(this).datepicker('getDate');
console.log(dateObject);
}
});
$("#datepicker").datepicker('setDate', new Date());
var obj = $("#datepicker").datepicker('getDate');
console.log(obj);
<!-- load jQuery and jQuery UI -->
<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>
<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

How to show only 3 months in datepicker as dropdown from current date and when the current month is completed then we have show the upcoming 3 months

How to show only 3 months in date picker as a dropdown from the current date and when the c
$(function() {
$("#date").datepicker({
hideIfNoPrevNext: true,
minDate: '0M',
maxDate: '+90D'
});
});
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-2">
Select Date</label>
<input type="text" id="date" />
</div>
</div>
</div>
Current month is completed then we have show the upcoming 3 months.
What Datepicker library/plugin are you using? Its really hard for us to give you a solution if we don't know what you're using.
In anycase, you can disable the dates on datepicker based on today's date. This is how we can do it using Moment.js
const disabledDate = current => {
return (
current &&
current >=
moment()
.endOf('day')
.subtract(number, days/months/years) //if you want to get past days
.add(number, days/months/years) //if you want to add days
);
};

Bootstrap date time picker not allowing user to type time

I have a scenario where I use Bootstrap Datetimepicker to select time, but when I manually type the time, even in correct format, it changes to 12:00 AM on date picker close
Here is my datetimepicker:
$('#ShiftStart').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
$('#ShiftEnd').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
Even if I bind an onfocusout event to set the value of the datetimepicker it doesn't change when the picker closed.
$("#ShiftStart").focusout(function (e) {
//here it is defaulted again to 12:00 AM
var time = $('#' + e.target.id).val();
$('#' + e.target.id).attr('data-time', actualDate + ' ' + time);
$('#' + e.target.id).attr('value', actualDate + ' ' + time);
$('#' + e.target.id).val(time)
});
Any work around on this.
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017"),
stepping: 15
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" value="12/27/2017 12:00 AM" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
The datetimepicker defaults back to 12:00 AM even if you select the value from the picker (not only manually type), I think this is a bug of the the lastest versions of the component.
Anyway, there are a couple of things to fix in your code. As the date([newDate]) states :
Takes string, Date, moment, null parameter and sets the components model current moment to it. [...]
Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict components configuration.
So minDate, maxDate and defaultDate are strings parsed using format option (hh:mm A in your case) and this will produce wrong values, use moment(String, String) instead (e.g. defaultDate: moment("12/27/2017", 'MM/DD/YYYY')).
Even the value property in the HTML is parsed using format, 12/27/2017 12:00 AM does not match hh:mm A so I've removed it in my snippet.
Here a working example using version 4.17.37 of the datetimepicker:
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: moment(actualDate, 'MM/DD/YYYY'),
maxDate: moment(maxDate, 'MM/DD/YYYY'),
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017", 'MM/DD/YYYY'),
stepping: 15
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<div class="row">
<div class='col-sm-6'>
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
</div>
</div>
Side thoughts:
Since you are using hh:mm A format, you can probably just manage time and get rid of minDate and maxDate (in your example you are limiting to a single given day)
If you want to do something when the components hides use dp.hide event.
I think this is happening because minDate is reseting the field value to the current date at midnight (probably the default time), and similarly maxdate probably also sets it to midnight by default.
Remove minDate: actualDate and maxDate: maxDate from the initialisation:
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
<script>
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
$('#ShiftStart').datetimepicker({
useCurrent: false,
format: 'hh:mm A',
});
</script>
In reply to your comment, you can pass in the maxDate parameter like this:
maxDate: new Date('2017', '12', '27', '03', '30', '00', '00')
Which i guess you will need to build from the maxDate string. Note that to get this working I had to remove the defaultDate parameter from the snippet in your question.

JS alert if inputted date 2 <= date 1

I have a form where a visitor can make a lodging reservation with an arrival date and departure date. If they click on an input field a calendar pops up for them to select a date. How can I add a popup JS alert if the departure date is <= the arrival date? My code is as follows:
<head>
...
<script type="text/javascript" src="js/CalendarPopup.js"></script>
<script type="text/javascript">document.write(getCalendarStyles());</script>
...
</head
<script type="text/javascript" id="jsArrive">
var now = new Date();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var calArrive = new CalendarPopup("divArrive");
</script>
<b>Arrive:</b>
<input type="text" name="dateArrive" value="" size="15" onClick="calArrive.select(document.forms[0].dateArrive,'dateArrive','d/M/yyyy'); return false;" title="calArrive.select(document.forms[0].dateArrive,'dateArrive','d/M/yyyy'); return false;" id="dateArrive" />
</p>
<div id="divArrive" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>
<script type="text/javascript" id="jsDepart">
var now = new Date();
var yesterday = new Date(now);
yesterday.setDate(now.getDate() - 1);
var calDepart = new CalendarPopup("divDepart");
</script>
<b>Depart:</b>
<input type="text" name="dateDepart" value="" size="15" onClick="calDepart.select(document.forms[0].dateDepart,'dateDepart','d/M/yyyy'); return false;" title="calDepart.select(document.forms[0].dateDepart,'dateDepart','d/M/yyyy'); return false;" id="dateDepart" />
<input type="submit" value="Go" name="submit" />
</p>
<div id="divDepart" style="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></div>
It's as simple as comparing the two dates, like so:
if (departureDate <= arrivalDate) {
alert ("You must make sure your departure is before your arrival!);
}
I suggest you run the above if statement when the user has entered there arrival date. So you'd use an onChange event on each of the inputs incase they go back and change there departure date!

How to change date format of datepicker value in javascript

I gone to many of the questions already asked in stackoverflow related to my problem, but i still i can't find any solution. I am trying to get the value from datpicker in my javascript function, but not able to change its format. By default its showing in mm/dd/yy format and i want in yyyy-mm-dd format. Can anyone please help.
Below is my html code :
<html xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<script>
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
$.datepicker.formatDate( 'yy-mm-dd' ,date );
alert(date); }
</script>
</h:head>
<body>
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
<span class="input-group-addon">To</span>
<input type="text" id="todate" class="form-control dpd2" name="to" placeholder="Select To Date" ></input>
<input type="button" onclick="getdate()" value="Change Date"></input>
</body>
</html>
Thanks in advance.
<script>
$(document).ready(function(){
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
alert(date);
}
</script>
The format of dates can be a combination of any of the following characters:
d – day of month (single digit where applicable)
dd – day of month (two digits)
m – month of year (single digit where applicable)
mm – month of year (two digits)
y – year (two digits)
yy – year (four digits)
D – short day name
DD – full day name
M – short month name
MM – long month name
'...' – any literal text string
# - UNIX timestamp (milliseconds since 01/01/1970)
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
date = $.datepicker.formatDate( 'yy-mm-dd', date );
alert(date);
}
You need to assign the result of the formatDate call to your date object. Then you can alert it.
HTML
<input type="text" id="fromdate" class="datepicker form-control dpd1" name="from" placeholder="Select From Date"></input> <span class="input-group-addon">To</span>
<input type="text" id="todate" class="datepicker form-control dpd2" name="to" placeholder="Select To Date"></input>
<input type="button" class="getdate" value="Change Date"></input>
JavaScript
//Define fields with class name 'datepicker' as jQueryUI datepicker
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd' //Setting dateformat for the datepicker
});
//Binding 'onclick' function for the button with class name 'getdate'
$('.getdate').on('click', function () {
var date = $('#fromdate').val();
alert(date);
});
JSFiddle
Its works for me
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
$('#fromdate').datepicker({
format: 'yyyy/mm/dd'
});

Categories

Resources