Javascript new date() conversion - javascript

Im having some troubles with conversion. It says invalid date when alert(first_date) and alert(end_date),etc :s Im using datetimepicker to get the dates.
$( "#start_date" ).datetimepicker({
dateFormat : 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
defaultDateTime: "+1w",
showSecond: true,
changeMonth: true,
changeYear: true,
onClose: function( selectedDateTime ) {
$( "#end_date" ).datetimepicker( "option", selectedDateTime );
}
});
$( "#end_date" ).datetimepicker({
dateFormat : 'yy-mm-dd',
timeFormat: 'hh:mm:ss',
defaultDateTime: "+1w",
showSecond: true,
changeMonth: true,
changeYear: true,
onClose: function( selectedDateTime ) {
$( "#start_date" ).datetimepicker( "option", selectedDateTime );
}
});
Now, I need to do something like this:
var first_date = new Date($('#start_date').val());
var last_date = new Date($('#end_date').val());
var nDifference = (last_date - first_date);
var one_day = 1000*60*60*24;
var days = Math.round(nDifference/one_day);
<input type="text" id="start_date" name="start_date" value=""/>
<input type="text" id="end_date" name="end_date" value=""/>

Javascript date reliably accepts ISO date formats...
d = '2012-01-01 06:16:16'
console.log(new Date(d)) // invalid
console.log(new Date(d.replace(' ','T'))) // valid!
// Z at the end accounts for local timezone offset
console.log(new Date(d.replace(' ','T')+'Z'))

Related

Sending value of One date picker to two textboxes deferent format

I have one datepicker how can I send the value in two textboxes with deferent format?
I have used this :
<script>
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Date",
dateFormat: "D dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: new Date(),
//maxDate: new Date()
onSelect: function () {
var copydate = $(".datepicker").datepicker('getDate');
$("#FDate").val(copydate);
}
});
});
</script>
textbox1 which has the class datepicker working fine get me the date like this TUE 20/10/2020
but textbox2 called FDate get me very long date with extra details I want it to show only 20/10/2020
any help please?
I tried to use dateformat after val or after getdate but not working.
The var copydate = $(".datepicker").datepicker('getDate'); returns the long date format.
You need to .formatDate() the date from the .datepicker
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Date",
dateFormat: "D dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: new Date(),
//maxDate: new Date()
onSelect: function () {
var datetypevar = $(".datepicker").datepicker('getDate');
var copydate = $.datepicker.formatDate('dd/mm/yy', datetypevar);
$("#FDate").val(copydate);
}
});
});

Jquery month and year picker not working

I am new to the web development. Here, I am using the jquery datePicker. In this I have a input box and that user can select only year and month and not date. So, I used,
$('#' + duration[k]).datepicker({
format: 'MM yyyy',
viewMode: "months",
minViewMode: "months",
});
I did this, Here my input are getting created dynamically.
var duration = ["StartDuration", "EndDuration"];
var commentText = document.createElement('input');
commentText.setAttribute("type", "text");
commentText.name = "month";
commentText.id = duration[k];
commentText.className = 'form-control';
commentText.rows = '3';
commentText.placeholder = "Enter" + " " + duration[k];
commentText.setAttribute("readOnly", "true");
commentText.setAttribute("ng-model", duration[k]);
Used for loop on the array and then created this input box. Now what happening is here, It gets datepicker but it is having a date-month-year . So, I want to have only year and month. Can any one pleas help me with this ?
You need to use dateformat like this : dateFormat: 'MM yy'
Check the example :
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<label for="startDate">Your Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
Here is fiddle
You can do like this
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
});
Jquery datepicker provides these two - changeMonth,changeYear property for it and make format like MM yy.

Datepicker disables previous and future dates wrong

