jQuery datepicker settings not working - javascript

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) {
}

Related

Return correctly the info in a javascript function

I want to use the date picker of jQuery UI but I don't know how to extract the info because I'm calling the datePickerRange() function but it's always returning object object.
Below is the function that I have created, maybe is useless, but my idea was take from here the days selected.
function datePickerRange(){
var from = $("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
return from;
}
The getDate() function:
function getDate(element) {
var dateFormat = "mm/dd/yy";
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
And here the code to take the info when user press a button.
$('.btn_graf').click(function() {
if(id_btn == 'date_btn'){
var from = datePickerRange();
alert(from);
}
});
Why returns object object? I think maybe I'm doing wrong the return from; because I have to add something more but I don't know how to do it correctly.
Can somebody help me? Thank you very much.
from is the jQuery object representing the #from element, it's not useful to alert it. If you want to get the dates that the user has selected, use the getDate method of the datepicker.
$('.btn_graf').click(function() {
if(id_btn == 'date_btn'){
var from = $("#from").datepicker("getDate");
var to = $("#to").datepicker("getDate");
alert(`From ${from} to ${to}`);
}
});

How to submit and save value from bootstrap-datepicker in Meteor?

I am prototyping an app in Meteor and am having trouble using the datepicker. I created a minimal example in Meteorpad.
How can I get the selected value from the datepicker when clicked and save to the db? My code for the event is in line 8 of client/app/js. I'm using an input tag as part of the datepicker but since there is no submit button, I'm not sure if I am actually changing the date. Does onchange work here?
Template.Valuation.events({
'onchange #selectedDate': function(e) {
e.preventDefault();
var valuationId = this._id;
var selectedDate = $(e.target).find('[name=selectedDate]').val();
Valuations.update(valuationId, {$set: {valuationDate: selectedDate}}, function () {
});
}
});
Does onchange work here?
No, it does not. You will need to listen for changeDate events in your Template.Valuation.onRendered function:
Template.Valuation.onRendered(function() {
$('#valuation .input-group.date').datepicker({
todayBtn: "linked",
orientation: "top auto",
daysOfWeekDisabled: "0,6",
todayHighlight: true,
autoclose: true,
format: 'yyyy-mm-dd'
});
var self = this;
$('#valuation .input-group.date').datepicker().on('changeDate', function(ev) {
var valuationId = self.data._id;
var selectedDate = $('#selectedDate').val();
Valuations.update(valuationId, {
$set: {
valuationDate: selectedDate
}
}, function() {});
});
});
I found also a bug in your valuationPrice template helper. This may fix it:
valuationPrice: function() {
var valuation = Valuations.findOne({
_id: this._id
});
var valuationDate = valuation.valuationDate;
var valuationPrice = 0;
_.each(valuation.closingPrices, function(closingPrice) {
if (closingPrice.date == valuationDate) valuationPrice = closingPrice.close;
});
return valuationPrice;
}
Here is the updated MeteorPad.

jQuery Datepicker Date Formatting Not Working

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"))

How to make event calendar using jquery [duplicate]

How can I trigger onSelect event when I select a selected date on jQuery UI datepicker?
Working demo : http://jsfiddle.net/YbLnj/
Documentation: http://jqueryui.com/demos/datepicker/
code
$("#dt").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
$("#start").val(date + time.toString(' HH:mm').toString());
}
});
Use the following code:
$(document).ready(function() {
$('.date-pick').datepicker( {
onSelect: function(date) {
alert(date)
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1,
});
});
You can adjust the parameters yourself :-)
If you are also interested in the case where the user closes the date selection dialog without selecting a date (in my case choosing no date also has meaning) you can bind to the onClose event:
$('#datePickerElement').datepicker({
onClose: function (dateText, inst) {
//you will get here once the user is done "choosing" - in the dateText you will have
//the new date or "" if no date has been selected
});
$(".datepicker").datepicker().on("changeDate", function(e) {
console.log("Date changed: ", e.date);
});
If the datepicker is in a row of a grid, try something like
editoptions : {
dataInit : function (e) {
$(e).datepicker({
onSelect : function (ev) {
// here your code
}
});
}
}

How to disable the past dates on the date picker .Tried all solutions provided on stackoverflow

I have tried mindate:0 but it is not working for my code.I have tried for the solutions on stack overflow but unable to adapt it to my code.I wish to disable the past dates on the datepicker. Kindly help me .This is my code:-
<script>
$(document).ready(function() {
$("#departing").datepicker({onSelect: function() {
var selectedDate = $(this).datepicker( 'getDate' );
}
});
});
</script>
I think it may help you. Please try this code
<script>
$(document).ready(function() {
var dateToday = new Date();
$("#departing").datepicker({
minDate: dateToday,
onSelect: function() {
var selectedDate = $(this).datepicker( 'getDate' );
}
});
});
</script>

Categories

Resources