<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
var d = "02-12-2016";
$(function () {
$("#datepicker").datepicker({
minDate: d,
dateFormat: 'mm-dd-yy';
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"> <input type="text" id="final"></p>
</body>
</html>
Hello friends i am using this var d="02-12-2016" and i want to show a next date in a text field which is in front of date picker and that text box will have a date 02-15-2016
I am working on it and i am not getting any way how it will be done.
according to api doc : jquery-ui-1.11 it work either.
minDate: d,
dateFormat: 'mm-dd-yy',
defaultDate: d,
altField: '#final'
It's better to use ISO format for date operations:
var d = "2016-02-12";
$(function() {
$("#datepicker").datepicker({
minDate: d,
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
$("#final").val(secondDate(date));
}
});
});
function secondDate(date) {
var d = new Date(date);
d.setDate(d.getDate() + 3);
var month = '' + (d.getMonth() + 1);
var day = '' + d.getDate();
var year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
Related
I'm trying to disabled a previous dates from current date it's working fine. but when it try to disabled "to Date date picker" after 90Days but it's not working any one can you please help on it. actually here i have a two date pickers like FROM Date and TO Date but i am not able to disabled dates after 90days here I want to allow the from date only current date To date enabled only next 90 days from current date.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
</head>
<body>
<label for="date">From:</label>
<input id="date" data-provide="datepicker">
<label for="todate">To:</label>
<input id="todate" data-provide="datepicker">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
<script>
var date = new Date();
date.setDate(date.getDate());
$('#date').datepicker({
startDate: date
});
var todates = new Date();
todates.setDate(dates.getDate()+90D);
$('#todate').datepicker({
endtDate: todates
});
</script>
</body>
</html>
Checkout snippet with output as you expected. In datepicker you need to add some specific formatted date. And using that we disabled un wanted days as per requirement.
For adding days in javascript date :
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
Here 90 are actual days you can modify it as per usage.
var cur_date = new Date()
var todaydate = cur_date.toISOString().split('T')[0]
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [day, month, year].join('-');
}
todaydate = formatDate(todaydate);
$('#fromdate').datepicker({
beforeShowDay: function(date){
if (todaydate == formatDate(date))
{
return { enabled: true }
}
else
{
return { enabled: false }
}
},
startDate: cur_date,
endDate: cur_date,
});
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
$('#todate').datepicker({
startDate: cur_date,
endDate: todates
});
.disabled {
background: #ccc;
pointer-events: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<label for="fromdate">From:</label>
<input id="fromdate" data-provide="datepicker">
<label for="todate">To:</label>
<input id="todate" data-provide="datepicker">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
If you want to add more functional things like this you can try out more here
so I have written some code that will allow someone to enter their order date and will return expected printing and delivery dates.
Only issue is its splitting out MM/DD/YYYY. Any help to get this working is much appreciated.
<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>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script>
function myfunction() {
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getFullYear() + '-' + ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) + '-' + future.getDate();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future.getFullYear() + '-' + ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) + '-' + future2.getDate();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
I'm edited in date format on your code: var finalDate and var finalDate2. Because in the code make a format date in your jquery.
In code below will changed format date to DD/MM/YYYY
So I changed to this code:
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
Then will get output like this
<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>
$( function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
<script>
function myfunction(){
var future = new Date(document.getElementById("datepicker").value); // get today date
future.setDate(future.getDate() + 7); // add 7 days
var finalDate = future.getDate() +'-'+ ((future.getMonth() + 1) < 10 ? '0' : '') + (future.getMonth() + 1) +'-'+future.getFullYear();
var future2 = new Date(document.getElementById("datepicker").value);
future2.setDate(future2.getDate() + 10); // add 7 days
var finalDate2 = future2.getDate() +'-'+ ((future2.getMonth() + 1) < 10 ? '0' : '') + (future2.getMonth() + 1) +'-'+ future.getFullYear();
alert('Your order will be printed on ' + finalDate + '\nYou should recieve your order ' + finalDate2);
}
</script>
</head>
<body>
<form onSubmit="myfunction()">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" lable="Submit">
<p id="demo"></p>
</form>
</body>
</html>
UPDATE
For Changed Input Format to DD/MM/YYYY
Changed
$( "#datepicker" ).datepicker();
To
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy'
});
This is my code:
jQuery(document).ready(function() {
jQuery(function() {
jQuery('#input_1_24').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function (date) {
var date2 = jQuery('#input_1_25').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
jQuery('#input_1_25').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
jQuery('#input_1_25').datepicker('option', 'minDate', date2);
}
})
jQuery('#input_1_25').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onClose: function () {
var dt1 = jQuery('#input_1_24').datepicker('getDate');
console.log(dt1);
var dt2 = jQuery('#input_1_25').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = jQuery('#input_1_25').datepicker('option', 'minDate');
jQuery('#input_1_25').datepicker('setDate', minDate);
}
}
});
});
});
When i run my page with 2 input type text with id= "input_1_24" and id="input_1_25" my dev console get this error:
I have no idea what it could be... can u help me?
I decided to change my code like that:
jQuery(function() {
jQuery('#input_1_24').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function (date) {
var date1 = jQuery('#input_1_24').datepicker('getDate');
console.log(date1);
date1.setDate(date1.getDate() + 1);
jQuery('#input_1_25').datepicker('setDate', date1);
jQuery('#input_1_25').datepicker('option', 'minDate', date1);
}
})
jQuery('#input_1_25').datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onClose: function () {
var dt1 = jQuery('#input_1_24').datepicker('getDate');
console.log(dt1);
var dt2 = jQuery('#input_1_25').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = jQuery('#input_1_25').datepicker('option', 'minDate');
jQuery('#input_1_25').datepicker('setDate', minDate);
}
}
});
});
});
in this way it works correctly!
You can do below way, see example.
<!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>
$( function() {
$( "#input_1_24" ).datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#input_1_24').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#input_1_25').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#input_1_25').datepicker('option', 'minDate', date2);
}
}
);
$( "#input_1_25" ).datepicker({
dateFormat: "dd/mm/yy",
minDate: 0,
onClose: function () {
var dt1 = $('#input_1_24').datepicker('getDate');
console.log(dt1);
var dt2 = $('#input_1_25').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#input_1_25').datepicker('option', 'minDate');
$('#input_1_25').datepicker('setDate', minDate);
}
}
}
);
} );
</script>
</head>
<body>
<p>Date1: <input type="text" id="input_1_24"></p>
<p>Date2: <input type="text" id="input_1_25"></p>
</body>
</html>
var date2 = jQuery('#input_1_25').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
jQuery('#input_1_25').datepicker('setDate', date2);
In this code the "date2" will contains string, and you can't call setDate on it.
Try this:
var date2 = jQuery('#input_1_25').datepicker();
jQuery('#input_1_25').datepicker('setDate', date2.datepicker("getDate") + 1));
I want to display the day name when date is selected from the datepicker dynamically. When the user selects the particular date from datepicker i want to display which day it is dynamically.How can I fetch the day from the datepicker. Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7-dayNo);
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd', firstDay: 1,minDate: mindate
});
});
</script>
<input type="text" id="datepicker">
Use onSelect with custom define day [array] you want to display.
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7 - dayNo);
var d = ['sun', 'mon', 'tue', 'wed', 'th', 'fr', 'sat' ];
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
firstDay: 1,
minDate: mindate,
onSelect: function(dateText, inst) {
var today = new Date(dateText);
console.log(d[today.getDay()]);
$('#datepicker').val(dateText + ' ' +d[today.getDay()]);//If you only want day remove dateText concat part
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="datepicker">
you can try this. I hope it will help you:
<input id="datepicker" type="text">
<p class="name"></p>
$( document ).ready(function() {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(dateText, inst) {
var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var dateText = $.datepicker.formatDate("DD", date, inst.settings);
$("p.name").html( "Day Name= " + dateText ); // Just the day of week
}
});
});
How to replace Jul, Jan, Feb, Mar, Apr, May, Jun, Aug, Sep, Oct, Nov, Dec with word: "Period 1, Period 2, Period 3, Period 4".
I think 'll make detail:
- Make a array list
- Add to Dropdownlist
- Add to UI.
but, i do'nt know how to make this
<!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) {
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 name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Thanks so much.
This should do the trick (after initialization):
var monthNames = ['Period1','Period2','Period3','Period4','Period5','Period6',
'Period7','Period8','Period9','Period10','Period11','Period12'];
var monthNamesShort = ['Per1', 'Per2', 'Per3', 'Per4', 'Per5', 'Per6',
'Per7', 'Per8', 'Per9', 'Per10', 'Per11', 'Per12'];
$(".date-picker").datepicker( "option", "monthNames", monthNames);
$(".date-picker").datepicker( "option", "monthNamesShort", monthNamesShort);
Note that you should set monthNamesShort, too. These properties can also be set during initialization.
$(".date-picker").datepicker({
...,
monthNames: ['Period1', ...],
monthNamesShort:['Per1', ...],
...
});