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
Related
I believe this is a relatively simple question (a JavaScript noob here), but I can't seem to find a thread for this particular date function. I am doing website migration for an academic society from a PHP-based site to a drupal CMS. Some of the PHP has obviously broken and I'm trying to replace simple scripts with Javascript. One issue that is giving me a lot of trouble is how to get a text to appear only AFTER a certain date. In PHP my functioning code is:
<?php if (date('YmdH') > 2018011710 ) { ?>
<p class="error">Please note that the deadline for submitting proposals has passed.</p>
<?php } ?>
So I need something in JavaScript to do the same. Here is what I came up with (I apologize in advance for my sloppy code as I'm a beginner with JavaScript):
First CSS to hide the DIV:
<style type="text/css">
.DateDiv { display: none;}
</style>
Then the div itself:
<div class="DateDiv">
<h3>Please note that the deadline for submitting proposals has passed.</h3>
</div>
Finally, my JavaScript, which is not working:
<script>
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
// show only if current date is after January 16, 20018
if (today > 0, 16, 2018) {
$(".DateDiv").show();
}
});
</script>
If anyone could help me sort this out I would be very grateful. If I'm going about this in a manner that is more complicated than it needs to be I'd also appreciate any advice.
Thanks in advance.
PS: I am not asking to compare two dates, but to display a text after a certain date.
you just might want to do something like this:
if (new Date() >= new Date(2018, 0, 16))
months always start at 0 while days start at 1. don't ask why.
this is how the constructor is defined:
new Date(year, monthIndex [, day [, hour [, minutes [, seconds [, milliseconds]]]]]);
just go here for in-depth details about Date()
//show only if current date is after January 16, 20018
var date_to_check_with = new Date("20180116").getTime();
//.getTime() will give time in milliseconds (epoch time)
var current_date = new Date().getTime();
console.log(date_to_check_with < current_date);
Do we have any available calendar widgets in jquery/javascript which helps us to select a week rather than dates.
My application has 2 dropdowns, From week and To week.
This is something that you need:
$('#weeklyDatePicker').on('dp.change', function (e) {
var value = $("#weeklyDatePicker").val();
var firstDate = moment(value, "MM-DD-YYYY").day(0).format("MM-DD-YYYY");
var lastDate = moment(value, "MM-DD-YYYY").day(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(firstDate + " - " + lastDate);
});
for refrence you can check this link
https://jsfiddle.net/Prakash_Thete/9usq3enn/
This may help you
I know you are fedup with these kind of repeated questions but still now i didn't find answer for my question so please help me to solve this.. Thanks in advance.
html is :
var start="10:30 PM";
$scope.edit={}
frtime=start.split("PM")[0];
frtime = frtime.trim();
frtime= $filter('date')(frtime, "HH:mm");
$scope.edit.fromtime=new Date("2010-12-28T"+frtime+":00");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input type="time" ng-model="edit.fromtime">
It is showing some time in the input type field in html. But i need the 10.30 PM in the input field.
The JS Date object has methods for setting the hours, minutes, etc:
var newDate = new Date();
newDate.setHours(10,30,0)
Just create a new date, then set it to whatever value you need to:
Plunker
All the methods are here.
Your version of angularjs is too old:
JS:
angular.module('timeExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(1970, 0, 1, 14, 57, 0)
};
}]);
HTML:
<input type="time" id="exampleInput" name="input" ng-model="example.value" />
V1.2.23 => It does not work
http://plnkr.co/edit/AA9maTSXiguuglrj1yPJ?p=preview (Example)
V1.3.0 => Do work
http://plnkr.co/edit/8a8laopSX0S0AiW8E6OE?p=preview (Example)
We can write a common method like below:
getFormatDate = function (val) { // assuming val is date like "/Date(946673340000)/"
if (val != undefined) {
date = new Date(val.match(/\d+/)[0] * 1); // creating a date object from val
return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes());
}
}
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");
});
My HTML is dynamic and like that:
<div class="date">
<strong>21</strong>
<span class="month">Jan</span>
<strong class="year">15</strong>
<span class="details"></span>
</div>
And I want get this time and print console via jQuery:
var selectedDate = $('.date');
console.log(selectedDate);
But result is not correct. How can I fix it?
EDIT:
Ok, I solve my problem with that:
console.log(selectedDate.text());
Now, I want add class if event is a past event.
if (selectedDate < now) {
$('.event').addClass('past');
}
But not any error or result.
Try this:
selectedDate = $(".date > .month").text() + " "
+ $(".date > strong:nth-child(1)").text() +
" 20"+ $(".date > .year").text();
console.log(selectedDate); // Jan 21 2015
You could, of course, re-arrange those to output the date according to the format you want -