#169 Add a date time picker to sales/form such user can edit transaction date not in a manual manner

Needs more testing with different date & time formats and sorting out of min.js

application/helpers/dateformat_helper.php

@@ -31,15 +31,15 @@ function dateformat_jquery($php_format)
         'Y' => 'yy',
         'y' => 'y',
         // Time
-        'a' => '',
-        'A' => '',
+        'a' => 'tt',
+        'A' => 'TT',
         'B' => '',
-        'g' => '',
-        'G' => '',
-        'h' => '',
-        'H' => '',
-        'i' => '',
-        's' => '',
+        'g' => 'h',
+        'G' => 'H',
+        'h' => 'hh',
+        'H' => 'HH',
+        'i' => 'mm',
+        's' => 'ss',
         'u' => ''
     );
     $jqueryui_format = "";

application/views/sales/form.php

@@ -14,8 +14,8 @@
 	</div>
 	
 	<div class="field_row clearfix">
-	<?php echo form_label($this->lang->line('sales_date').':', 'date', array('class'=>'required')); ?>
-		<div class='form_field'><?php echo form_input(array('name'=>'date','value'=>date($this->config->item('dateformat') . ' ' . $this->config->item('timeformat'), strtotime($sale_info['sale_time'])), 'class'=>'date'));?>
+	<?php echo form_label($this->lang->line('sales_date').':', 'date'); ?>
+		<div class='form_field'><?php echo form_input(array('name'=>'date','value'=>date($this->config->item('dateformat') . ' ' . $this->config->item('timeformat'), strtotime($sale_info['sale_time'])), 'id'=>'datetime', 'readonly'=>'true'));?>
 		</div>
 	</div>
 	
@@ -24,10 +24,10 @@
 		<div class='form_field'>
 			<?php if (isset($sale_info["invoice_number"]) && !empty($sale_info["invoice_number"]) && 
 				isset($sale_info['customer_id']) && isset($sale_info['email']) && !empty($sale_info['email'])): ?>
-				<?php echo form_input(array('name'=>'invoice_number','size'=>10, 'value'=>$sale_info['invoice_number'], 'id'=>'invoice_number'));?>
+				<?php echo form_input(array('name'=>'invoice_number', 'size'=>10, 'value'=>$sale_info['invoice_number'], 'id'=>'invoice_number'));?>
 				<a id="send_invoice" href="javascript:void(0);"><?=$this->lang->line('sales_send_invoice')?></a>
 			<?php else: ?>
-				<?php echo form_input(array('name'=>'invoice_number','value'=>$sale_info['invoice_number'], 'id'=>'invoice_number'));?>
+				<?php echo form_input(array('name'=>'invoice_number', 'value'=>$sale_info['invoice_number'], 'id'=>'invoice_number'));?>
 			<?php endif; ?>
 		</div>
 	</div>
@@ -49,7 +49,7 @@
 	<div class="field_row clearfix">
 	<?php echo form_label($this->lang->line('sales_comment').':', 'comment'); ?>
 		<div class='form_field'>
-			<?php echo form_textarea(array('name'=>'comment','value'=>$sale_info['comment'],'rows'=>'4','cols'=>'23', 'id'=>'comment'));?>
+			<?php echo form_textarea(array('name'=>'comment', 'value'=>$sale_info['comment'], 'rows'=>'4','cols'=>'23', 'id'=>'comment'));?>
 		</div>
 	</div>
 	
@@ -76,20 +76,19 @@
 </div>
 
 <script type="text/javascript" language="javascript">
-
 $(document).ready(function()
 {	
 	<?php if (isset($sale_info['email'])): ?>
-	$("#send_invoice").click(function(event) {
-		if (confirm("<?php echo $this->lang->line('sales_invoice_confirm') . ' ' . $sale_info['email'] ?>")) {
-			$.get('<?=site_url() . "/sales/send_invoice/" . $sale_info['sale_id']?>',
-					function(response) {
-						tb_remove();
-						post_form_submit(response);
-					}, "json"
-			);	
-		}
-	});
+		$("#send_invoice").click(function(event) {
+			if (confirm("<?php echo $this->lang->line('sales_invoice_confirm') . ' ' . $sale_info['email'] ?>")) {
+				$.get('<?=site_url() . "/sales/send_invoice/" . $sale_info['sale_id']?>',
+						function(response) {
+							tb_remove();
+							post_form_submit(response);
+						}, "json"
+				);	
+			}
+		});
 	<?php endif; ?>
 	
 	$.validator.addMethod("invoice_number", function(value, element)
@@ -108,13 +107,12 @@ $(document).ready(function()
         }).responseText).success;
     }, '<?php echo $this->lang->line("sales_invoice_number_duplicate"); ?>');
 
