disable dates in datepicker with orchard - javascript

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.

Related

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.

Angular JQuery timepicker

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

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

best way to set jquery datepicker dates when user paging through data

I have a report where I am using jquery ui's datepicker for the start and end dates for the report data.
When a user pages through the data, I want the maintain the date ranges on the picker.
How can I do this?
Say I modify the url's for the next/previous buttons based on the values of the datepicker, how would I reset the datepicker values?
I would have to do it programatically i.e. inject javascript code that set's the datepicker, is that the best way?
I am using asp.net mvc
The DatePicker control is bound to an input box, if you set the value of that input box to a date, the DatePicker will use that value when displaying it's UI.
So you could use the querystring to store the date range, and then when the page loads; parse the query string and set the values to the input box. Then initialise your DatePicker.

Categories

Resources