I've created a datepicker for my form and it selects the current date and disables past dates.
jQuery(document).ready(function($){
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">
But the problem is that when I select a "from" date and then a "to" date, my "to" date block my "from" date. So for example if I select "from" 10 july "to" 15 july, then I can't change my from date anymore after 15 july. It blocks me future dates after the "to" date selected.
Is like if I select the "to" date it makes it the maxDate until I reload the page.
How can I prevent this maxDate so I can always select the date I want? The only restriction I need is to disable past dates from today date.
Try this code
Removed code setting maxDate for from datepicker
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : null,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if(option!==null){
dates.not(this).datepicker("option", option, date);
}
}
});
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : null,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if(option!==null){
dates.not(this).datepicker("option", option, date);
}
}
});
<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>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">
Assuming that you are talking about jquery 2.1.1 and jquery-ui 1.12.1 as described in documentation you should consider the destroy method to re-elaborate minDate and maxDate options - but that would be tricky. So i would consider to use a timerange datepicker in this case to get the desidered result.
$(function () {
var dateToday = new Date();
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.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;
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">

How to set date2>date1 in Jquery UI Datepicker?

Hi i want to select date of birth from first date picker. In second date picker pick dates only above date of birth.
http://jsfiddle.net/boopathirajan/6c3v5gna/2/
I added code here.
so help me how to pick date2>date1 only
html
<div class="wrapper">
<input type="text" value="" id="date1" name="dob">
<input type="text" value="" id="date2" name="vcc">
</div>
jquery
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
Here is the solution for you.
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date2").datepicker("option","minDate", selected)
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date1").datepicker("option","maxDate", selected)
}
});
JSFIDLE
OR a different Approach
$(document).ready(function () {
$("#date1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#date1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
}
});
$('#date2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#date1').datepicker('getDate');
var dt2 = $('#date2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#date2').datepicker('option', 'minDate');
$('#date2').datepicker('setDate', minDate);
}
}
});
});
Its working fine
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0,
onSelect: function (date) {
$('#date2').datepicker('option', 'minDate', date);
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate:0,
minDate:1,
});
DEMO

How to show month in one datepicker based on the selection of month in another datepicker

Here is the snippet where i need to fix the requirement
Here i used jquery for datepicker
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes
/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Here i gave datepicker to choose month by dropdownlist but problem is in two fields the user can select the month but i need to restrict the month selection in "to" field because the second datepicker should show the month of "from field" itself
$(document).ready(function () {
$("#datepicker,#datepicker1").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy"
});
$('#datepicker,#datepicker1').datepicker("setDate", new Date());
});
Here are the two datepickers with two fieldnames "from" and "to"
<li><label class="label">From:</label></li>
<li><input name="fdate" type="text" class="sel" size="10"
id="datepicker" required /><li>
<li><label class="label1">To:</label></li>
<li><input name="tdate" type="text" class="sel" size="10"
id="datepicker1" required /><li>
<li ><label class="label" >Weeks:</label></li>
Below is the snippet for above requirement......
<head>
<title>Testing</title>
<link href="css/jquery-ui-start-custom-1.10.3.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-datepicker-next, .ui-datepicker-prev { display: none; }
</style>
<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-custom-1.10.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});
</script>
</head>
Small script that Iam using....try with this
var startDateTextBox = $('#datepicker');
var endDateTextBox = $('#datepicker1');
startDateTextBox.datepicker({
changeYear: true,
yearRange : 'c-30:c',
dateFormat:"yy-mm-dd",
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datepicker('getDate');
var testEndDate = endDateTextBox.datepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDate){
endDateTextBox.datepicker('option', 'minDate', startDateTextBox.datepicker('getDate') );
}
});
endDateTextBox.datepicker({
changeYear: true,
yearRange : 'c-30:c',
dateFormat:"yy-mm-dd",
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datepicker('getDate');
var testEndDate = endDateTextBox.datepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDate){
startDateTextBox.datepicker('option', 'maxDate', endDateTextBox.datepicker('getDate') );
}
});
hope it gives you an idea...
$(document).ready(function() {
$(function() {
$( "#fromDate" ).datepicker({
yearRange: "-50:+20",dateFormat: 'dd/mm/yy',showOn: "button",changeMonth: true,changeYear: true,
buttonImage:""+appctx``+"/images/index.jpeg" ,buttonImageOnly: true ,buttonText: "",autoSize:true ,
onSelect: function( selectedDate ) {
$( "#toDate" ).datepicker( "option", "minDate", selectedDate );
},
changeMonth: true,
changeYear: true
});
});
$( "#toDate" ).datepicker({
yearRange: "-50:+20",dateFormat: 'dd/mm/yy',showOn: "button",changeMonth: true,changeYear: true,
buttonImage:""+appctx+"/images/index.jpeg" ,buttonImageOnly: true ,buttonText: "",autoSize:true ,
onSelect: function( selectedDate ) {
$( "#fromDate" ).datepicker( "option", "maxDate", selectedDate );
},
changeMonth: true,
changeYear: true
});
});

Categories