This project is read-only.

Introduction

The DateTimeRange field is an addition to http://orchard.codeplex.com/ that adds a period based field with a start and end. A typical example to use this field type is when creating an Event Content Type where the event can start at a specific date and/or time and ends at a specific date and/or time.

Usage

  1. Create a content type of your likings and add a DateTimeRange field to it.
  2. Configure the field (see configuration below)
  3. Create a content item and use the jquery based date/time picker to select a date and/or time or you can just type in the textbox. Note that the date and time are in one text box rather than a seperate box for the date and its time.

Automation

There's a correlation between the start and end date/time. If you select for example an end date first, then you can't select a start date later than the end date.
Note: These correlation rules are developed using javascript based on the datetimepicker events. Tbh, this isn't my strongest area and I expect the quality of these rules to improve over time :)

Configuration


While configuring the DateTimeRange field you can provide a help text and indicate if the field is required or not.
You can also select between the following display modes:
  • Date and Time: You can enter or select a date and time in the start and end field.
  • Date Only: You can only enter or select a date in the start and end field.
  • Time Only: You can only enter or select a time in the start and end field.
  • Single Date and Time: You can enter a date and time in the start field and only a time in the end field. This one is useful if you know that the end has to be on the same day as the start.
Note: I have two outstanding issues with localization of the scripts
- http://orchard.codeplex.com/discussions/346873
- https://github.com/trentrichardson/jQuery-Timepicker-Addon/issues/326#issuecomment-4223992
As soon as they're resolved this will work properly

Localization

Each DateTimeRange field can be localized differently from the Orchard Culture settings. If you leave the "Culture" configuration value of the field blank, it will use the Culture Setting of Orchard (under Settings > General). If you fill in a value like "nl-BE" or "nl" it will try to find the localized versions of the date and time pickers. It is possible that there's no translation for your country/language, in that case, have a look at the scripts folder and add just copy a file and translate it.

Background

I started the module originally from the Contrib.DateTimeField who is included by defaulf in Orchard 1.4 onwards. I wasn't too happy with the default Time Picker so I started using the combined datetimepicker from http://trentrichardson.com/examples/timepicker/.

Note that this is my first orchard module and I assume that people will have comments here or there on it, feel free to address these so we can improve it.

Last edited Mar 1, 2012 at 4:13 PM by eriklenaerts, version 7

Comments

myprm Apr 27, 2012 at 5:20 PM 
You don't know if this control will work with the Projections Module do you? Specifically, I would like to set a filter to only display dates greater than today for an Event Content Type where the Date Time Range control you developed is being used as the Event Date Field. I appreciate your work on this, and like it much more than the OOTB control.