Jquery datepicker with angular returns undefined - javascript

In one Form I'm developing using angular, i use two datepickers
<td><input ng-model="reportsVal.start_date" type="text" id="startDatePicker" ng-disabled="showVals"></td>
<td><input ng-model="reportsVal.end_date" type="text" id="endDatePicker" required ng-disabled="showVals"></td>
$( "#startDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "Start Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
numberOfMonths: 1
});
$( "#endDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "End Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday
});
on submit when i console log reportsVal.start_date and reportsVal.end_date it comes as expected. But when i use end_date must be greater than start_date condition like below
$( "#startDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "Start Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
numberOfMonths: 1,
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
}
$("#endDatePicker").datepicker("option","minDate", date)
}
});
$( "#endDatePicker").datepicker({
showOn: "button",
buttonImage : "images/icons/calender.png",
buttonImageOnly: true,
buttonText: "End Date",
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
}
$("#startDatePicker").datepicker("option","maxDate", date || 0)
}
});
i'm getting undefined for these values reportsVal.start_date and reportsVal.end_date

Related

how to change format datapicker to YYYY-MM-DD

how to make the datapicker format be like 2020-01-08
$(".datepicker").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
});
$("#tgl_mulai").on('changeDate', function(selected) {
var startDate = new Date(selected.date.valueOf());
$("#tgl_akhir").datepicker({
dateFormat: 'yy-mm-dd'
}, 'setStartDate', startDate);
if ($("#tgl_mulai").val() > $("#tgl_akhir").val()) {
$("#tgl_akhir").val($("#tgl_mulai").val());
}
});
You can use { dateFormat: 'yy-mm-dd' } to format your datepicker.
Try:
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true,
todayHighlight: true,
});
$(function(){
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true,
todayHighlight: true,
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<input type="text" class="datepicker" />
You can find the demo at http://jsfiddle.net/gaby/WArtA/

jQuery UI Datepicker weird behavior shows weird icons

i have a weird behavior with date picker , and not reprduce for all computers,
the problem after select date from start date and then try to select from the end date , for some computers there additional arrow icons that appear in the date picker.
picture attached.
now the problem didn't reprduce for all , also it reprduce when get the minDate or maxDate related if you in start or end date
i've tested the issue on two computers that have a same os and browser versions but it reproduced on one of them
var from = $(".from", container).datepicker({
defaultDate: defaultDate,
dateFormat: "dd-M-yy",
changeMonth: true,
numberOfMonths: 3,
showOn: "both",
buttonImage: "/resources/images/forms/calendar-regular.png",
buttonText: "Start Date",
minDate : minDate,
maxDate: -1,
onClose: function (selectedDate) {
$(".to", container).datepicker("option", "minDate", selectedDate);
if (!$(".to", container).val()) {
$(".to", container).datepicker('setDate', selectedDate);
}
}
});
var to = $(".to", container).datepicker({
defaultDate: defaultDate,
dateFormat: "dd-M-yy",
changeMonth: true,
numberOfMonths: 3,
showOn: "both",
buttonImage: "/resources/images/forms/calendar-regular.png",
buttonText: "End Date",
minDate: minDate,
maxDate: 0,
onClose: function (selectedDate) {
$(".from", container).datepicker("option", "maxDate", selectedDate);
}
});
},
i'm using jquery-ui-1.9.1.js

How to initialize a time in daterangepicker [duplicate]

Hello I was asked to modify some code. We got something like this:
$("#expiration_datepicker").datetimepicker( "option", "disabled", false ).attr('value', '');
$("#expiration_datepicker").datetimepicker({
dateFormat: 'mm-dd-yy',
showOn: 'button',
buttonImage: '../chassis/images/calendar.gif',
buttonImageOnly: true,
minDate: 0,
maxDate: '+5Y',
duration: '',
<c:if test="${formIsReadonly or form.newsItemId == '-1'}">
disabled: true,
</c:if>
constrainInput: false,
timeFormat: 'hh:mm'
});
Looks like this is setting up the date picker
How Can I set it up to default show todays date and time??
like dd-m-yy hh:mm
just use setdate and new Date() for date/time right now
$(function() {
$("#datepicker1").datetimepicker({
dateFormat: 'dd-m-yy'
// your options
}).datetimepicker("setDate", new Date());
});​
FIDDLE
Check the datepickers documentation for more customizations. Surely it have..
$("#expiration_datepicker").datetimepicker("option", "disabled", false).attr('value', '');
$("#expiration_datepicker").datetimepicker({
**dateFormat: 'dd-m-yy',** // date format goes here
showOn: 'button',
buttonImage: '../chassis/images/calendar.gif',
buttonImageOnly: true,
minDate: 0,
maxDate: '+5Y',
duration: '',
<c:if test="${formIsReadonly or form.newsItemId == '-1'}">
disabled: true,
</c:if>
constrainInput: false,
timeFormat: 'hh:mm' // time format here
});
Usage:
<script>
$('#expiration_datepicker').click(function() {
('#expiration_datepicker').datetimepicker('setDate', (new Date()));
});
</script>
Need to add .datepicker("setDate", "0") after the datetimepicker call. see the code below.
$("#expiration_datepicker").datetimepicker( "option", "disabled", false ).attr('value', '');
$("#expiration_datepicker").datetimepicker({
dateFormat: 'dd-m-yy hh:mm', // format goes here. Check its documentation for more.
showOn: 'button',
buttonImage: '../chassis/images/calendar.gif',
buttonImageOnly: true,
minDate: 0,
maxDate: '+5Y',
duration: '',
<c:if test="${formIsReadonly or form.newsItemId == '-1'}">
disabled: true,
</c:if>
constrainInput: false,
timeFormat: 'hh:mm'
}).datetimepicker("setDate", "0");
var d = new Date();
$("#VALUATION_DATETIME").datetimepicker({
showSecond: false,
dateFormat: "dd/mm/yy",
timeFormat: 'HH:mm',
}).datetimepicker("setDate", new Date());
Output:- 14/04/2022 17:40
Set date programmatically:
$('#inputID').datetimepicker("setDate", "05.01.2017 13:36");

I want this date picker to choose dates from years between 1990 to 2000

Can someone help me correct this code. I want to pick dates that are between the years 1990 and 2000 only without allowing other dates like the ones in future to be selected.
<script>
$(document).ready(function(){
$( "#EmpBirthdate" ).datepicker({
dateFormat: 'yy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "-30"
});
});
</script>
$(function () {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeMonth: true,
changeYear: true,
yearRange: '1999:2012',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: new Date(1999, 10 - 1, 25),
maxDate: '+30Y',
inline: true
});
});
Just added year range option. It should solve the problem
You can use the min max attributes
Min Max
$( "#datepicker" ).datepicker({ minDate: value1, maxDate: value2 });

jquery datepicker set date to tomorrow's date

I have set the date for #arrival to todays date, but how can I set the #departure to tomorrow's date?
$(function() {
$( "#arrival" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function( selectedDate ) {
$( "#departure" ).datepicker( "option", "minDate", selectedDate);
}
});
$(function() {
$("#arrival").datepicker("setDate", "0");
});
$( "#departure" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$(function() {
$("#departure").datepicker("setDate", "1");
});
});
I have customized the datepicker and it works fine.
In the change function of the first datepicker, create a date object, set the date one day forward, and set the date of the second datepicker to that date. You can use minDate to make sure any date earlier than the set date can not be picked.
$(function () {
$("#arrival").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function (selectedDate) {
var myDate = $(this).datepicker('getDate');
myDate.setDate(myDate.getDate()+1);
$('#departure').datepicker('setDate', myDate);
}
});
$("#departure").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$("#arrival").datepicker("setDate", "0");
$("#departure").datepicker("setDate", "1");
});
FIDDLE

Categories