We Keep Coding

Get date from bootstrap-datepicker and print separately

I am using Bootstrap Date picker. I want to get date value(20-Sep-19) and print it in three different div's(so as i can style them differently).
<div class="input-group date">
<input type="hidden" id="date-input" value="20-Sep-19" class="form-control">
<div id="div1">20 </div>
<div id="div2">Sep'19</div>
<div id="div3">Wednesday</div>
</div>
$(function(){
$('.input-group.date').datepicker({
format: 'dd-M-yy',
todayHighlight: true,
autoclose: true});
});
I have tried some jquery but doesn't work.
$(document).on("change", "#date-input", function () {
var date = new Date($('#date-input').val());
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
alert([day, month, year].join('/'));
});
Anyone know how this can be achieved. Thanks in Advance.

Check out this fiddle for a quick implementation.
Your Javascript will need to parse the data sent back from the dateChange event of the datepicker element
picker.on("changeDate", function(e) {
div1.text(e.date.getDate());
var month = getMonthName(e.date.getMonth());
var year = ("" + e.date.getYear()).substr(1, 3);
div2.text(month + " '" + year);
div3.text(getDayOfWeek(e.date.getDay()));
});
The getMonthName and getDayOfWeek functions simply take in an integer and return the corresponding month/day.
From the sounds of things, you're relatively new to Javascript. I would highly recommend that you fully understand how to utilize Javascript and jQuery.
Please see the following resources for more information:
* JS Date and utilities
* jQuery .text()
* Bootstrap-datepicker changeDate documentation

Pre-populate Form Field With The Internal Millisecond Clock From Javascript

