jQuery datepicker - storing the date in a variable and printing it - javascript

Since I am new to jQuery I have a simple question to the pro-users.
How do I print out on the screen the date from the datepicker?
How to assign the date from datepicker to a variable so I can use it later for using that date's with mySQL database manipulation.
Any help appreciated.
$(function() {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
dateFormat: "yy/mm/dd",
showAnim: 'clip',
onClose: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1, maxDate: 0,
dateFormat: "yy/mm/dd",
showAnim: 'clip',
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});


$( "#from" ).datepicker("getDate"); //to get the date
var date;
date = $( "#from" ).datepicker("getDate"); //to store it in a variable.
The API is useful if you need to do more with your datepicker.
http://api.jqueryui.com/datepicker/#method-getDate


you can use onSelect method to assign selected value to some variable. You can post that value to your controller and save it to database.
$(function() {
var selectedDate = "";
$("#from").datepicker( {
onSelect: function(date) {
alert(date);
selectedDate = date;
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1
});
});


Use
getDate
it Returns the current date for the date picker or null if no date has been selected.
var fromDate= $( "#from" ).datepicker( "getDate" );
var toDate= $( "#to" ).datepicker( "getDate" );

Related

Display today's date in datepicker [duplicate]

This question already has answers here:
How do I pre-populate a jQuery Datepicker textbox with today's date?
(19 answers)
Closed 2 years ago.
Anyone here how do I display today's date in jquery datepicker? Tried these but it doesn't display today's date in datepicker.
$('#from').datepicker({
defaultDate: new Date(),
dateFormat: 'yy-mm-dd',
onSelect: function () {
table.draw();
},
changeMonth: true,
changeYear: true
});
$('#to').datepicker({
defaultDate: new Date(),
dateFormat: 'yy-mm-dd',
onSelect: function () {
table.draw();
},
changeMonth: true,
changeYear: true
});

You can use setDate like below.
$("#from").datepicker().datepicker("setDate", new Date());
$('#from').datepicker({
defaultDate: new Date(),
dateFormat: 'yy-mm-dd',
onSelect: function() {
//table.draw();
},
changeMonth: true,
changeYear: true
});
$("#from").datepicker().datepicker("setDate", new Date());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input type="text" id="from" />

You can set the default date via
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
see: https://api.jqueryui.com/datepicker/#method-setDate

jQuery UI Datepicker weird behavior shows weird icons

i have a weird behavior with date picker , and not reprduce for all computers,
the problem after select date from start date and then try to select from the end date , for some computers there additional arrow icons that appear in the date picker.
picture attached.
now the problem didn't reprduce for all , also it reprduce when get the minDate or maxDate related if you in start or end date
i've tested the issue on two computers that have a same os and browser versions but it reproduced on one of them
var from = $(".from", container).datepicker({
defaultDate: defaultDate,
dateFormat: "dd-M-yy",
changeMonth: true,
numberOfMonths: 3,
showOn: "both",
buttonImage: "/resources/images/forms/calendar-regular.png",
buttonText: "Start Date",
minDate : minDate,
maxDate: -1,
onClose: function (selectedDate) {
$(".to", container).datepicker("option", "minDate", selectedDate);
if (!$(".to", container).val()) {
$(".to", container).datepicker('setDate', selectedDate);
}
}
});
var to = $(".to", container).datepicker({
defaultDate: defaultDate,
dateFormat: "dd-M-yy",
changeMonth: true,
numberOfMonths: 3,
showOn: "both",
buttonImage: "/resources/images/forms/calendar-regular.png",
buttonText: "End Date",
minDate: minDate,
maxDate: 0,
onClose: function (selectedDate) {
$(".from", container).datepicker("option", "maxDate", selectedDate);
}
});
},
i'm using jquery-ui-1.9.1.js

Jquery UI Datepicker altField input not working

I have two inputs with datepicker, I need that first datepicker can initialize another, this works great with altField, but the datepicker from the second input does not work anymore. I make a example with this data:
https://jsfiddle.net/5njLoxd5/
<input type="text" id="lightBillingStartdate" /><br/>
<input type="text" id="lightBillingFinishDate" /><br/>
$( "#lightBillingStartdate" ).datepicker({
altField: "#lightBillingFinishDate",
altFormat: "dd/mm/yy",
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingFinishDate").datepicker("option","minDate", selected);
}
});
$( "#lightBillingFinishDate" ).datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingStartdate").datepicker("option","maxDate", selected);
}
});

