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
}
});
});
Related
on the on _change event of from_date i want to fetch the value of input days and from_date to add the value of days and from_date and set it to to_date
for example input_days=5 and from_date=10/02/2020 it should add and automatically display 15/02/2020 in to_date....
here is the code which adds from_date and to_date and displays total_date but... what should i change in this logic?
$("#fromdate,#todate").datepicker({
minDate: 0,
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'yy/mm/dd',
});
$("#fromdate").datepicker({dateFormat: 'yy/mm/dd'});
$("#todate").datepicker({dateFormat: 'yy/mm/dd'});
$('#enddate').change(function () {
var start = $('#fromdate').datepicker('getDate');
var end = $('#todate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#total_days').val(days);
} else {
alert("cannot select same or previous date!");
$('#fromdate').val("");
$('#total_days').val("");
}
});
Please refer below code. Also please find fiddle link in comment. If input is blank I am adding 5 days by default.
<label class="required">Days</label> <input type="text" id="days"><br/><br/><br/>
<label class="required">from</label>
<input type="text" id="fromDate" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"><br/><br/><br/>
<label> To </label>
<input type="text" id="toDate" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy" >
$(function() {
$( ".from" ).datepicker({
onSelect: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
var toDate = $('.from').datepicker('getDate');
var days = $("#days").val() != "" ? parseInt($("#days").val()) : 5;
toDate.setDate(toDate.getDate() + days );
$('.to').datepicker('setDate', toDate);
}
});
$( ".to" ).datepicker({
onSelect: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
I Hope this Helps you ..
$(document).ready(function() {
jQuery("#from").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
jQuery("#to").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Try this
$(document).ready(function () {
$('#txtFromDate').datepicker({
format: 'dd/mm/yyyy',
startDate: 'd',
minDate: new Date('today'),
language: locale,
autoclose: true,
todayHighlight: true
});
$('#txtToDate').datepicker({
format: 'dd/mm/yyyy',
startDate: '+2d',/change value for to 5 for 5 days
minDate: '#txtToDate',
viewMode: 'years',
language: locale,
autoclose: true,
});
var val = $("#fromdate").val(); // your input date ID, like we have input: 5
var myDate = new Date($.datepicker.formatDate('yy/mm/dd', new Date($('#fromdate').datepicker('getDate'))));
var d = myDate.getDate()+parseInt(val, 10);
var m = myDate.getMonth()+1;
var y = myDate.getFullYear();
$("#todate").val(new Date(yy+'/'+mm+'/'+dd));
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'm trying to set a date for date-picker on selecting date from first date-picker, and want to show an alert message if user selected another date. I'm not able to do that.
Here is my code:
$('#ELEdatepicker1').datepicker({
autoclose: true,
endDate: new Date(),
todayHighlight: true,
}).change(function(){
getELEdifference($(this),$('#ELEdatepicker2'));
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
startDate: new Date(),
todayHighlight: true,
}).change(function(){
getELEdifference($('#ELEdatepicker1'),$(this));
alert('Are you sure ?');
});
function getELEdifference($this1,$this2)
{
if($this1.datepicker("getDate") != null && $this2.datepicker("getDate") != null)
{
var ELEcertDiff= $this1.datepicker("getDate") - $this2.datepicker("getDate");
var result = ELEcertDiff / (1000 * 60 * 60 * 24) * -1;
//$("#ELEcertDiff").text(result);
document.getElementById("ELEcertDiff").value = result;
}
}
How can I show a date (suppose one year latter) in second date-picker ? And if user select before or after one year, it will show alert message on date selection.
UPDATE:
Is it possible to pass a parameter to set a difference for second date picker?
For Ex.
In above picture If I select a date from Issue Date-picker and from duration drop-down list box select a value (Ex. 3), then in Expiry Date-picker shows date after 3 years from selected date.
I've referred some questions:
Jquery UI : date picker. How to set date in date picker by $_GET
Define start date of second date picker from first date picker
I'm new to JavaScript and JQuery. Any kind of help is welcome. Thanks in advance.
plz add and check this code:
$('#ELEdatepicker1').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
var d = new Date(selectedDate);
var day = d.getDate();
var month = d.getMonth();
var year = d.getFullYear() + 1;
var newdate = month + "-" + day + "-" + year;
$( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
$("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
Check this answer
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<input type="text" id="ELEdatepicker1">
<input type="text" id="ELEdatepicker2">
<!-- <input type="text" id="ELEcertDiff"> -->
<script>
$('#ELEdatepicker1').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
var d = new Date(selectedDate);
var year = d.getFullYear() + 1;
var month = d.getMonth();
var day = d.getDate();
var newdate = year + "-" + month + "-" + day;
$( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
$("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
</script>
<!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('-');
}
i want to get month/year picker slider on right side of my website.i got a code from one site.it is working,but after i download its not working.i added jquery.js folder.is it right.please help..my code is
<script src="jquery.js"></script>
<script src="jquery.min.js.">
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
</script>
<style type="text/css">
ui-datepicker-calendar {
display: none;
}
</style>
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />
please help.whicj jquery i have to include?jquery.js or jquery.min.js?
You have to include correct files:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<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>
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />
JS:
$(function () {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
}).focus(function () {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function () {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/797/