Develop Reference

How can I disable an input type date with jQuery if the first input is empty

I'm working at a checkout page. I need to disable an input (#dreturn) if the previous input (dpick) is empty.
This is my code:
$(document).ready(function(){
var minDate = new Date();
$("#dpick").datepicker({
showAnim: 'drop',
numberOfMonth: 1,
maxDate: 7,
minDate: minDate,
dateFormat: 'yy/mm/dd',
onClose : function(selectedDate){
$('#dreturn').datepicker("option", "minDate", selectedDate);
}});
var minDate = new Date();
$("#dreturn").datepicker({
showAnim: 'drop',
numberOfMonth: 1,
maxDate: 7,
minDate: minDate,
dateFormat: 'yy/mm/dd',
onClose : function(selectedDate){
$('#dreturn').datepicker("option", "minDate", selectedDate);
}});
This is my datapicker but this isn't helping me.
$('#dreturn').change(function() {
var start = $('#dpick').datepicker('getDate');
var end = $('#dreturn').datepicker('getDate');
if (start<end) {
var days = (end - start)/1000/60/60/24;
$('#days').val(days);
}
else {
alert ("Please chech again your dates!");
$('#dpick').val("");
$('#dreturn').val("");
$('#days').val("");
}
});
I've tried this but isn't working.
if (!'dpick').val() {
document.getElementById("dreturn").disabled = true;
}
});

Change your if statement to
if(!Date.parse($("dpick").val())){
and move this if to blur event handler, something like this
$("#dpick").blur(function (){
if(!Date.parse($(this).val())){
document.getElementById("dreturn").disabled = true;
}else{
document.getElementById("dreturn").disabled= false;
}
})

Initially disable the second date-picker "#dreturn" after initializing your date-pickers:
$(document).ready(function(){
//initialization
$("#dpick").datepicker({...});
$("#dreturn").datepicker({...});
$("#dreturn").prop('disabled',true);
/****************** new code to be inserted see below ************/
});
Now, on the change of "#dpick" enable "#dreturn":
/************************ CODE TO BE INSERTED ABOVE ****************/
$("#dpick").change"(
function()
{
var val= $("#dpick").val();
if(!(val))
{
$("#dreturn").prop('disabled',false);
}
}
);
Note:
1. " if(val)" evaluates to true if "val" is not null, undefined and the jQuery UI documentation states
for the datepicker in https://api.jqueryui.com/datepicker/#option-defaultDate that the default value is "null".
2. Now to use "change()" for the datepicker of jQuery UI, check jQuery Datepicker onchange event issue which
so, it means you have to use "onSelect" of jQuery datepicker UI to address the defect of your datepicker.
$(document).ready(
function()
{
//initialization
$("#dpick").datepicker({
showAnim: 'drop',
numberOfMonth: 1,
maxDate: 7,
minDate: minDate,
dateFormat: 'yy/mm/dd',
onClose : function(selectedDate){
$('#dreturn').datepicker("option", "minDate", selectedDate);
},
onSelect: function(){
$(this).change();
}
});
$("#dreturn").datepicker({.....});
$("#dreturn").prop('disabled',true);
$("#dpick").change"(
function()
{
var val= $("#dpick").val();
if(val)
{
$("#dreturn").prop('disabled',false);
}
}
);
}
);
And your problem should be solved. Hope it helps. :-)

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

jQuery UI datepicker date range issue

I made two date fields ("pickup" and "dropin"). And, I want to make sure that:
Pickup date should be earlier than dropin date.
When a user already choose his dropin and pickup dates and later he changes the pickup date later than dropin date, then the script automatically changes his dropin date later than the user chose.
(for example, a user put "12/07/2011" in pickup date and "13/07/2011" in dropin date then later he changes his pickup date to "13/08/2011". If so, the script should set "13/08/2011" as the dropin date.
I referred to one of threads in this site. And, the following is the code I am having right now.
$.datepicker.setDefaults({dateFormat: 'dd/mm/yy'});
$("#pickup").datepicker({
onSelect: function(dateText, inst){
var minDate = $(this).datepicker('getDate');
$('#dropin').datepicker('destroy').datepicker({
minDate: minDate
});
},
onClose: function(dateText, inst) {
if(dateText == '') {
$('#dropin').val('');
$('#dropin').datepicker('destroy').datepicker();
}
}
});
$("#dropin").datepicker();
var set=$("#dropin").datepicker('getDate');
alert(set.getDate());
It looks like that it satisfies the first one. But, I have no idea about the second constraint. And, it keeps stating that 's' is null.
Can you help me with the issue?
Thank you very much.

Try somethig like this:
var date = new Date();
$.datepicker.setDefaults({
'dateFormat' : 'yy-mm-dd',
'onSelect' : function(dateText, inst){
instance = $(this).data('datepicker'),
selectedDate = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
dateText,
instance.settings
);
if (this.id == 'datepicker-pickup') {
$('#' + 'datepicker-dropin')
.datepicker('option', 'minDate', selectedDate)
.datepicker('refresh');
datePickup = dateText;
}
if (this.id == 'datepicker-dropin') {
$('#' + 'datepicker-pickup')
.datepicker('option', 'maxDate', selectedDate)
.datepicker('refresh');
dateDropin = dateText;
}
}
});
$('#datepicker-pickup').datepicker({
'defaultDate' : datePickup,
'maxDate' : dateDropin
});
$('#datepicker-dropin').datepicker({
'defaultDate' : dateDropin,
'minDate' : datePickup,
'maxDate' : new Date(date.getFullYear(), date.getMonth(), date.getDate())
});