-	$.validator.addMethod("time", function (value, element) {
-		var stamp = value.split(" ");
-		var validDate = !/Invalid|NaN/.test(new Date(stamp[0]).toString());
-		var validTime = /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(stamp[1]);
-		return this.optional(element) || (validDate && validTime);
-	}, '<?php echo $this->lang->line('sales_date_type'); ?>');
-
+	$('#datetime').datetimepicker({
+		controlType: 'select',
+		oneLine: true,
+		dateFormat: '<?php echo dateformat_jquery($this->config->item("dateformat"));?>',
+		timeFormat: '<?php echo dateformat_jquery($this->config->item("timeformat"));?>'
+	});
 
 	var format_item = function(row)
 	{
@@ -126,22 +124,23 @@ $(document).ready(function()
     	}
 		return result;
 	};
+
 	var autocompleter = $("#customer_id").autocomplete('<?php echo site_url("sales/customer_search"); ?>', 
 	{
-    	minChars:0,
-    	delay:15, 
-    	max:100,
-       	cacheLength: 1,
-        formatItem: format_item,
-        formatResult : format_item
-    });
+		minChars: 0,
+		delay: 15, 
+		max: 100,
+		cacheLength: 1,
+		formatItem: format_item,
+		formatResult : format_item
+	});
 
 	// declare submitHandler as an object.. will be reused
 	var submit_form = function(selected_customer) 
 	{ 
 		$(this).ajaxSubmit(
 		{
-			success:function(response)
+			success: function(response)
 			{
 				tb_remove();
 				post_form_submit(response);
@@ -151,9 +150,10 @@ $(document).ready(function()
 				selected_customer && autocompleter.val(selected_customer);
 				post_form_submit({message: errorThrown});
 			},
-			dataType:'json'
+			dataType: 'json'
 		});
 	};
+
 	$('#sales_edit_form').validate(
 	{
 		submitHandler : function(form)
@@ -167,31 +167,24 @@ $(document).ready(function()
 		wrapper: "li",
 		rules: 
 		{
-			date: 
+			invoice_number:
 			{
-				required:true,
-				time:true
-			},
-			invoice_number: {
 				invoice_number: true
 			}
 		},
 		messages: 
 		{
-			date: 
-			{
-				required: "<?= $this->lang->line('sales_date_required'); ?>",
-				time: "<?= $this->lang->line('sales_date_type'); ?>"
-			}
+
 		}
 	});
+
 	$('#sales_delete_form').submit(function() 
 	{
 		if (confirm('<?php echo $this->lang->line("sales_delete_confirmation"); ?>'))
 		{
 			var id = $("input[name='sale_id']").val();
 			$(this).ajaxSubmit({
-				success:function(response)
+				success: function(response)
 				{
 					tb_remove();
 					set_feedback(response.message,'success_message',false);

css/jquery-ui-timepicker-addon.css

@@ -0,0 +1,27 @@
+.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
+.ui-timepicker-div dl { text-align: left; }
+.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
+.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
+.ui-timepicker-div td { font-size: 90%; }
+.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
+
+.ui-timepicker-rtl{ direction: rtl; }
+.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
+.ui-timepicker-rtl dl dt{ float: right; clear: right; }
+.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
+
+/* Shortened version style */
+.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
+.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
+.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

css/ospos.css

@@ -11,6 +11,7 @@
 @import url(invoice.css);
 @import url(jquery-ui.structure.css);
 @import url(jquery-ui.theme.css);
+@import url(jquery-ui-timepicker-addon.css);
 
 body
 {