new option: viewSelect / implementation of meridian view

Author: smalot

css/datetimepicker.css

@@ -247,11 +247,19 @@
   height: 26px;
   line-height: 26px;
 }
+.datetimepicker .datetimepicker-hours table tr td span.hour_am,
+.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
+  width: 14.6%;
+}
+.datetimepicker .datetimepicker-hours fieldset legend,
+.datetimepicker .datetimepicker-minutes fieldset legend {
+  margin-bottom: inherit;
+  line-height: 30px;
+}
 .datetimepicker .datetimepicker-minutes span {
   height: 26px;
   line-height: 26px;
 }
-
 .datetimepicker table tr td span:hover {
   background: #eeeeee;
 }

sample/index.html

@@ -13,7 +13,7 @@
             <legend>Test</legend>
             <div class="control-group">
                 <label class="control-label">DateTime Picking</label>
-                <div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - hh:ii" data-link-field="dtp_input1">
+                <div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                     <input size="16" type="text" value="" readonly>
                     <span class="add-on"><i class="icon-remove"></i></span>
 					<span class="add-on"><i class="icon-th"></i></span>
@@ -54,7 +54,8 @@
 		autoclose: 1,
 		todayHighlight: 1,
 		startView: 2,
-		forceParse: 0
+		forceParse: 0,
+        showMeridian: 1
     });
 	/*$('.form_date').datetimepicker({
         language:  'fr',
@@ -80,4 +81,4 @@
 </script>
 
 </body>
-</html>
+</html>

screenshot/standard_day_meridian.png

@@ -5,7 +5,7 @@ module('Component', {
                                 '<span class="add-on"><i class="icon-th"></i></span>'+
                             '</div>')
                         .appendTo('#qunit-fixture')
-                        .datetimepicker({format: "dd-mm-yyyy"});
+                        .datetimepicker({format: "dd-mm-yyyy", viewSelect: 2});
         this.input = this.component.find('input');
         this.addon = this.component.find('.add-on');
         this.dp = this.component.data('datetimepicker')

screenshot/standard_hour_meridian.png

@@ -5,7 +5,7 @@ module('Mouse Navigation 2011', {
         */
         this.input = $('<input type="text" value="31-03-2011">')
                         .appendTo('#qunit-fixture')
-                        .datetimepicker({format: "dd-mm-yyyy"})
+                        .datetimepicker({format: "dd-mm-yyyy", viewSelect: 2})
                         .focus(); // Activate for visibility checks
         this.dp = this.input.data('datetimepicker')
         this.picker = this.dp.picker;

tests/suites/component.js

@@ -10,7 +10,7 @@ module('Mouse Navigation 2012', {
         */
         this.input = $('<input type="text" value="31-03-2012">')
                         .appendTo('#qunit-fixture')
-                        .datetimepicker({format: "dd-mm-yyyy"})
+                        .datetimepicker({format: "dd-mm-yyyy", viewSelect: 2})
                         .focus(); // Activate for visibility checks
         this.dp = this.input.data('datetimepicker')
         this.picker = this.dp.picker;

tests/suites/mouse_navigation/2011.js

@@ -17,7 +17,8 @@ test('Autoclose', function(){
                 .datetimepicker({
                     format: 'yyyy-mm-dd',
                     autoclose: true,
-					minView: 2
+					minView: 2,
+                    viewSelect: 2
                 }),
         dp = input.data('datetimepicker'),
         picker = dp.picker,
@@ -41,7 +42,8 @@ test('Startview: year view (integer)', function(){
                 .val('2012-03-05')
                 .datetimepicker({
                     format: 'yyyy-mm-dd',
-                    startView: 3
+                    startView: 3,
+                    viewSelect: 2
                 }),
         dp = input.data('datetimepicker'),
         picker = dp.picker,
@@ -59,7 +61,8 @@ test('Startview: year view (string)', function(){
                 .val('2012-03-05')
                 .datetimepicker({
                     format: 'yyyy-mm-dd',
-                    startView: 'year'
+                    startView: 'year',
+                    viewSelect: 2
                 }),
         dp = input.data('datetimepicker'),
         picker = dp.picker,
@@ -292,7 +295,8 @@ test('startDate: Custom value', function(){
                 .datetimepicker({
                     format: 'yyyy-mm-dd',
                     startView: 2,
-                    startDate: "2013-01-24 15:30"
+                    startDate: "2013-01-24 15:30",
+                    viewSelect: 2
                 }),
         dp = input.data('datetimepicker'),
         picker = dp.picker,
@@ -320,7 +324,8 @@ test('startDate: Custom value', function(){
                 .datetimepicker({
                     format: 'yyyy-mm-dd',
                     startView: 2,
-                    startDate: "2013-01-24 15:30"
+                    startDate: "2013-01-24 15:30",
+                    viewSelect: 2
                 }),
         dp = input.data('datetimepicker'),
         picker = dp.picker,
@@ -348,7 +353,8 @@ test('endDate: Custom value', function(){
                 .datetimepicker({
                     format: 'yyyy-mm-dd',
                     startView: 2,
-                    endDate: "2013-01-24 15:30"
+                    endDate: "2013-01-24 15:30",
+                    viewSelect: 2
                 }),
         dp = input.data('datetimepicker'),
         picker = dp.picker,