Im trying to pass a user selected date using Pikaday into a variable to be processed in a form using the following javascript, but my page is returning "Invalid Date".
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
field.value = moment(picker.toString()).format("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
Can anyone see what I'm doing wrong here?
You put a new option "format" and change "onSelect":
Example
<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.js"></script>
</head>
<body>
<div>
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
</div>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
format:'MM/DD/YY',
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
this._o.field.value =this.getMoment().format("MM/DD/YY");
document.getElementById('datepicker2').value = picker.toString("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
</body>
</html>
Related
I have written following jQuery for calculating age when user selects date from date picker and the focus of textbox(#dobfield) is lost then the calculated age should get displayed on textbox (#age).
function GetAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
$(document).ready(function() {
$("#dobfield").onblur(function() {
var dob = $("#dobfield").val().trim();
var calculatedDob = GetAge(dob);
$("#age").text(calculatedDob);
});
});
The html is as
<input aria-required="true" id="dobfield" class="form-control" required="" type="text" onclick="css()">
<input type="text" id="age" class="form-control" required>
The above code is not working!!!
Please help !!!
All the comments and answers here are great. However, the only problem with your code was that you were using the incorrect method to update the textbox.
To change the text of an input field (textbox):
$("#inputId").val("new value");
To change the text of a different element (label, span, et.c.):
$("#otherId").text("new value");
Here is the exact example what you want. This function will calculate age as soon as you change the date from datepicker and it will show the age in the field. In this example #dob is datepicker field's id.
$('#dob').datepicker({
onSelect: function(value, ui) {
var today = new Date(),
dob = new Date(value),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').value(age); // Changed it to `val()` as it is the textbox.
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true
});
jsfiddle
Check it out.
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input type="text" name="birthdate" value="10/24/1984" />
<input type="text" id="age" class="form-control" required readonly>
<script type="text/javascript">
$(function() {
$('input[name="birthdate"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true
},
function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old.");
$("#age").val("You are " + years + " years old.");
});
});
</script>
Example: https://jsfiddle.net/m2fdprrL/
Same with appending the result to age field. https://jsfiddle.net/m2fdprrL/2/
I have jQuery Datepicker with unavailable dates:
var disabledDates = ["23.05.2017", "24.05.2017"];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disabledDates.indexOf(string) == -1];
}
});
The only way i found to update disabledDates was to destroy datepicker, update unavailable dates and re-init.
// Destroy
$("#datepicker").datepicker("destroy");
// Update unavailable times
disabledDates = ["23.05.2017", "24.05.2017", "25.05.2017", "26.05.2017"];
// Re-init
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disabledDates.indexOf(string) == -1];
}
});
Is there a other/better way to do it?
You don't need to destroy it, simply change the beforeShowDay property, see following please:
var disableddates = ["20-05-2017", "21-05-2017"];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
$(function() {
$("#datepicker").datepicker({
beforeShowDay: DisableSpecificDates
});
});
$("#btn1").click(function(){
disableddates = ["01-05-2017", "02-05-2017"];
$("#datepicker").datepicker({
beforeShowDay: DisableSpecificDates
});
console.log("Disabled dates changed");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
<input type="button" id="btn1" value="Change dates">
I hope it helps you, bye.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want 2 textboxs where I can insert checkin & checkout date. Checkin date should be current or future date and checkout date should be greater then selected checkin date
Its simple using default datepicker plugins of JQuery. Code in jsfiddle contains 2 text box one for checkin and another for checkout.
$( "#checkin" ).datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});
Hit Me !! For code..
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtCheckin").datepicker({
dateFormat: "dd-M-yy",
onSelect: function (date) {
var date2 = $('#txtCheckin').datepicker('getDate');
date2.setDate(date2.getDate());
$('#txtCheckout').datepicker('setDate', date2);
//sets minDate to dateofbirth date + 1
$('#txtCheckout').datepicker('option', 'minDate', date2);
}
});
$('#txtCheckout').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#txtCheckin').datepicker('getDate');
console.log(dt1);
var dt2 = $('#txtCheckout').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#txtCheckout').datepicker('option', 'minDate');
$('#txtCheckout').datepicker('setDate', minDate);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="txtCheckin" />
<input type="text" id="txtCheckout" />
</body>
</html>
Src: http://jsbin.com/seduseqici/edit?html,output
Include jquery & jquery ui and try this.
HTML
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Inside script tag, try this.
<script>
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
</script>
I am using air datepicker for a form element and want to set the calendar to show dates which are 15 days from the current date and disabling selection of all previous dates.
However, I haven't been able to find a solution to this.
The following is the input field code so far:
<input type="text" data-date-format="dd-mm-yyyy" data-range="true" data-multiple-dates-separator=" - " data-language="en" data-startDate= newDate(+new Date + 12096e5) class="datepicker-here" name="Schedule">
Any help will be really appreciated.
Using jQuery UI
var dateToday = new Date();
var dates = $("#date").datepicker({
defaultDate: "+15",
changeMonth: true,
minDate: "+15",
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<label for="from">From</label> <input type="text" id="date" name="from"/>
Using air Datepicker
set minDate while initializing datepicker
var dateToday = new Date();
var dates = $("#date").datepicker({
language: 'en',
minDate: getMinDate(15)
});
function getMinDate(days) {
var date = new Date();
date.setDate(date.getDate() + days);
return date;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>
<label for="from">From</label> <input type="text" id="date" name="from"/>
i have 2 views. one of them calls the other one for the script of the datetime picker. right now what i get is a datetime picker that had past dates disabled. what i want to get is a date picker that not only has past date disabled but also has the passed time disabled. i am posting my code below.
This is my first view where the datepicker is displayed.
<input class="field-input form_datetime_houseboat" type="text" readonly placeholder="Starting Date" name="fromdate" id="fromdate">
my 2nd view has the section:
<script type="text/javascript">
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var dt = new Date();
var timed = new Date(dt.getHours(), dt.getMinutes());
$(".form_datetime").datetimepicker({format: 'dd-mm-yyyy hh:ii', startDate:today, minTime: timed});
</script>
thanks in advance.
try this script :helps to disable previoue date and time. create new date object as minDate
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>// datetime picker
<div id="date_picker"> </div>
<script type="text/javascript">
$(function(){
var dateToday = new Date();
var dates = $('#date_picker').dtpicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>