Tema: Validar y dar formato a Datebox jquery
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/04/2015, 15:58
aedsistema
 
Fecha de Ingreso: abril-2015
Mensajes: 13
Antigüedad: 9 años, 1 mes
Puntos: 0
Validar y dar formato a Datebox jquery
hola buenas tardes a todos los foristas bueno les comento soy nuevo en lo que se refiere a programacion web (html, js, php, jquery ) estoy aprendiendo de forma autodidacta leyendo manuales viendo tutoriales y visitando este foro bueno tengo una duda y que no he podido resolver debido a mi escaso conocimiento estoy realizando un CRUD con jquery mi codigo es el siguiente

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
  6.     <link rel="stylesheet" type="text/css" href="lib/themes/metro/easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="lib/themes/icon.css">
  8.     <link rel="stylesheet" type="text/css" href="lib/themes/color.css">
  9.     <link rel="stylesheet" type="text/css" href="lib/demo.css">
  10.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
  11.     <script type="text/javascript" src="lib/jquery.easyui.min.js"></script>
  12. </head>
  13. <body>
  14.     <h2>Basic CRUD Application</h2>
  15.     <p>Click the buttons on datagrid toolbar to do crud actions.</p>
  16.     
  17.     <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
  18.     url="get_users.php"
  19.     toolbar="#toolbar" pagination="true"
  20.     rownumbers="true" fitColumns="true" singleSelect="true">
  21.     <thead>
  22.         <tr>
  23.             <th field="nombre" width="70">nombre</th>
  24.             <th field="lugar" width="70">lugar</th>
  25.             <th field="concepto" width="70">Concepto</th>
  26.             <th field="ident" width="70">ident</th>
  27.             <th field="servicio" width="70">servicio</th>
  28.             <th field="fecha" width="50">fecha</th>
  29.         </tr>
  30.     </thead>
  31. </table>
  32. <div id="toolbar">
  33.     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
  34.     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
  35.     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
  36. </div>
  37.  
  38. <div id="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
  39. closed="true" buttons="#dlg-buttons">
  40. <div class="ftitle">User Information</div>
  41. <form id="fm" method="post" novalidate>
  42.     <div class="fitem">
  43.         <label>Nombre:</label>
  44.         <input name="nombre" class="easyui-textbox" required="true">
  45.     </div>
  46.     <div class="fitem">
  47.         <label>Lugar:</label>
  48.         <input name="lugar" class="easyui-textbox" required="true">
  49.     </div>
  50.     <div class="fitem">
  51.         <label>Concepto:</label>
  52.         <input name="concepto" class="easyui-textbox">
  53.     </div>
  54.     <div class="fitem">
  55.         <label>Email:</label>
  56.         <input name="ident" class="easyui-textbox" validType="date">
  57.     </div>
  58.     <div class="fitem">
  59.     <label>Servicio:</label>
  60.     <input  name="servicio" class="easyui-combobox" data-options="
  61.     valueField: 'label',
  62.     textField: 'value',
  63.     data: [{
  64.     label: 'compra',
  65.     value: 'compra'
  66.      },{
  67.      label: 'venta',
  68.      value: 'venta'
  69.      },{
  70.      label: 'renta',
  71.      value: 'renta'
  72.      }]" />
  73.      </div>
  74.      <div class="fitem">
  75.         <label>FECHA:</label>
  76.         <input name="fecha" class="easyui-datebox" validType="date">
  77.     </div>
  78.   </form>
  79. </div>
  80. <div id="dlg-buttons">
  81.     <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
  82.     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
  83. </div>
  84. <script type="text/javascript">
  85.     var url;
  86.  
  87.     function newUser(){
  88.         $('#dlg').dialog('open').dialog('setTitle','New User');
  89.         $('#fm').form('clear');
  90.         url = 'save_user.php';
  91.     }
  92.     function editUser(){
  93.         var row = $('#dg').datagrid('getSelected');
  94.         if (row){
  95.             $('#dlg').dialog('open').dialog('setTitle','Edit User');
  96.             $('#fm').form('load',row);
  97.             url = 'update_user.php?id='+row.id;
  98.         }
  99.     }
  100.     function saveUser(){
  101.         $('#fm').form('submit',{
  102.             url: url,
  103.             onSubmit: function(){
  104.                 return $(this).form('validate');
  105.             },
  106.             success: function(result){
  107.                 var result = eval('('+result+')');
  108.                 if (result.errorMsg){
  109.                     $.messager.show({
  110.                         title: 'Error',
  111.                         msg: result.errorMsg
  112.                     });
  113.                 } else {
  114.                         $('#dlg').dialog('close');      // close the dialog
  115.                         $('#dg').datagrid('reload');    // reload the user data
  116.                     }
  117.                 }
  118.             });
  119.     }
  120.     function destroyUser(){
  121.         var row = $('#dg').datagrid('getSelected');
  122.         if (row){
  123.             $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
  124.                 if (r){
  125.                     $.post('destroy_user.php',{id:row.id},function(result){
  126.                         if (result.success){
  127.                                 $('#dg').datagrid('reload');    // reload the user data
  128.                             } else {
  129.                                 $.messager.show({   // show error message
  130.                                     title: 'Error',
  131.                                     msg: result.errorMsg
  132.                                 });
  133.                             }
  134.                         },'json');
  135.                 }
  136.             });
  137.         }
  138.     }
  139.  
  140. </script>
  141. <style type="text/css">
  142.     #fm{
  143.         margin:0;
  144.         padding:10px 30px;
  145.     }
  146.     .ftitle{
  147.         font-size:14px;
  148.         font-weight:bold;
  149.         padding:5px 0;
  150.         margin-bottom:10px;
  151.         border-bottom:1px solid #ccc;
  152.     }
  153.     .fitem{
  154.         margin-bottom:5px;
  155.     }
  156.     .fitem label{
  157.         display:inline-block;
  158.         width:80px;
  159.     }
  160.     .fitem input{
  161.         width:160px;
  162.     }
  163. </style>
  164. </body>
  165. </html>

tengo un campo date en my base y ocupo un datebox para ingresar la fecha pero no he podido validarlo ni tampoco y podido hacer que cuando me carge los datos para editar me tome este formato "dd-mm-YYYY" ya que me toma este formato "mm-dd-YYYY" de antemano agradecere cualquier opinion o sugerencia de antemano muchas gracias