Validar y dar formato a Datebox jquery

aedsistema · #1 (**permalink**) 13/04/2015, 15:58

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<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="lib/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="lib/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="lib/themes/color.css">
    <link rel="stylesheet" type="text/css" href="lib/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="lib/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic CRUD Application</h2>
    <p>Click the buttons on datagrid toolbar to do crud actions.</p>
    
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
    url="get_users.php"
    toolbar="#toolbar" pagination="true"
    rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="nombre" width="70">nombre</th>
            <th field="lugar" width="70">lugar</th>
            <th field="concepto" width="70">Concepto</th>
            <th field="ident" width="70">ident</th>
            <th field="servicio" width="70">servicio</th>
            <th field="fecha" width="50">fecha</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>
 
<div id="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
    <div class="fitem">
        <label>Nombre:</label>
        <input name="nombre" class="easyui-textbox" required="true">
    </div>
    <div class="fitem">
        <label>Lugar:</label>
        <input name="lugar" class="easyui-textbox" required="true">
    </div>
    <div class="fitem">
        <label>Concepto:</label>
        <input name="concepto" class="easyui-textbox">
    </div>
    <div class="fitem">
        <label>Email:</label>
        <input name="ident" class="easyui-textbox" validType="date">
    </div>
    <div class="fitem">
    <label>Servicio:</label>
    <input  name="servicio" class="easyui-combobox" data-options="
    valueField: 'label',
    textField: 'value',
    data: [{
    label: 'compra',
    value: 'compra'
     },{
     label: 'venta',
     value: 'venta'
     },{
     label: 'renta',
     value: 'renta'
     }]" />
     </div>
     <div class="fitem">
        <label>FECHA:</label>
        <input name="fecha" class="easyui-datebox" validType="date">
    </div>
  </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
<script type="text/javascript">
    var url;
 
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#fm').form('clear');
        url = 'save_user.php';
    }
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','Edit User');
            $('#fm').form('load',row);
            url = 'update_user.php?id='+row.id;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                        $('#dlg').dialog('close');      // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    }
                }
            });
    }
    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                if (r){
                    $.post('destroy_user.php',{id:row.id},function(result){
                        if (result.success){
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({   // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        },'json');
                }
            });
        }
    }
 
</script>
<style type="text/css">
    #fm{
        margin:0;
        padding:10px 30px;
    }
    .ftitle{
        font-size:14px;
        font-weight:bold;
        padding:5px 0;
        margin-bottom:10px;
        border-bottom:1px solid #ccc;
    }
    .fitem{
        margin-bottom:5px;
    }
    .fitem label{
        display:inline-block;
        width:80px;
    }
    .fitem input{
        width:160px;
    }
</style>
</body>
</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

aedsistema · #2 (**permalink**) 13/04/2015, 19:33

he intentado darle formato con este codigo

Código Javascript:

Ver original<script type="text/javascript">
        function myformatter(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
        }
        function myparser(s){
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0],10);
            var m = parseInt(ss[1],10);
            var d = parseInt(ss[2],10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                return new Date(y,m-1,d);
            } else {
                return new Date();
            }
        }
    </script>

funciona pero a la hora de guardar simplemente no hace nada mi formulario se queda como si no se realizara ninguna accion

diurno10 · #3 (**permalink**) 14/04/2015, 06:20

para la carga de datos, yo lo haria con php y que te muestre la fecha con el formato que vos quieras, algo asi

Código PHP:

Ver original<input  type="text" value="<?php echo date("d-m-Y", strtotime($originalDate))?>" />

Luego para validarlo, nose si estas utilizando algun plugin o lo haces a mano.

aedsistema · #4 (**permalink**) 14/04/2015, 10:03

hola diurno10 gracias por tomarte la molestia de leer mi post te comento pero el detalle con lo que me comentas es que yo estoy utilizando un

Código HTML:

Ver originalclass="easyui-datebox"

de jquery y al utilizar datebox el formato como me lo mensionas no funciona , con este código si modifica el formato orginal que trae por defecto datebox

Código HTML:

Ver original1.<script type="text/javascript">
 
2.        function myformatter(date){
 
3.            var y = date.getFullYear();
 
4.            var m = date.getMonth()+1;
 
5.            var d = date.getDate();
 
6.            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
 
7.        }
 
8.        function myparser(s){
 
9.            if (!s) return new Date();
 
10.            var ss = (s.split('-'));
 
11.            var y = parseInt(ss[0],10);
 
12.            var m = parseInt(ss[1],10);
 
13.            var d = parseInt(ss[2],10);
 
14.            if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
 
15.                return new Date(y,m-1,d);
 
16.            } else {
 
17.                return new Date();
 
18.            }
 
19.        }
 
20.    </script>

pero el detalle que a la hora de ingresar mis datos simplemente se queda pasmado mi formulario de jquery, pero agradezco mucho tu interés en mi tema gracias

macajoda · #5 (**permalink**) 06/07/2015, 15:11

Yo pude solucionarlo colocando este escrip
<script type="text/javascript">
//Formatear el datebox Año/Mes/Dia
$('#Fecha').datebox({
value: (new Date().toString('yyyy-MMM-dd')), /* Date.js toString function to convert date into format that is being used by datebox. */
formatter : function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
},
parser : function(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
});

function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}

function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
</script>