Date format for bootstrap datepicker - javascript

Hi i am using bootstrap datepicker. I need to get the value from datepicker text box in the format like date-month-year to my controller but presently i am getting values like
Tue Oct 01 00:00:00 IST 2013
I have tried formatting date but still i am getting same result . I have tried like below
$(function() {
window.prettyPrint && prettyPrint();
$('#birthday').datepicker({
format: "DD, d MM, yy"
})
});

If the format attribute is not working. You can try something similar to this:
var dt = $('#dt').datepicker({format:'dd/mm/yyyy'}).on('changeDate', function(ev) {
var newDate = new Date(ev.date);
var year = newDate.getFullYear();
var month = (newDate.getMonth()+1);
var day = newDate.getDate();
dt.setValue(day+'-'+month+'-'+year);
dt.hide();
}).data('datepicker');
You are formatting your date by yourself.
You can ignore the format attribute.

Related

jQuery date picker read date from text file

I’m trying to read dates from a text file for example - '08/12/2017'
$.get('disableDays.txt', function(data) {
var disableSpecificDays = data;
The values are getting read. I'm then trying to disable dates in the datepicker based on text file entries
It works when I set the value like this:
addDates: ['08/12/2017', '10/14/2017'],
This doesn’t work :
addDates:+ disableSpecificDays,
I’ve tried setting as array but I know jquery is not same as array and like:
addDates:+ $('#disableSpecificDays').val,
var today = new Date();
var y = today.getFullYear();
var dates = $('#full-year').multiDatesPicker({
//addDates: ['08/12/2017', '10/14/2017'],
//addDates:+ $('#disableSpecificDays').val,
addDates:+ disableSpecificDays,
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
beforeShowDay: $.datepicker.noWeekends
});
What I am doing wrong?
Can I write back to the text file with:
file_put_contents($file, $current);

hide javascript dates in table

i have a form where the previous dates from today must be hidden in the first date picker and the second date picker must not show dates previous to the first selected date.
Date picker one
Date picker two
The form is working for the first row but i can't get the code to work for the other rows that follow when i "add" a new row.
Can anyone assist me with this Please?
here is my current code :
$(document).ready(function(){
function updateMinimumEndDate ()
{
var minimum = $('.DepartDate input').val();
var minSplit = [];
minSplit = minimum.split("/");
var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
$('.ReturnDate input').attr('min',newMin);
}
$('.DepartDate input').change(updateMinimumEndDate);
});
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var minDate = (year +"-"+ month +"-"+ day);
$('.DepartDate input').attr('min',minDate);
});
});
The problem is with the line
$('.DepartDate input').change(updateMinimumEndDate);
This needs to be in docReady. It also needs to use the jQuery function .on so that it will be triggered for new rows as they are added. I haven't checked this:
$('.DepartDate input').on('change', 'AnchorSelector', function() {updateMinimumEndDate())};
where AnchorSelector is a location which contains your form.

Issue in adding dates in datepicker

I have 2 datepickers binded to 2 text boxes(Chkin and Chkout). When I select a date in Chkin Im supposed to show Chkin+1 date in Chkout. But Chkout date are not properly filled in some cases. Can someone tell me where I went wrong?
My code is-
$("#Chkin").datepicker({
dateFormat: $("#Dateformat").val(),
minDate: '+0',
onClose: function (dateText, inst) {
if ($("#Dateformat").val() == "dd/mm/yy") {
var parts = dateText.split("/");
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
}
else {
var cin = new Date(dateText);
}
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+7);
$("#Chkout").datepicker('option', 'minDate', cout);
$("#Chkout").datepicker('option', 'maxDate', maxOut);
showDays();
}
});
var cin = new Date($("#Chkin").val());
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+7);
$("#Chkout").datepicker({
dateFormat: $("#ctl00_ContentPlaceHolder1_hdnDateformat").val(),
minDate: cout,
maxDate: maxOut,
onSelect: showDays });
PS:Chkin and Chkout values are initially binded with some dates.
It's because when Chkin is closed, you don't set Chkout with Chkin + 1.
In your $("#Chkin").datepicker({}), add $("#Chkout").datepicker( "setDate", cout ); before call function showDays().
Explanation :
With your current code, if selected value in Chkin is less than 7 days OR equal to Chkout, Chkout will automatically set to Chkin + 1. But otherwise, Chkout will not be changed.
Example :
Before Chkin is changed :
Chkin = 1 August 2013
Chkout = 5 August 2013
Chkout's minDate and maxDate = 2 August 2013 and 8 August 2013
Case 1 - Chkin is changed to 22 July 2013 :
Chkout = 23 July 2013
Chkout's minDate and maxDate = 23 July 2013 and 29 July 2013
Case 1 explanation : Chkout is changed because old Chkout's value is not in range of new Chkout's minDate and maxDate.
Case 2 - Chkin is changed to 3 August 2013 :
Chkout = 5 August 2013
Chkout's minDate and maxDate = 4 August 2013 and 10 August 2013
Case 2 explanation : Chkout is still same because old Chkout's value is in range of new Chkout's minDate and maxDate.
Hopefully this help.

