jQuery Datepicker Date Formatting Not Working - javascript

I am new to jQuery so bear with me here. I have set my code set up so that when the user clicks on a certain date on the jQuery calendar, it displays the date that they have selected. I just want it to show the date in the format of "mm-dd-yyyy" but everything I have tried does not affect the date output.
This is the bare jQuery code:
$(document).ready(function init (){
$("#datepicker").datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function() {
var userdate = $("#datepicker").datepicker("getDate");
document.getElementById("userdate").innerHTML = userdate;
}
});
});
Here is a plunker of my bare code:
http://plnkr.co/edit/T8ARyYg2qZna9QvPGg8m?p=preview
Thank you!

Change your code:
var userdate = $("#datepicker").datepicker("getDate");
By:
var userdate = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

just change your onSelect function like this
onSelect: function(dateText) {
var userdate = dateText;
document.getElementById("userdate").innerHTML = userdate;
}
your code should look like this
$(document).ready(function init() {
$("#datepicker").datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function(dateText) {
var userdate = dateText;
document.getElementById("userdate").innerHTML = userdate;
}
});
});
here's a working JSFIDDLE

You can use the formatDate function:
var userdate = $.datepicker.formatDate('mm/dd/yy', $("#datepicker").datepicker("getDate"))

Related

Jquery Datepicker not worked on clone function [duplicate]

