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. :-)

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!!!

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 datepicker and jquery mask not working

I have this piece of code that uses jquery datepicker and jquery masked input.
jQuery(function($) {
$(document).on('click', '#date', function () {
var me = $("#date");
me.datepicker({
showOn: 'focus',
altFormat: "mm/dd/yy",
dateFormat: "mm/dd/yy",
minDate: '12/12/2000',
maxDate: '12/12/2020'
}).focus();
me.mask('99/99/9999');
}).on('select', '#date', function () {
var me = $("#date");
me.mask('99/99/9999');
});
});
JSFiddle
The code uses jquery on because the input element in the application is dynamically added into the page. And the masked input is also registered from select event because user can come to the input by pressing tab from previous input.
It doesn't work on Firefox 31, but it works fine on Chrome 36 and IE 11.
When the input field is empty, user should be able to type anything (based on masked filter) in the input element.
Kindly suggest me what's wrong with the code.

Just fixed it by changing the select into focus, I can't remember why I used select in the first place.
jQuery(function($) {
$(document).on('click', '#date', function () {
var me = $("#date");
me.datepicker({
showOn: 'focus',
altFormat: "mm/dd/yy",
dateFormat: "mm/dd/yy",
minDate: '12/12/2000',
maxDate: '12/12/2020'
}).focus();
}).on('focus', '#date', function () {
var me = $("#date");
me.mask('99/99/9999');
});
});
Fixed JSFiddle

Set jQuery datepicker minDate depending on input

I'm trying to make a jQuery datepicker set minDate depending on the value of a radio button.
When I try to write a function returning a string, my JavaScript keeps crashing. Any ideas on why this is not working?
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: function() {
var str = "-35Y";
if($("#inputfield").val() == "value") {
str = "-33Y";
}
return str;
}
});

jsFiddle
This works fine.... you need to make sure that you have inputfield with a value
<input type='text' id='datepicker'></div>
<input type='text' value='value' id='inputfield'>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate()
});
function mdate(){
var str = "-35Y";
if($("#inputfield").val() == "value"){
str = "-33Y";
}
return str;
}
Edit:*
$('#inputfield').on('change',function(){
$('#datepicker').datepicker('option', 'minDate', mdate());
});

The option minDate expects a value, not a function. A datepicker will not automagically update the value of minDate whenever the selection of your radio button changes.
If you want the datepicker's minimum date to change whenever the radio button selection changes, then you must explicitly program this. Something along the following lines:
$('[name=myradiogroup]').change(function () {
var newMininumDate = /*insert logic here*/;
$('#datepicker').datepicker('option', 'minDate', newMininumDate);
});
See http://api.jqueryui.com/datepicker/#method-option

This works for me:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: $("#inputfield").val()
});