We are using Bootstrap timepicker which can we be found here
Now we are using it like this $('#timepicker1').timepicker();
So it is showing timepicker in this way
Now we have some dependencies on the time format So what we want is the hour part in the if it has value in single digit suppose 8 So it should display as 08.
I am looking at the framework options but didn't find any.
$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
var hours=e.time.hours, //Returns a string
min=e.time.minutes,
merdian=e.time.meridian;
if(hours.length==1){
$('#timepicker1').timepicker('setTime', '0'+hours+':'+min+' '+merdian);
}
I think this should help. :)
Hope I am not too late. Try using the TimePicker's change method:
$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
var timePicked = $('#timepicker1').val();
if(timePicked.length < 8)
$('#timepicker1').val("0" + timePicked);
});
I've looked at it, as that particular picker is no longer maintained and doesn't have the functionality you seek it looks like you are going to have to fork the project and get your hands dirty implementing the styling. Or use another picker.
Personally I'd timebox this to say 1 hour and see if you can get it done if you are short of time, otherwise use another component.
$('#timepicker1').timepicker().on('changeTime.timepicker', function(e) {
var hours=e.time.hours, //Returns an integer
min=e.time.minutes,
merdian=e.time.meridian;
if(hours < 10) {
$(e.currentTarget).val('0' + hours + ':' + min+' '+merdian);
}
});
I had the same issue. But I have created a code for time picker. I will be very helpful for multiple time picker also.
This code works for 01:00:00 that means H:i:s
$('.timepicker').timepicker().on('changeTime.timepicker', function (e) {
let timePicked = $(this).val();
(timePicked.length < 8) ? $(this).val("0" + timePicked) : '';
});
This code works for only H:i
$('.timepicker').timepicker().on('changeTime.timepicker', function (e) {
let timePicked = $(this).val();
(timePicked.length < 5) ? $(this).val("0" + timePicked) : '';
});
Related
I'm trying to make simple five star rating system using Twitter Bootstrap 3 i jQuery. For now, I'm trying to set .hover() and .mouseout() events using counter by writing this code that doesn't work:
var i;
for (i = 1; i <= 5; i++) {
$('#overall_rating_' + i).hover(function(){
$('#overall_rating_' + i).removeClass("glyphicon-star-empty").addClass("glyphicon-star");
});
$('#overall_rating_' + i).mouseout(function(){
$('#overall_rating_' + i).removeClass("glyphicon-star").addClass("glyphicon-star-empty");
});
}
Trying to highlight current and previous stars on mouseover. The code is not complete, it would be accompanied by additional sub-counters, but this part doesn't work for now. Any better methods are welcome. What's broken here?
Try something more like this
$('[id^=overall_rating_]').hover(function(){
$(this).toggleClass("glyphicon-star-empty glyphicon-star");
});
FIDDLE
Edited to fit the comments, working on all previous stars etc.
var starz = $('[id^=overall_rating_]').hover(function(){
starz.filter(':lt('+$(this).index()+')')
.add(this)
.toggleClass("glyphicon-star-empty glyphicon-star");
});
FIDDLE
You need to add anonymous functional call to closure i variable:
var i;
for (i = 1; i <= 5; i++) {
( function( i ) {
$('#overall_rating_'+i).hover(function(){
$('#overall_rating_' + i).removeClass("glyphicon-star-empty").addClass("glyphicon-star");
});
$('#overall_rating_'+i).mouseout(function(){
$('#overall_rating_' + i).removeClass("glyphicon-star").addClass("glyphicon-star-empty");
});
})( i );
}
From the comment you left on adeneo's answer, this is what you really need (it could probably be optimized a bit):
$(".stars").hover(function() {
$(this).removeClass("glyphicon-star-empty")
$(this).addClass("glyphicon-star");
$(this).prevAll().removeClass("glyphicon-star-empty")
$(this).prevAll().addClass("glyphicon-star");
}, function() {
$(".stars").removeClass("glyphicon-star")
$(".stars").addClass("glyphicon-star-empty");
});
DEMO
I have two drop down boxes that represent year intervals. The user will select a year from the first one (say 2002), and the next drop down box will automatically be filled with years that equal or are greater than the first (2002 and above). I believe I have the correct javascript code (year.js).
Here it is:
$("#first").change(function(){
var val = $("#first option:selected").html();
$("#second").html("");
var d = new Date();
var n = d.getFullYear();
for (i=val; i<=n;i++){
$("#second").append("<option>" + i + "</option>");
}
});
Here is part of my html form code:
<body>
<script src="year.js"></script>
<select id= "first">
// Here, I gather my years from my database
</select>
<select id= "second">
</select>
When I run this, Nothing happens with my second drop down menu. Do I need to load something else into my code like JQuery? If so, how do I do that? Sorry, I am not very familiar with JQuery. Any help would be greatly appreciated.
Yeah you need to load jQuery library to use jQuery function.
you must load the jQuery library before using it's function.
example
<script src="jquery.js"></script> //a local version
or
<script src="http://code.jquery.com/jquery-latest.min.js.js"></script>
<script src="year.js"></script>
Download jQuery library from http://jquery.com/download/
Updated after OP's comment about http://jsfiddle.net/YNuna/1/
you have laoded jQuery library in fiddle.I have marked it with red color in the image below.
also wrap you code in $(document).ready(function ()
$(document).ready(function () {
$("#first").change(function () {
var val = $("#first option:selected").html();
$("#second").html("");
var d = new Date();
var n = d.getFullYear();
for (i = val; i <= n; i++) {
$("#second").append("<option>" + i + "</option>");
}
});
});
If you're copy-pasting javascript code from anywhere and you see a $ sign, a good rule of thumb is that it uses jQuery.
See here for adding it to your page: http://learn.jquery.com/about-jquery/how-jquery-works/
Sorry, i am not sure if I am asking the question correctly. When a date is changed by a user the date count down changes on the page. If the date is changed more than once it flashes all date changes. I guess it is storing the previous information somewhere. I have tried clearing the vars.
var deal_yeax = '';
as I would do in php with no luck
$('#deal_end').focusout(function() {
var deal_end = $("#deal_end").val();
var array = deal_end .split('-');
var deal_montx = array[0];
var deal_dax = array[1];
var deal_yeax = array[2];
deal_montx = deal_montx - 1;
$(function(){
ts = new Date(deal_yeax , deal_montx , deal_dax );
$(".h").countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds){
message_days = (days);
var message_hours = (hours);
$(".message_hours").text(message_hours + " Hours");
var message_minutes = (minutes);
$(".message_minutes").text(message_minutes + " Minutes");
var message_seconds = (seconds);
// Creat the display
if ( message_days < 1 && message_hours < 1 ) { $(".message_seconds").text(message_seconds + " Seconds"); }
else if ( message_days < 1 && message_hours > 1 ) { }
else if ( message_days == 1 ) { $(".message_days").text(message_days + " Day"); }
else { $(".message_days").text(message_days + " Days"); }
if ( message_days < 1 && message_hours < 1 && message_minutes < 1 && seconds < 1 ) {
$(".hide_my_buy_button").fadeOut("fast");
}
}
});
});
});
Everytime you "focusout" from #deal_end, you'll attach a countdown event to .h. Without knowing exactly how countdown(...) works (It'll be good if you provide the source so we can provide more help!), one way to fix the issue maybe to use JQuery's unbind(...) function to remove existing listeners on an event before adding a new one to it.
Here's an example on the issue:
<!-- HTML -->
<div>
<input id="text" />
<button id="clicker" />
</div>
<!-- Javascript -->
$('#text').focusout(function() {
var text = this.value;
// Everytime #text is "focused out", a new event is registered with #clicker.
$('#clicker').click(function() {
console.log('Value: ' + text);
});
});
... and here's how to solve the issue (It's just one of the many ways. This way is probably not the most elegant but anyhow.)
$('#text').focusout(function() {
var text = this.value;
$('#clicker').unbind('click');
// Everytime #text is "focused out", a new event is registered with #clicker.
$('#clicker').click(function() {
console.log('Value: ' + text);
});
});
Bottom line: It seems focusout(...) is adding a new countdown everytime it is triggered. That might be the problem you're having.
Not sure if this helps? Lemme know.
P.S. JSFiddle to go with it: http://jsfiddle.net/PE9eW/
The problem seems to be with .countdown function that you are using in your code to flash the date changes. When you assign a new count down object to $(".h") the plugin or the function probably assign some event handler or interval to it, but it doesn't seem to clear the old ones when it is called again and that is why it flashing all the dates for each countdown. So you will have to do it manually. I am not sure if you are using an external plugin or is it your own function but what you need to do is to clear the existing events or intervals that is assigned to your element when you call the function. I can be more helpful if you tell me which plugin you are using or maybe show the code if it is your own function. (referring to .countdown() )
im trying to write a script to change my body background based on the whether its am or pm, I have the following, only its not working, can anybody see why?
<!-- Change background -->
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
if (document.body) {
document.body.background = "images/backgrounds/day.jpg";
}
}
else {
if (document.body) {
document.body.background = "images/backgrounds/night.jpg";
}
}
<!-- Change background -->
A good idea would be to actually use jQuery selectors and modify the CSS:
$('body').css({
background: 'url(yourUrl)'
});
there maybe several problems with this
1) I can't seem to access those two images. Are they actually at the path you specified?
http://int.test.venndigital.co.uk/correlatesearch/_includes/images/backgrounds/day.jpg
http://int.test.venndigital.co.uk/correlatesearch/_includes/images/backgrounds/night.jpg
This should be what you need. You should really try to learn javascript instead of just asking people to write it for you, though. Either that or hire someone else to do the job.
$('body').css('background-image', function(){
var url, hour = new Date().getHours();
if (hour > 7 && hour < 20) {
return 'http://example.com/day.jpg';
} else {
return 'http://example.com/night.jpg';
}
});
I have many events on a day, and it works as expected but now looking at the month view, my calendar grid is much taller that expected. I'd like to hide some of these events from the month view, like a summary with a visual que that there are more on this day than can be shown.
I can use eventRender and return false, but i would like to know how many events are on a given day, so i can limit the rendering to about 4, then perhaps i would add an event that says " more ... "
So the question may be : how to count the events on a given date ?
or is this more like a feature request to expose a max counter for month view ?
thanks
As of FullCalendar 2.1.0, this feature is included, just use:
$('#calendarBlock').fullCalendar({
eventLimit: true
[...]
});
Demo: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html
Documentation: http://fullcalendar.io/docs/display/eventLimit/
I have a similar requirement and was thinking of doing something like this:
in json feed, I would return special events that contain a count of events for each day.
Using appropriate full calendar eventRender callback, I would only display these special total count events depending on view by returning false in eventRender() for any events I don't want to see.
I haven't implemented this yet, but perhaps it can be a valid avenue. Correct me if I'm wrong.
This buggy (mostly abandoned) plugin does exactly what you're asking for. Check it out, and feel free to contribute. Warning: It is a hack, but fullcalendar itself has an API that needs a lot of work. Most of the important parts are trapped in a closure, which makes it very difficult to extend. There really is no way to accomplish this without hackery, unless you want to edit the plugin's source code.
That being said, this is the closest I have found to what you are asking for: https://github.com/lyconic/fullcalendar/tree/view-more
currently not possible. see feature request:
http://code.google.com/p/fullcalendar/issues/detail?id=304
You don't need to take much effort on taking the total count of events.
I have got a simple way to count total events on my fullCalendar. In the eventAfterAllRender , write something like this,
eventAfterAllRender: function(view) {
var allevents = $('#calendar').fullCalendar('clientEvents');
var countevents = 0;
if( allevents.length ) {
countevents = countevents + allevents.length;
}
if(!countevents) {
// alert('event count is'+countevents);
console.log('event count is',countevents);
}
}
-where calendar is my calendar #
This is all my way of doing. I am taking left from here. But I am sure, it is not that harder if you try something on the loading: function() of the fullCalendar to limit the number of events according to your wish.
Thanks though.
I did something like this:
function(start, end, callback) {
var viewName = $("#calendar").fullCalendar('getView');
var startTime = Math.round(start.getTime() / 1000);
var endTime = Math.round(end.getTime() / 1000);
MyWebService.MyWebMethod.GetEventsByView(startTime, endTime, viewName.name,
function(args) {
callback(args);
},
function(error) {
var e = error;
}
);
}
Here the GetEventsByView method returns a grouped set for month view and detailed set for agendaWeek and day views. But for this to work correctly, I had to set lazyFetching:false for the calendar.
I am doing like this
Css:
.MaxHght
{
height:16px;
}
.viewMore
{
float:right;
color: rgb(219, 104, 28);
cursor:pointer;
}
plugin code
dayClick: function (date, allDay, jsEvent, view) {
$('#fullCalendar').fullCalendar('changeView', 'agendaDay').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
},
eventRender: function (event, element, view) {
element.qtip({
content: event.QText,
position: {
my: 'CenterBottom',
at:'TopCenter'
},
style: {
tip: 'bottomMiddle'
}
});
$(element).removeClass('MaxHght');
if (view.name == 'month') {
$(element).addClass('MaxHght');
var year = event.start.getFullYear(), month = event.start.getMonth() + 1, date = event.start.getDate();
var result = year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
$(element).addClass(result);
var ele = $('td[data-date="' + result + '"]'),count=$('.' + result).length;
$(ele).find('.viewMore').remove();
if ( count> 3) {
$('.' + result + ':gt(2)').remove();
$(ele).find('.fc-day-number').after('<a class="viewMore"> More</a>');
}
}
},
eventAfterAllRender: function (view) {
if (view.name == 'month') {
$('td.fc-day').each(function () {
var EventCount = $('.' + $(this).attr('data-date')).length;
if (EventCount == 0)
$(this).find('.viewMore').remove();
});
}
},