Working on clone using datepicker. I have searched in stackoverflow for my issue i am not getting the correct stuff. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned div the datepicker was not working. I tried giving .destroy the result was not coming as expected.It might be the duplicate question but as I said the solution not working in my case.
Here is the jquery code.
var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function () {
setTimeout(function (){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
$(document).on("click", ".edu_add_button", function () {
alert("checj");
var $clone = $('.cloned-row1:eq(0)').clone(true,true);
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find(".school_Name").attr('disabled', true).val('');
$clone.find(".degree_Description").attr('disabled', true).val('');
$clone.find("input.deg_date").datepicker();
$(this).parents('.educat_info').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
Here is the fiddlelink
Thanks in advance
Jquery datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones).
try updating your js code like this
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
here's the updated JSFIDDLE. hope this helps.
You can re-initiate datepicker,
Put datepicker line at last on click event
$(document).on("click", ".edu_add_button", function () {
...
...
...
...
$(".deg_date").datepicker("setDate", currentDate);
});
It will work!!!

jQuery datepicker not working properly after append

I am appending row to table add new field but datepicker not working properly.May be its coz of multiple datepicker.i just need datepicker started from current date and next will be start from same date selected on first one.
var mydate = new Date();
jQuery(document).on('focus', ".datefrom", function () {
jQuery(this).datepicker({
format: 'dd-mm-yy',
minDate: new Date()
}).on('dateSelected', function (e, date)
{
mydate = date;
});
});
jQuery(document).on('focus', ".datetill", function () {
jQuery(this).datepicker({
format: 'dd-mm-yy',
minDate: mydate
});
});
Thanks in advance.
Here the snapshot:1
fiddle link https://jsfiddle.net/3oyxc97g/16/
Initiate the second datepicker when the date from the first was selected
var mydate = new Date();
jQuery(document).on('focus', ".datefrom", function() {
jQuery(this).datepicker({
format: 'dd-mm-yy',
minDate: new Date()
}).on('changeDate', function() {
mydate = this.value;
dates = mydate.split('-');
mydate = dates[1]+'-'+dates[0]+'-'+dates[2];
jQuery(".datetill").datepicker('destroy').datepicker({
format: 'dd-mm-yy',
startDate: new Date(mydate)
});
});
});
https://jsfiddle.net/3oyxc97g/31/
try
var mydate=new Date();
jQuery(document).on('focus',".datefrom", function(){
jQuery(this).datepicker({
format : 'dd-mm-yyyy',
autoclose : true,
todayHighlight : true,
startDate : new Date()
}).on('changeDate', function(ev)
{
mydate=jQuery('.datefrom').val();
});
});
......

jquery clone date picker not working

Working on clone using datepicker. I have searched in stackoverflow for my issue i am not getting the correct stuff. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned div the datepicker was not working. I tried giving .destroy the result was not coming as expected.It might be the duplicate question but as I said the solution not working in my case.
Here is the jquery code.
var currentDate = new Date();
$(".cloned-row1").find(".deg_date").removeClass('hasDatepicker').datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function () {
setTimeout(function (){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
$(".deg_date").datepicker("setDate", currentDate);
var count=0;
$(document).on("click", ".edu_add_button", function () {
alert("checj");
var $clone = $('.cloned-row1:eq(0)').clone(true,true);
//alert("Clone number" + clone);
$clone.find('[id]').each(function(){this.id+='someotherpart'});
$clone.find('.btn_more').after("<input type='button' class='btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find(".school_Name").attr('disabled', true).val('');
$clone.find(".degree_Description").attr('disabled', true).val('');
$clone.find("input.deg_date").datepicker();
$(this).parents('.educat_info').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row1').length;
if(len>1){
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
Here is the fiddlelink
Thanks in advance
Jquery datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones).
try updating your js code like this
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
beforeShow: function() {
setTimeout(function() {
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
here's the updated JSFIDDLE. hope this helps.
You can re-initiate datepicker,
Put datepicker line at last on click event
$(document).on("click", ".edu_add_button", function () {
...
...
...
...
$(".deg_date").datepicker("setDate", currentDate);
});
It will work!!!

jQuery datepicker settings not working

In jQuery Date picker i write like this for getting date value. But i want to write min Date,Change Month etc. where should i place the settings. when i wrote it inside function it doesn't display. Please help me
$(function() {
$('#datepicker').datepicker({onSelect: function()
{
var dateObject = $(this).val();
alert(dateObject);
}
});
});
</script>
I wrote in
<script>
$(function() {
$('#datepicker').datepicker({minDate:+0,changeMonth:true,onSelect: function()
{
var dateObject = $(this).val();
alert(dateObject);
}
});
});
</script>
To alert the selected date you need to use getdate.
var dateObject = $("#datepicker").datepicker('getDate');
alert(dateObject);
onSelect has parameter with the value
try use it like this:
onSelect: function(value) { alert(value) }
onSelect: function (dateText, instance) {
}

Datepicker with month and year only

I would like to have a datepicker where user can select only the month and year from the datepicker and i also need to restrict the next datepicker with selected month and year from previous datepicker..
Can anyone help me out?
Sean answer is pretty good, if you want to disable day selecting as well, you might use a different approach, you can see the result in this fiddle:
Calendar is hidden, so you can only choose month and year. When selecting a date in first datepicker, minDate of second datepicker is getting adapted.
EDIT
jQuery datepicker has seriously problems when dateformat doesn't provide a day. I changed th code to make it work. Only thing is when opening a datepicker, I have to convert the date to a suitable format. Have a look at the new fiddle.
HTML:
<p>Date: <input type="text" id="first-datepicker"/></p>
<p>Date: <input type="text" id="second-datepicker"/></p>
CSS:
#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-current
{
display: none !important;
}
JAVASCRIPT:
$('#first-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
var secondDatePicker = $('#second-datepicker').data('datepicker');
var dateSetted = secondDatePicker.input.data('date-setted');
setMyDate(secondDatePicker);
secondDatePicker.input.datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, 0));
if (dateSetted == true) {
saveMyDate(secondDatePicker);
};
}
});
$('#second-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
}
});
function saveMyDate(inst) {
inst.selectedDay = 1;
inst.input.data('year', inst.selectedYear);
inst.input.data('month', inst.selectedMonth);
inst.input.data('day', inst.selectedDay );
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
inst.input.datepicker('setDate', date );
formatDate(inst, date);
inst.input.data('date-setted', true);
};
function setMyDate(inst) {
var dateSetted = inst.input.data('date-setted');
if (dateSetted == true) {
var year = inst.input.data('year');
var month = inst.input.data('month');
var day = inst.input.data('day');
var date = new Date(year, month, day);
inst.input.datepicker('setDate', date );
};
};
function formatDate(inst, date) {
var formattedDate = $.datepicker.formatDate('MM - yy', date);
inst.input.val(formattedDate);
};
You can modify the jQuery datepicker to only allow the user to select certain dates, in this case we could restrict it to the first of the month:
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also modify the options to display the date differently:
$(".datepicker").datepicker({
dateFormat: 'mm/yy'
});
Combine the two and we get:
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst,
dateFormat: 'mm/yy'
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also use this to restrict your second datepicker:
var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to
$("#myFirstDatePicker").datepicker({
beforeShowDay: disableAllExceptCurrentMonth,
dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
});
function disableAllExceptCurrentMonth(date) {
if (date.getMonth() != restrictedMonth) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can use this monthpicker jquery widget : https://github.com/lucianocosta/jquery.mtz.monthpicker
If you can work in html5 i would suggest to use the new month input support for newer browser
simply use and let the magic happen.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month
Datepicker can show month and year only without using css
.ui-datepicker-calendar {
display: none;
}?
You can do like this
var dp=$("#datepicker").datepicker( {
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
dp.on('changeMonth', function (e) {
//do something here
alert("Month changed");
});
Documentation here

Categories

Resources