I'm using Materialize to create an app with two datepickers:
$(document).ready(function(){
$('#outDate').datepicker({
format: 'dd-mm-yyyy'
});
});
$(document).ready(function(){
$('#returnDate').datepicker({
format: 'dd-mm-yyyy',
});
});
What i need to do is pass the selected date from datepicker 1 ('#outDate') and set into datepicker 2 ('#returnDate'). How can i do that. I've read the doc of Materialize, but i'm not getting any success.
Someone can help me, please?
Also i'm using Javascript and AngulrJs.
Thanx in advance.
you can do like this
$(document).ready(function(){
$('#outDate').datepicker({
format: 'dd-mm-yyyy',
onSelect: function(date) {
var date = $("#outDate").datepicker('getDate').getDate(); // get selected date of #outDate
$('#returnDate').datepicker('defaultDate ', new Date(date)); // set #outDate date to #returnDate
}
});
});
$(document).ready(function(){
$('#returnDate').datepicker({
format: 'dd-mm-yyyy',
});
});
Added working fiddle here
Related
I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date ..
Here is the code for datepciker
<div id="datepicker"></div>
and here i am trying to get the selected code..
$(document).ready(function () {
$("#datepicker").datepicker({
onSelect: function (dateText, inst) {
var date = $(this).val();
alert(date);
}
});
});
But, I am not able to get the date ..Please help me ..Thanks..
This should do the trick
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
It's basic but here is a jsfiddle with it alerting the selected date when selected
update to change the date format
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
jsfiddle
3rd update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).val();
alert(selected);
}
});
});
I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.
4th Update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).datepicker("getDate");
alert(selected);
}
});
});
The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.
Depending on your needs select which one is appropriate.
(Added 4th method and explanation of the difference after #TimothyC.Quinn commented that the getDate being the correct method)
Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
$("#datepicker").datepicker('setDate', '10-03-2020');
// pass string of your format or Date() object
$("#datepicker").datepicker('getDate');
// returns Date() object
$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
// pass string of your format or Date() object
Try
$("#datepicker").datepicker({
onSelect:function(selectedDate)
{
alert(selectedDate);
}
});
OR
$("#datepicker").datepicker({
onSelect:function (dateText, inst)
{
alert(inst);
}
});
try this
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
})
you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');
You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.
HTML:
<div id='QA'></div>
<div id='datepicker'></div>
JS:
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
clearBtn: true,
todayHighlight: false,
multidate: true
}) .on('changeDate', function(e){
$('#QA').html(JSON.stringify(e));
});
});
/*
{
"type":"changeDate",
"date":"2015-08-08T07:00:00.000Z",
"dates":[
"2015-08-08T07:00:00.000Z"
],
"timeStamp":1438803681861,
"jQuery21409071635671425611":true,
"isTrigger":3,
"namespace":"",
"namespace_re":null,
"target":{
},
"delegateTarget":{
},
"currentTarget":{
},
"handleObj":{
"type":"changeDate",
"origType":"changeDate",
"guid":52,
"namespace":""
}
}
*/
</script>
The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)
$("#datepicker").datepicker('getDate').toISOString()
so it will get the date in ISO stander.
All code is for Bootstrap Datepicker
var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)
or
var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30
if(calendar){
alert(calendar);
} else {
alert('null');
}
If you need it in specific format like '2021/09/28':
$.datepicker.formatDate('yy/mm/dd',
$('.date-picker-2').datepicker("getDate")
);
Here is how to get Date object from datepicker in the onSelect event:
$("#datepickerid").datepicker({
onSelect: function (dateText, inst) {
var date_obj = $(this).datepicker('getDate');
}
});
I find it strange that the onSelect caller would not return the date object by default.
I have a JQuery Date Picker link to a HTML Form textbox. It enters the date in mm/dd/yyyy format. What I need is to convert this format to dd-mm-yyyy.
Can I do when the date just inserted or after inserted? If one or both can how can I do that?
I already tried the belo code. But it didn't work.
//Date Picker
$(function() {
$("#to_date").datepicker({ maxDate: new Date() },);
$("#from_date").datepicker({ maxDate: new Date() });
$("div.ui-datepicker").css( { "font-size": "10px" } );
$("#to_date").datepicker({ dateformat: "dd-mm-yyyy" }).val();
$("#from_date".datepicker({ dateformat: "dd-mm-yyyy" }).val();
});
The above also contains the statements to display the last day to select as today.
So what is with my code?
Thanks & regards,
Chiranthaka
Fiddle
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
See the fiddle.. i think this would help you
The way you are using format, it won't convert your date, instead it will just set a format to be used on that control.
So, you'l have to set format using / as you want it in mm/dd/yyyy
And, using javascript you have to convert it to dd-mm-yyyy
So,
$(function() {
$("#to_date").datepicker({ dateformat: "mm/dd/yyyy" });
});
Now while accessing it, you can convert it as following code:
var dt=$("#to_date").val();
var arr=dt.split("/");
var converted= arr[1]+"-"+arr[0]+"-"+arr[2];
console.log(converted);
dateformat is probably case sensitive and should be dateFormat http://api.jqueryui.com/datepicker/#option-dateFormat
$(function() {
$("#to_date, #from_date").datepicker({
maxDate: new Date(),
dateFormat: "dd-mm-yyyy"
});
$("div.ui-datepicker").css( { "font-size": "10px" } );
});
Please use the following code. Jquery options are case sensitive. So use dateFormat instead of dateformat. The format should be dd-mm-yy instead of dd-mm-yyyy
$(function() {
$("#from_date, #to_date").datepicker({ maxDate: new Date(), dateFormat: "dd-mm-yy" });
$("div.ui-datepicker").css( { "font-size": "10px" } );
});
Currently I am using the following code in order to setting the Date picker functionality -
$("#datepicker").click(function() {
$(this).datepicker().datepicker( "show" );
});
But if I remove the "show" from parameter. it doesn't work and I want to add some more parameters like minDate, maxDate.
Please help How can I do it with "show" parameter.
Thanks in advance!!
You can pass it as an options like
$("#datepicker").click(function () {
$(this).datepicker({
maxDate: yourMaxDate,
minDate: yourMinDate
}).datepicker("show");
});
I don't know why you are using a click handler to initialize the datepicker.... you can just do
$("#datepicker").datepicker({
maxDate: yourMaxDate,
minDate: yourMinDate
});
Demo: Fiddle
After the plugin initialization, if you want to update the value of options, you can use the option method
$("#datepicker").datepicker('option', 'optioname', optionvalue)
you can change using option
$("#datepicker").click(function() {
$(this).datepicker('option', 'minValue', new Date(startDate));
$(this).datepicker('option', 'maxValue', new Date(endDate));
}
or...
$("#datepicker").click(function() {
$(this).datepicker('option', { minValue: new Date(startDate),
maxValue: new Date(endDate) });
}
I want the datepicker to select the currentdate/today and display it instead of'dd----yyyy'and moreover i wanted the date before today to be disabled from selection, please help!
$(document).ready(function () {
$("#button_id").click(function () {
$('<div/>', {
id: "div_id"
}).append($('<input>', {
type: "date",
name: "someDate",
class: "date_id"
})).appendTo("#static_div");
$(".date_id").datepicker({
//i want the datepicker to select the currentdate/today and display it instead of'dd----yyyy'and moreover i wanted the date before today to be disabled from selection
});
});
});
Here's the link to my fiddle:
http://jsfiddle.net/L4reds/73pEN/1/
$(document).ready(function () {
$("#button_id").click(function () {
var div = $('<div/>', {id: "div_id"}),
inp = $('<input>', {type: "text",name: "someDate",id: "date_id"});
div.append(inp).appendTo("#static_div");
inp.datepicker({
minDate: 0
}).datepicker('setDate', new Date());
});
});
FIDDLE
Use minDate and maxDate options to hide the previouse date see this
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
Format option set using this option
To disable dates before the current day:
$("#date_id").datepicker({
minDate: 0
});
Read the documentation: http://api.jqueryui.com/datepicker/#option-minDate
Currently I have this javascript code for my date picker
<script type="text/javascript">
$(function() {
$("#datePicker").datepicker();
$("#<%=TextBox1.ClientID %>").datepicker();
});
</script>
How to make my date picker not accept the past date? Thank you.
this greys out (and disables the selection) of any past date:
$(function () {
$("<%=TextBox1.ClientID %>").datepicker(
{
minDate: +0,
});
});
Try this
$("#datepicker").datepicker({ minDate: 0 });
minDate option does this work..