Angular JQuery timepicker - javascript

I am shifting from jQuery to Angular. In jQuery we used this http://timepicker.co/
as firefox does not allow HTML5 input time.
I was trying to find the same timepicker for angular (As some of our past data and styles were based on this time picker). But I could not find one.
I dont know how to convert that time picker into directive or some other sort like that.
We need to use the same timepicker. (because our manager) I have seen some other time pickers available in angular.
Can you help ?

try:
EasyTimepicker Directive
A timepicker directive that allows a user to select a time via a dropdown widget.
Click the buttons to increment/decrement hours & minutes or scroll with your mouse.
It's also smart enough to convert invalid input such as '1a' into '1:00 AM'
Built with the awesome AngularJS. Utilizes Bootstrap 3 styling.
Install
Usage
Configuration
The following options can be set either through data attributes on the time input or by overriding the EasyTimepickerConfig constant.
Demo
http://plnkr.co/edit/uA3Ide?p=preview

Related

FullCalendar, display event creation during select

I'm currently using fullcalendar 4 on my website and I'm trying to add an indicator that the user is selecting in the calendar, there do is the background color changing but it's kind of hard to see.
My goal would be to recreate the selectable date part of the demo page, where if you go into the week vue, you can see the event appear during the select.
I'm stuck since full calendar only activates the select function when the select is over so I don't know how to start creating the event at the select start wether it's with an option in the calendar that I haven't found or if there's another way.
Since it's in the demo I though it would be feasible but right now I'm having a hard time with that
This is done by setting the selectMirror option to true.
Documentation: https://fullcalendar.io/docs/v4/selectMirror
Demo: https://codepen.io/ADyson82/pen/RwGBrQP

Looking for JS datepicker modular script that can plug in to custom JS date range picker

(This might not be specific enough for StackOverflow, but I do have actual code samples. If you think it's too vague, let me know in a comment or vote to close.)
Background
I'm designing a date range picker for an internal web application. The way it works is that clicking on an input will pop up a list of pre-defined ranges, similar to how date range selection works on Google results:
Only if a user taps on Custom Range/Date will they get a calendar. There are panels inside the popup, sliding sideways, and they'll see one or two calendars (if range or if single date).
Problem
I'm looking for a date picker script that I can plug into my existing custom date picker class. I'd like to be able to call it from JS, and attach a callback to return the date. There will be no input HTML elements.
A perfect API in my mind would let me do something like this:
var beginDatePicker = new DatePicker({
default: beginDate,
callback: function(event){
// do stuff with returned date
}
})
... .appendChild( beginDatePicker.el.wrapper );
That way I could create a calendar, then use the callback to store the date and animate to second calendar, and then finally place the dates in the hidden inputs.
I can't find any open-source datepicker scripts that are modular though. They all require an input element, but I need to be able to create and destroy the calendars as I go.
Do anyone know of a library/script/class that works in the above manner?
Answer
It doesn't exist, anywhere I can find. The solution is just to take an open source option, fork it, strip out the pieces that I need, and use that.

disable dates in datepicker with orchard

Using orchard 1.6. I've created a form which uses a content type which uses a field (date and time), which allows the user to use a date picker to select the day.
Trouble is the user can select any date. I would like the date to be set for today, and the other dates disabled. How is this possible? thank you for replies
If you wanna know the location of the DateTimeField then just go to following directory :
Orchard.Fields/Views/EditorTemplates/Fields/DateTime.Edit.cshtml
but making change to orchard fields is not a good practice , cause your case is very special.the recommended way to do this is to create your own EditorTemplate and integrate jquery-ui datepicker in your Template view.

jQuery UI datepicker css customization

Let's say I want to display a datepicker. This datepicker represents a disponibility calendar from an hotel room. Knowing this, I want before displaying fetch data from the server to know the disponibility (I know how to do this).
My question is: How can I change the css to show dates with disponibility different from the ones that doesn't have?.
Second Question: How can I disable clicking those ones that doesn't have rooms available.
Example: JetSetter calendar
You can check this page to disable the days you want :
http://davidwalsh.name/jquery-datepicker-disable-days

option to change jquery ui datepicker to just a "yearpicker"

I'm checking datapicker documentation here trying to find a way to change it from a full display date picker to just something where I can pick a year only. But I can't find anything. I tried suggestions found here like this, but it still displays the full view.
.datepicker({changeDay:false, changeMonth:false, changeYear:true})
Can I somehow turn the datapicker to a year picker only?
For my company's website, we used jQuery UI slider instead since year is a single value. In our implementation, we also had to do a year range, a slider also accommodated for that.
http://jqueryui.com/demos/slider/#steps

Categories

Resources