jquery open calendar to specific month - javascript

On click of textbox, a calendar opens with current month. I want to open the calendar to specific date.Currently, the calendar opens opens to current month view. Can some one please help me with this? Thanks!
Select Date: <input type="text" id="datepicker"/>
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
onSelect: function (date, inst) {
//MyLogic
}
});

You can use the defaultDate option to open to a specific date. Let's assume you want it to open to July 1st, 2014:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date(2014, 6, 1)
onSelect: function (date, inst) {
//MyLogic
}
});
The format for date is year/month/day. Note: for the month, it is month - 1. So January (1st month) would be 0 and February (2nd month) would be 1.
Alternatively, you can also specify the same date like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('1 July 2014')
onSelect: function (date, inst) {
//MyLogic
}
});
You can also define the defaultDate like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('7/1/2014')
onSelect: function (date, inst) {
//MyLogic
}
});

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({
defaultDate: '-2m'
});
});
});
</script>
</body>
</html>

Related

How to disable past days and weekends in Jquery

Does anybody know why this Script not working? I am trying to disable weekends and previous dates? I have tried searching all over the web but I am struggling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="date" id="date" class="form-control">
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
minDate : 'now'
});
});
</script>
DatePicker
According to documentation, you simply need to disable the days of the week by utilizing numbers 0-6. Sunday starting at 0 and Saturday ending at 6, and obviously, every other day of the week assigned accordingly. Also, the format of daysOfWeekDisabled is a comma delimited string which you will see below. In order to only show today's date and on, simply set a minDate of today's date. All of the above is implemented in code below:
let dateToday = new Date();
$('#date').datepicker({
daysOfWeekDisabled: '0, 6',
minDate: dateToday
})
In your case, the problem is you have input type as date but if you change that to test it will work.
Working Example:
<html xmlns="http://www.w3.org/1999/xhtml">
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<head>
<script type="text/javascript">
$(function () {
$("#date").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate : 'now'
});
});
</script>
</head>
<body>
<input type="text" id="date" />
</body>
</html>

Hiding jquery datepicker when clicking on button

I have a jquery datepicker and the problem I'm having is I want to be able to toggle the datepicker to open and close when the button/textfield is clicked, but right now I have to either select a day or click outside of the calendar (somewhere on the screen) to close the datepicker. I want to open and close it by pressing and pressing again (toggle) on the same button to open and close it.
FYI - I know there's a hide method for datepicker but not sure if that will work here
Here is link to the Fiddle and some code below
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div { font-size: 12px; }
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>
Try:
$('#date1').click(function(e) {
if ($(this).data('count')) { // toggle
if ($('#ui-datepicker-div').is(':visible')){
$('#date1').datepicker('hide');
} else {
$('#date1').datepicker('show');
}
} else { // first click
$(this).data('count', 1);
}
});
$('#date1').blur(function() {
$(this).data('count', '')
});
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div {
font-size: 12px;
position: relative !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

Date picker modal scrolls down the page

I am using Material Design and using its date picker. When date picker pops out, the page scrolls down. How can I load the date picker modal without the page scrolling down?
<input id="client-edit-birth-date" type="text" class="datepicker validate">
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
container: 'body'
});
I had the same problem and resolved it by setting container to html.
...
container: 'html',
...
<!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 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: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
demo http://jsfiddle.net/DBpJe/5106/
I do it by utilizing beforeShow function of datepicker:
$('.datepicker').datepicker({
...
beforeShow: function(input, inst)
{
inst.dpDiv.css({position: 'absolute'});
}
...
});
There you can set the position of datepicker's dialog. You have to experiment to find out what kind of css parameters would more suitable in you case/page layout.

disabling dates in the past bootstrap

Please give me the easiest way to disabling dates in the past bootstrap
<script type="text/javascript">
$(function(){
$('.datepicker').datepicker();
});
</script>
Date: <input type="text" class="datepicker"></input>
I have included bootstrap datepicker.css, bootstrap-datepicker.js, bootstrap.min.css and jquery-1.11.1.js files
Use the startDate option.
<script type="text/javascript">
$(function(){
$('.datepicker').datepicker({
startDate: new Date(),
});
});
</script>
Or you can simply use '+0d'
<script type="text/javascript">
$(function(){
$('.datepicker').datepicker({
startDate: '+0d',
});
});
</script>
This will start the calender from +0 days(i.e today)

change the second datepickers minDate when selecting date from another datapicker

I' m using jquery ui datepicker.
I have two datepicker on the page, from and to datepickers
when i select a date in one datepicker i update the max and min date to the second datepicker.
my problem is that just before it close(hide) the seleted datepicker,
it show the second datepicker instead of the first one (just when i update the min date of the second datepicker) and then close it.
why does it show the second datepicker when i update the min date from the other datepicker?
how can i hide the datepicker before i update the second datepicker?
<!doctype html>
<html >
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input name="fromDateCalendar" type="text" value="10/12/2013" id="fromDateCalendar" style="width:100px;" />
<input name="toDateCalendar" type="text" value="09/01/2014" id="toDateCalendar" style="width:100px;" />
<script>
$(function () {
$('#fromDateCalendar').datepicker({
onSelect: function (date) {change1(date);}});
$("#toDateCalendar").datepicker({
onSelect: function (date) {change2(date);}, maxDate: '0' });
});
function change1(date) {
$('#toDateCalendar').datepicker('option', 'minDate', date);}
function change2(date) {
$('#fromDateCalendar').datepicker('option', 'maxDate', date);}
</script>
</body>
</html>
to solve the problem of showing the #2 datepicker for a moment(in the place of the #1 datepicker) when i change the max date,
i call the ....datepicker('option', 'minDate', start) after the #1 datepicker close with setTimeout
onSelect: function (date) {
setTimeout(function () {
....datepicker('option', 'minDate', start)
}, 300)
}....

Categories