I want to convert string "var=02-24-2013 12:40:00.0 into a java script date object?

<span id="datePickerSpan${email.id}">
<g:formatDate date="${scheduleDate}" format="dd-MM-yyyyHH:mm"/>
</span>
<input type="text" id="datePicker${email.id}" style="display:none"/>
<span onclick="openDateTimePicker('${email.id}')"></span>
<g:javascript>
var str='${scheduleDate}';//2013-02-2412:40:00.0
str = str.replace(/(\d{2}:\d{2}:\d{2}).*$/g, '$1');
alert("Str is=> "+str);//2013-02-24 12:40:00
var date2=new Date(str);
alert(" yy dd mm alert"+date2);//invalid date object
str = str.replace(/^(\d{4})-(\d{2})-(\d{2})/g, '$2-$3-$1');
alert("now new Str is =>"+str);//02-24-2013 12:40:00.0
var date=new Date(str);
alert("now str date is =>"+date);//invalid date object
var date1=new Date();
alert("java script date is =>"+date1);//Wed Feb 13 2013 11:16:55 GMT+0530 (India Standard Time)
$('#datePicker${email.id}').datetimepicker({
dateFormat: 'dd-mm-yy',
timeFormat: 'HH:mm',
minDateTime: new Date(),
maxDateTime:null,
defaultDate:new Date(),
showOn: "button",
buttonImage: requestPath + "/images/calendar.gif",
buttonImageOnly: true,
onSelect : function(dateText,obj){
saveRescheduleDate(${email.id},dateText);
}
});
</g:javascript>
JavaScript Date object is created with new Date().:
new Date("02-24-2013 12:40:00.0");
you can declare Date object like this
var dt= new Date("October 13, 1975 11:13:00")
try this link for more reference
http://www.w3schools.com/js/js_obj_date.asp

Help with jquery datepicker calendar date disabling

I'm hoping to get some help with my problem i have been having with jquery datepicker.
Please visit this site for information regarding the problem with code samples:
http://codingforums.com/showthread.php?p=929427
Basically, i am trying to get the 1st day and day 31st working and have yet to find a way to do this. They say it may be an error within the jquery calendar.
Here is the code.
//var disabledDays = ['3-31-2010', '3-30-2010', '3-29-2010', '3-28-2010', '3-2-2010', '3-1-2010', '4-1-2010' ];
var checkDays = null;
function noWeekendsOrHolidays(date)
{
// optional: ensure that date is date-only, with no time part:
date = new Date( date.getFullYear(), date.getMonth(), date.getDate() );
// no point in checking if today is past the given data:
if ( (new Date()).getTime() > date.getTime() ) return [false,'inthepast'];
if ( checkDays == null )
{
checkDays = [];
// convert disabledDays to a more reasonable JS form:
for ( var d = 0; d < disabledDays.length; ++d )
{
var p = disabledDays[d].split("-");
checkDays[d] = new Date( parseInt(p[2]), parseInt(p[0])-1, parseInt(p[1]) );
}
}
var datetime = date.getTime();
for ( var i = 0; i < checkDays.length; i++)
{
if ( checkDays[i].getTime() == datetime ) return [false,'holiday'];
}
return [true,'']; // default CSS style when date is selectable
}
jQuery(document).ready(function() {
<%
response.write "var theSelectedDay = $.datepicker.parseDate(""y-m-d"", '" & theDate & "');" & vbcr
%>
jQuery('#datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: true,
firstDay: 1,
defaultDate: theSelectedDay,
beforeShowDay: noWeekendsOrHolidays,
onSelect: function(date) {
endDate = date;
startDate = theSelectedDay;
}
});
});
The theSelectedDay is formatted like ['2010-3-1']
I have set the clock back on my computer in order to test this out. It's set on March 1st.
I have a big calendar on the main page and when the user clicks on a day it pops up this datepicker. Like i said, it all works fine for days 2-30 but not for day 1 and 31.
If they choose day 2 (and it was march 2nd) then Monday would not be selectable of course since its a past day.
Hope that helps.
You mean valueOf(), not getTime().

Categories