I would use setDate method like so: https://jsfiddle.net/Twisty/5njLoxd5/2/
$("#lightBillingStartdate").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingFinishDate").datepicker("option", "minDate", selected);
$("#lightBillingFinishDate").datepicker("setDate", selected);
}
});
$("#lightBillingFinishDate").datepicker({
dateFormat: "dd/mm/yy",
maxDate: 0,
onSelect: function(selected) {
$("#lightBillingStartdate").datepicker("option", "maxDate", selected);
}
});

jquery datepicker set date to tomorrow's date

I have set the date for #arrival to todays date, but how can I set the #departure to tomorrow's date?
$(function() {
$( "#arrival" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function( selectedDate ) {
$( "#departure" ).datepicker( "option", "minDate", selectedDate);
}
});
$(function() {
$("#arrival").datepicker("setDate", "0");
});
$( "#departure" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$(function() {
$("#departure").datepicker("setDate", "1");
});
});
I have customized the datepicker and it works fine.

In the change function of the first datepicker, create a date object, set the date one day forward, and set the date of the second datepicker to that date. You can use minDate to make sure any date earlier than the set date can not be picked.
$(function () {
$("#arrival").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function (selectedDate) {
var myDate = $(this).datepicker('getDate');
myDate.setDate(myDate.getDate()+1);
$('#departure').datepicker('setDate', myDate);
}
});
$("#departure").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$("#arrival").datepicker("setDate", "0");
$("#departure").datepicker("setDate", "1");
});
FIDDLE

How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker

I have following datepicker script:
<script>
$(function(){
$("#to").datepicker();
$("#from").datepicker().bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
Now dateformat is MM/DD/YY .how to change the date format to YYYY-MM-DD?

Use the dateFormat option
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
Demo at http://jsfiddle.net/gaby/WArtA/

Try the following:
$('#to').datepicker({
dateFormat: 'yy-mm-dd'
});
You'd think it would be yyyy-mm-dd but oh well :P

I had the same issue and I have tried many answers but nothing worked.
I tried the following and it worked successfully :
<input type=text data-date-format='yy-mm-dd' >

$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
See:
http://jqueryui.com/demos/datepicker/
and
http://docs.jquery.com/UI/Datepicker/formatDate#utility-formatDate

If in jquery the dateformat option is not working then we can handle this situation in html page in input field of your date:
<input type="text" data-date-format='yyyy-mm-dd' id="selectdateadmin" class="form-control" required>
And in javascript below this page add your date picker code:
$('#selectdateadmin').focusin( function()
{
$("#selectdateadmin").datepicker();
});

You need something like this during the initialization of your datepicker:
$("#your_elements_id").datepicker({ dateFormat: 'yyyy-mm-dd' });

this also worked for me. Go to the bootstrap-datepicker.js.
replace this code :
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
with :
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};

I used this approach to perform the same operation in my app.
var varDate = $("#dateStart").val();
var DateinISO = $.datepicker.parseDate('mm/dd/yy', varDate);
var DateNewFormat = $.datepicker.formatDate( "yy-mm-dd", new Date( DateinISO ) );
$("#dateStartNewFormat").val(DateNewFormat);

Try this:
$.datepicker.parseDate("yy-mm-dd", minValue);

Use .formatDate( format, date, settings )
http://docs.jquery.com/UI/Datepicker/formatDate

just add dateFormat:'yy-mm-dd' to your .datepicker({}) settings, your .datepicker({}) can look something like this
$( "#datepicker" ).datepicker({
showButtonPanel: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
});
</script>

Just need to define yy-mm-dd here. dateFormat
Default is mm-dd-yy
Change mm-dd-yy to yy-mm-dd. Look example below
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
} );
Date: <input type="text" id="datepicker">

Thanks for all. I got my expected output
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script>
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
<div class="">
<p>From Date: <input type="text" id="from"></p>
<p>To Date: <input type="text" id="to"></p>
</div>

this worked for me.
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});

This work for me:
$('#data_compra').daterangepicker({
singleDatePicker: true,
locale: {
format: 'DD/MM/YYYY'
},
calender_style: "picker_4", },
function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});

This is what worked for me in every datePicker version, firstly converting date into internal datePicker date format, and then converting it back to desired one
var date = "2017-11-07";
date = $.datepicker.formatDate("dd.mm.yy", $.datepicker.parseDate('yy-mm-dd', date));
// 07.11.2017

For me in datetimepicker jquery plugin format:'d/m/Y' option is worked
$("#dobDate").datetimepicker({
lang:'en',
timepicker:false,
autoclose: true,
format:'d/m/Y',
onChangeDateTime:function( ct ){
$(".xdsoft_datetimepicker").hide();
}
});

$('#selectdateadmin').focusin( function()
{
$("#selectdateadmin").datepicker();
});

Categories