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.
Related
I am new to JS. I have added JS function to prevent user to insert invalid(like 99/99/0000) date manually in datepicker. I have written all the function and it is working as expected but somehow when you entered the invalid date it throws the error but that alert box is not closed it remains as it is. Please guide me here Thanks in advance.
Function :
$(function() {
var dateFormat = "mm/dd/yy";
var beginDate = $("#dobEdit").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true
})
.on({
change: function() {
beginDate.datepicker("option", "minDate", getDate(this));
},
blur: function() {
beginDate.datepicker("option", "minDate", getDate(this));
}
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
alert(error);
}
return date;
}
});
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!!!
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}`);
}
});
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!!!
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
}
});
}
}