bootstrap-datetime/week picker

A datetime/week picker widget that can be used on a web page. This project is the modification and improvement of another project at https://github.com/eternicode/bootstrap-datepicker/
version 1.4.0 which is developed by Andrew Rowls + contributors.

All documentation in http://bootstrap-datepicker.readthedocs.org/en/stable/ should apply to this project. Here will be explained the modifications/extensions made in this project. There are three major features added to this project:

• Different date format

  This project uses JsSimpleDateFormat library which is developed by me. This library has wider formatting pattern including time that will be used by time picker. The formatting pattern used by this library is similar to that used by Java SimpleDateFormat class and also similar to .NET date time string format. If you use Java or ASP.NET as the server-side code, it's a benefit if we use the same format pattern between client and server.

  To use JsSimpleDateFormat, you must include JsSimpleDateFormat.js script before bootstrap-datepicker.js, like below:

            <script src="./js/JsSimpleDateFormat.min.js"></script>
            <script src="./js/bootstrap-datepicker.min.js"></script>

  If you omit JsSimpleDateFormat.js, datepicker will use the internal format pattern as described at
  http://bootstrap-datepicker.readthedocs.org/en/stable/options.html#format

• Week picker

  Week picker is to select a whole week, instead of a single day. The weekstart option determines the first day of the week. To use week picker, set weekPicker option to true. By default, it's false. The week will be displayed as [first date of week][separator][last date of week]. The default separator is hyphen (-). To use different seperator, set weekPicker option to an object whose separator property, such as:

  weekPicker: { separator: ' upto ' }

  Beside separator property, the object may have two methods: formatWeek and getWeekStart. formatWeek is to format the week more freely. It may ignore separator property. getWeekStart is to parse the string formatted by formatWeek and returns the first date of the week. For example, consider weekstart option is set to sunday, we can use the following code:

         weekPicker: {
            formatWeek: function(startWeekDate, options, $datepicker) {
              var df = new JsSimpleDateFormat("'Week-'W of MMM yyyy");
              return df.format(startWeekDate);
            },
            getWeekStart: function(weekString, options, $datepicker) {
              var df = new JsSimpleDateFormat("'Week-'W of MMM yyyy");
              df.isLenient = true;
              return df.parse(weekString);
            }
         }
         

• Time picker

  Beside date, this widget can set time. Some coditions in the use of time:

  • It must use JsSimpleDateFormat.
  • weekPicker and multidate option must be set to false.
  • Time picker will appear if format pattern includes H, k, K, h, m or s. These are the format pattern for time.
  • If s is specified in format string then hour, minute and second picker will appear. If m is specified but no s then only hour and minute will appear. If no m and s is in format string then only hour will appear. The AM/PM button will appear if you use K or h in format string.
  • If time picker appears then there is nowBtn option that can be used. It's like todayBtn except it will also set the time to the current time. The possible values for nowBtn are the same as those for todayBtn option.

• Different Date Range Behavior

  If either side (start or end date) is blank (null), it means infinite for that side. Range visualization is also available for month/year view. There is a new option which applies to range, disableIfExceedRange. If this option is set to true (by default it's false) then the start date cannot be set more than the end date and the end date cannot be set less than the start date. If this option is false then if the start date is set more than the end date, it will move the end date to the same date as the start date.