I have a form on my website that I need to pre-populate with the current unix millisecond timestamp.
I do have another form field (in the same form) which successfully pre-populates the Date (Month, Day, Year) with the following code:
<div>DATE<br><input name="date" id="date"></div>
<script>
(function() {
var days = ['','','','','','',''];
var months =
['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
Date.prototype.getMonthName = function() {
return months[ this.getMonth() ]; };
Date.prototype.getDayName = function() {
return days[ this.getDay() ]; }; })();
var now = new Date();
var day = now.getDayName();
var month = now.getMonthName();
document.getElementById('date').value = day + ' ' + month + ' ' +
now.getDate() + ', ' + now.getFullYear();
</script>
However... I'm not having the same luck when attempting to pre-populate a second form field with the Unix Millisecond timestamp using this code:
<div>TIMESTAMP URL<br><input name="timeStampURL" id="timeStampURL"></div>
<script>
var d = new Date();
document.getElementById('timeStampURL').innerHTML = d.getTime();
</script>
I don't understand why the two codes behave differently that way, but any advice as to how to get that script to pre-populate the field would be appreciated.

Input elements don't have any content, so setting their innerHTML property does nothing. Your first function is setting the value attribute, so should your second:
function showTimeValue() {
document.getElementById('timeValue').value = Date.now();
}
window.onload = showTimeValue;
<input id="timeValue">
<button onclick="showTimeValue()">Update time value</button>
Each time you run the code, you'll get an updated value.

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.

How to select current day when user was in other months in Datepicker calender by using a clickable button.?

I have an event calender in my magento website.
I need to redirect users to current date while they are in other months.
I have a button called TODAY to write the click event.
EX : now I am in month of march, I want to go to February by clicking the button TODAY.
Please see the image I will post here.
I am unable to publish an image, if any one nee an image for this I can send it to you.
Great pleasure if any one can help me on this. Thank you.
EDIT
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
jQuery(function() {
var jqdpopup = jQuery('#event_popup').dialog({autoOpen: false});
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
myDate.getFullYear();
jQuery("#date_input").val(prettyDate);
jQuery('.eventslisting_title span').html(prettyDate);
getevents(prettyDate);
var datesArray=["11/02/2014","11/03/2014"];
jQuery(function(){
jQuery('#event_calender').datepicker({
inline: true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+
date.getDate()+ '/' +
date.getFullYear();
return [true,jQuery.inArray(theday, datesArray) >=0?"eventDate":''];
},
onSelect: function(date, obj){
jQuery('#date_input').val(date); //Updates value of of your input
jQuery('.eventslisting_title span').html(date);
getevents(date);
jqdpopup.dialog( "open" );
}
});

On today button click event, write this code
$('#event_calender').datepicker('setDate', 'today');

Check out the setDate method in the datepicker api: http://api.jqueryui.com/datepicker/#method-setDate
To set the date by clicking a button do this:
jQuery("#buttonID").click(function(){
jQuery('#event_calender').datepicker( "setDate", "today");
});

UI Datepicker: choosing date overwrites existing settings

I am trying to write a custom datepicker, where the default drop downs for months and year ranges (enabled through changeMonth and changeYear options) are replaced by custom drop downs. It is something like this:
Fiddle: http://jsfiddle.net/gGV3v/
$("#myId").datepicker({
...default settings...
beforeShow: function() {
...here I replace the default dropdowns by custom dropdowns...
...something like...
$(".ui-datepicker-month").replaceWith("#custom-html-block");
$(".ui-datepicker-year").replaceWith("#another-custom-html-block");
}
});
On choosing either month or year from the custom dropdowns, I want to change the date in the view accordingly. So I construct the date string from the current month and year (the date for the new month/year combo defaults to 1 here), and I call
$("#custom-html-block .custom-dropdown-option").on("click",function() {
...construct newDateString...
$("#myId").datepicker("setDate",newDateString)
});
$("#another-custom-html-block .custom-dropdown-option").on("click",function() {
...construct newDateString...
$("#myId").datepicker("setDate",newDateString)
});
I want the span with text foo to remain intact when setting the new date programmatically on clicking it.
The problem is: it wipes off the custom drop downs and the default ones come again. I tried to do things like this:
$("#myId").datepicker($.extend({setDate: newDateString},oldSettings))
But it still doesn't work. How do I make this work?

You can set the value of the function $.datepicker._generateMonthYearHeader, the downside it that will be global for all datepicker in the page.
The sample is below:
$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
secondary, monthNames, monthNamesShort) {
var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
changeMonth = this._get(inst, "changeMonth"),
changeYear = this._get(inst, "changeYear"),
showMonthAfterYear = this._get(inst, "showMonthAfterYear"),
html = "<div class='ui-datepicker-title'>",
monthHtml = "";
// year selection
if ( !inst.yearshtml ) {
inst.yearshtml = "";
if (secondary || !changeYear) {
html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
} else {
// determine range of years to display
years = this._get(inst, "yearRange").split(":");
thisYear = new Date().getFullYear();
determineYear = function(value) {
var year = (value.match(/c[+\-].*/) ? drawYear + parseInt(value.substring(1), 10) :
(value.match(/[+\-].*/) ? thisYear + parseInt(value, 10) :
parseInt(value, 10)));
return (isNaN(year) ? thisYear : year);
};
year = determineYear(years[0]);
endYear = Math.max(year, determineYear(years[1] || ""));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
inst.yearshtml += "<span class = 'dummy'>Foo</span> <select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>"
for (; year <= endYear; year++) {
inst.yearshtml += "<option value='" + year + "'" +
(year === drawYear ? " selected='selected'" : "") +
">" + year + "</option>";
}
inst.yearshtml += "</select>";
html += inst.yearshtml;
inst.yearshtml = null;
}
}
And your fiddle: http://jsfiddle.net/gGV3v/2/
UPDATE:
Without the buttons, and using a better approach, now you have control of all generated HTML:
var oldGenerateHTML = $.datepicker._generateHTML;
function newGenerateHTML(inst) {
var html = oldGenerateHTML.call(this, inst);
var $html = $(html);
$html.find('[data-handler=prev]').remove();
$html.find('[data-handler=next]').remove();
$html.find('[data-handler=selectMonth]').replaceWith('<span class="dummy">Foo</span>');
return $html;
}
$.datepicker._generateHTML = newGenerateHTML;
Fiddle also updated: http://jsfiddle.net/gGV3v/4/

In general this is why extend sucks. The parent (in your case datepicker) doesn't know anything about childs (your custom html). Everytime it refresh the view, your changes are lost. This problem is usually solved using composition. The goal is to create your own widget (I think that was the term in jQuery) that have datepicker as a local variable and to control _generateMonthYearHeader function calls. It's easy to say in theory but in practice (specially case with jQuery) is hard to achive. Easier solution will be to proxy the function.
//preserve _generateHTML because after it finish, html is visible and .ui-datepicker-month and .ui-datepicker-year are in dom tree
fn = $.datepicker._generateHTML; //preserve original function
$.datepicker._generateHTML = function(inst) {
//call original function
fn.call(this, inst);
//do custom changes
//you'll need better selectors in case of multiple datepicker instances
$(".ui-datepicker-month").replaceWith("#custom-html-block");
$(".ui-datepicker-year").replaceWith("#another-custom-html-block");
}
Personally I dislike this approach (I prefer composition as I said) but in your case it'll be easier to implement. The reason its easier is because generateMonthYearHeader is called from many different functions.
P.S. Not tested