mounted(){
$(this.$refs.confirm_dt_modal).on("hidden.bs.modal", this.modalHide);
var self = this;
$('#confirmdt_start_date').datepicker({
dateFormat: 'dd/mm/yy',
onSelect:function(selectedDate, datePicker) {
self.start_date = selectedDate;
}
});
im trying to show the date in separate textbox
I think you are looking for this:
make a function > that assign a value of new textbox like below
<input type="text" id="newtextboxID" /> <!--Make textbox in html-->
</body>
<script> // add script # appropriate position
function new(){
document.GetElementById("#newtextboxID").value = OldVariable;
}</script>
<script>
$(this.$refs.confirm_dt_modal).on("hidden.bs.modal", this.modalHide);
var self = this;
$('#confirmdt_start_date').datepicker({
dateFormat: 'dd/mm/yy',
onSelect:function(selectedDate, datePicker) {
self.start_date = selectedDate;
//check below line
OldVariable = self.start_date;
new(); /// ---> this function call will fill up value of newtextbox
}
});
</script>
Related
I have code to disable specific dates on jquery datepicker. code runs fine on my local environment but not working on GoDaddy windows hosting
var disableddates = result; //result is array of dates ["1/7/2018","1/8/2018","1/9/2018"]
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay : DisableSpecificDates
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay : DisableSpecificDates
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('mm/dd/yy', date);
console.log(string); //this string return with leading zero 01/07/2018...
return [disableddates.indexOf(string) == -1];
}
This code run fine on local but when making it live it is not disabling specific dates in jQuery datepicker.
You do not need to format the date if it's already in a date format. For example, if result contains an array date like "1/7/2018", you can create a Date object from this:
var newDate = new Date(result[0]);
With this in mind, you can easily make and manipulate a Date. DatePicker passes a Date object to the function too. Here is a solution you might try:
$(function() {
var disableddates = ["1/7/2018", "1/8/2018", "1/9/2018"];
$("#txtFromdate, #txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: "m/d/yy"
});
$("#txtFromdate").change(function() {
$("#txtTodate").datepicker("option", "minDate", $(this).val());
});
function DisableSpecificDates(date) {
var result = [true];
$.each(disableddates, function(k, v) {
var exclude = new Date(v).toString();
var today = date.toString();
if (exclude == today) {
console.log("Match", exclude, today);
result = [false];
}
});
return result;
}
});
label {
width: 60px;
}
input {
width: 10em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="txtFromdate">From:</label>
<input type="text" id="txtFromdate" />
<label for="txtTodate">To:</label>
<input type="text" id="txtTodate" />
My Testing done here: https://jsfiddle.net/95t81vzq/3/
Hope that helps.
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 want to disable date_dis array from datepicker. I have tried following code.but when i press on txtdate it is showing whole the dates without disable.
<script language="javascript">
var date_dis = ["02-04-2016","03-04-2016","04-04-2016","05-04-2016","06-04-2016","07-04-2016","08-04-2016","09-04-2016","10-04-2016","11-04-2016","12-04-2016","14-04-2016","15-04-2016","17-04-2016","18-04-2016","19-04-2016","20-04-2016","21-04-2016","22-04-2016","23-04-2016","24-04-2016","25-04-2016","26-04-2016","27-04-2016","28-04-2016","29-04-2016","30-04-2016"];
$(document).ready(function () {
$('#txtdate').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('d-m-Y', date);
return [ date_dis.indexOf(string) == -1 ]
}
});
});
</script>
Use this dd-mm-yy
<script language="javascript">
var date_dis = ["02-04-2016","03-04-2016","04-04-2016","05-04-2016","06-04-2016","07-04-2016","08-04-2016","09-04-2016","10-04-2016","11-04-2016","12-04-2016","14-04-2016","15-04-2016","17-04-2016","18-04-2016","19-04-2016","20-04-2016","21-04-2016","22-04-2016","23-04-2016","24-04-2016","25-04-2016","26-04-2016","27-04-2016","28-04-2016","29-04-2016","30-04-2016"];
$(document).ready(function () {
$('#txtdate').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ date_dis.indexOf(string) == -1 ]
}
});
});
</script>
DEMO
Hi i have two datetime picker and using jquery 1.7.2 in both the datetime picker i need date and time defaultly presently am getting these after click box but i need before click only . am using jsfiddle http://jsfiddle.net/srknthcse/f9raubjp/ thank you for your help
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#datepicker1').val(datetext);
},
});
});
Instead of setting datepicker to an input field set it to a div. Then use a hidden input for the value as shown on the fiddle:
http://jsfiddle.net/8ztsjcos/2/
<input type="hidden" id="to">
<input type="hidden" id="from">
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#to').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#from').val(datetext);
},
});
});