Verificador de horário para checkbox/radio

[Stalin Nunes 0]

Olá pessoal tudo bem?

 

Preciso de uma ajuda com um checkbox simples, mas para mim está sendo o maior desafio pensar em como desenvolvê-lo:

 

Tenho três botões radio: Manhã (09:00h/12:00h) - Tarde (12:00h/17:00) - Noite (17:00/++...)

e um checkbox: Urgente

 

Queria uma função que verificasse o nosso horário e ao clicar no período escolhido fosse marcado urgente.

Por exemplo:

 

- Sistema de solicitação de atendimento.

 

- Trabalho com um suporte em horário comercial, meu horário é das 9 às 18h.

 

- Quando alguém selecionar o horário "Manhã" que gostaria de ser atendido e ainda fosse manhã (9h - 12h) o checkbox "Urgente" fosse marcado.

 

- Também assim com o horário "Tarde".

 

- Quando alguém selecionar o horário "Noite" sempre marcar "Urgente". (isso eu até que consegui)

 

- Quando alguém selecionar para a data de "Hoje" nos critérios acima, fosse marcado "Urgente". (Porém, acredito que se o código verificar o horário atual com o horário definido para os radios dando igualdade na data não irá complicar tanto)

 

- Se fosse selecionada uma data futura (dia seguinte) o checkbox Urgente não fosse marcado.

 

 

 

Eu sei que é bem complicado da forma que estou pedindo, mas se já estou correndo atrás de ajuda é porque não sou tão bom assim como vocês. (Tento pensar simples mas não consigo haha)

 

 

Segue uma cópia do meu código, com algumas tentativas com o código comentado:

Uso datepick para o calendário...

 

JavaScript

</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!--necessario-->
<script type="text/javascript" src="js/jquery.mask.min.js"></script> <!--necessario-->
<script type="text/javascript" src="js/jquery.charcounter.js"></script> <!--necessario-->
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <!--necessario-->

<script type="text/javascript">

jQuery(function($){
$('#txtTelefone').mask("(99)9999-99999").focusout(function(){
    var phone, element;
    element = $(this);
    element.unmask();
    phone = element.val().replace(/\D/g, '');
    if(phone.length > 10) {
        element.mask("(99)99999-9999");
    } else {
        element.mask("(99)9999-99999");
    }
}).trigger('focusout'); //MASCARA DE TELEFONE
$("#date").mask("99/99/9999",{placeholder:" "}); //MASCARA DE DATA
});

	function d(id){ //getelementbyid
	return document.getElementById(id);
	}	
	function n(name){ //getelementbytagname
	return document.getElementsByTagName(name);
	}	
	
	function myFunction()
{
var e = new Date();
var x = document.getElementById("date");
x.innerHTML=e.getDay();
}
	

 
 function countChar_Servico(val){ //PARA LIMITAR CARACTERES - necessário jquery para funcionar */
	var len = val.value.length;
	if (len >= 500) {
	val.value = val.value.substring(0, 500);
	$('#problema').text(0 + " caractere restante");
	}else {
	$('#charNum_Servico').text(500 - len + " caracteres restantes");
	}
};

function valida(){
			var nome = document.frm.txtNome.value;
			var email = document.querySelector("#txtEmail").value;
			var telefone = document.querySelector("#txtTelefone").value;
			var mail = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);
			var tel = new RegExp (/^\(11\)9?[2-9]{1}[0-9]{3}-[0-9]{4}|\([1-9][0-9]\)[2-9]{1}[0-9]{3}-[0-9]{4}$/); //- para telefones

	if(nome==""){
	alert("Informe seu Nome!");
	document.frm.txtNome.focus();
	}
	else if(email==""){	
	alert("Informe seu e-mail!");			
	document.frm.txtEmail.focus();
	return false;
	}
	else if(telefone==""){
	alert("Informe seu Telefone!");	
	document.frm.txtTelefone.focus();
	return false;
	}

	if(mail.test(email)){			
		}else{
		alert("Email Inválido!");
		document.frm.txtEmail.focus();
		return false;
		}
	if(tel.test(telefone)){
		alert("Sua solicitação foi enviada para agendamento.\n \nTicket:<?echo $ticket['ticket']+1; ?>");
		document.frm.submit();
		return true;
		}else{
		alert("Telefone Inválido!");
		return false;
		document.frm.txtTelefone.focus();
		}
		}

	
	function verifica_feriado(){
			var ano;
			ano = $("#date").val();
			ano =  ano.substr(6);
			PrintDatas(ano);
			$('input[name=chkferiado]').attr('checked', false); //Desabilita
			if (DataCarnaval == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataPascoa == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataCorpusChristi == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataAnoNovo == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataAnivSAO == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataTiradentes == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataTrabalhador == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataRevolucao == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataIndependencia == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataAparecida == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataTodosOsSantos == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}		
			if (DataProcramlacao == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataConNegra == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
			if (DataNatal == $("#date").val()){
			$('input[name=chkferiado]').attr('checked', true);
			}
}
	$("#date").change(function(){
		var date = $("#date").datepicker('getDate');
        var dayOfWeek = date.getUTCDay();
        $('input[name=urgente]').attr('checked', false);
	    if (dayOfWeek  === 0) {
        $('input[name=urgente]').attr('checked', true);
        } 
		if (dayOfWeek  === 6) {
        $('input[name=urgente]').attr('checked', true);
        }
		verifica_feriado();
	});	
		
	$.datepicker.regional['pt-BR'] = {
		closeText: 'Fechar',
		prevText: '<Anterior',
		nextText: 'Próximo>',
		currentText: 'Hoje',
		monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
		'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
		monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
		'Jul','Ago','Set','Out','Nov','Dez'],
		dayNames: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
		dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
		dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
		weekHeader: 'Sm',
		dateFormat: 'dd/mm/yy',
		firstDay: 0,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};	
	$.datepicker.setDefaults($.datepicker.regional['pt-BR']);

	$(function() { //calendario
	$('#date').datepick();
	$('#inlineDatepicker').datepick({onSelect: showDate});
});

function showDate(date) {
	alert('The date chosen is ' + date);
}

//função checar se for noite como urgente
function checarur(){
	document.frm.urgente.checked = true;
	}
	
	
/* if(document.getElementByID("horarion").checked == true);
{
document.getElementByID("urgente").checked = true
}
}

function dchecarur(){
if(document.getElementByID("horarion").checked == false);
{
document.getElementByID("urgente").checked = false
}}*/


//função carregar checarur
	/*window.onload=function(){
	dchecarur();
}*/
		</script>

HTML

</script>
<link type="text/css" href="css/jquery.datepick.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>	
	

<body>
<font face="tahoma" size="3">
<br>
<b>Solicitação de agendamento de atendimento.</b>
<form name="frm" id="frm" method="post" action="concluido2.php">
<table border="0">


<tr><td>
Nome: 
</td><td> </td><td><input type="text" name="txtNome" id="txtNome" size="85" value=""></td><td></td></tr>
<tr><td>
E-mail:
</td><td></td><td><input type="text" name="txtEmail" id="txtEmail" value="" size="85"></td><td> </td></tr>
<tr><td>
  Cliente:</td><td>Selecione o cliente</td><td>   <select id="txtCliente" name="txtCliente">
    <option value="Cliente 1">Cliente 1</option>
    
</select>       Telefone: <input type="text" name="txtTelefone" id="txtTelefone" size="38" maxlength="16">
    
</td><td></td>
<td> </td></tr>
<tr>
</td></tr>
<tr><td>
Custo:
</td><td> </td><td><input type="radio" name="custo" id="custo" value="local" checked>
  Local
    <input type="radio" name="custo" id="custo" value="Local">
    Contato:
  <input type="text" name="contato" id="contato" size="58"></td><td></td></tr>
<tr><td>
Data:
</td><td></td><td><input type="text" name="date"  id="date" size="23" value="<?php echo $datadeamanha; ?>" maxlength="30">
<font size="2">(Data e hora para o agendamento do atendimento)</font></td></tr>
<tr>
<td>
Horário:
</td><td> </td><td><div align="justify">
  <input type="radio" name="horario" id="horariom" value="Manhã 09:00 - 13:00 ">
  09:00-13:00    |
  <input type="radio" name="horario" id="horariot" value="Tarde 13:00 - 17:00">
  13:00-17:00     |
  <input type="radio" name="horario" id="horarion" value="Noite" onClick="checarur()">
  Noite                
  <input type="checkbox" name="urgente" id="urgente" value="- Urgente">
    <?/* ($dataatual != $datadeamanha) // Verifica se a data está correta
			{
				echo "<input type='checkbox' name='urgente' id='urgente' value='Urgente'>";  //urgente marcado
			}else{
				echo "<input type='checkbox' name='urgente' id='urgente' value='Urgente' checked>"; //urgente desmarcado
				// Valor Correto Reajustado
			}
		*/?>
  
  <b>Urgente </b></div></td><td></td></tr>
</table>
<table border="0">
<td>
Solicitação:<BR>
</td><td></td></tr><tr>
<td>
<textarea name="problema" id="problema" rows="6" cols="77" onkeyup="countChar_Servico(this)"></textarea><br><div id="charNum_Servico">500 caracteres restantes</div>
</td></tr>
<tr><td>
<!-- Observação:<BR>
</td><td></td></tr>
<tr><td>
<textarea name="observacao" id="observacao" rows="6" cols="76" onkeyup="countChar_Servico(this)"></textarea>
</td><td></td></tr>-->
</font>
</table>
<input type="button" name="confirmar" value="CONFIRMAR" onClick="valida();">

[Anderson Danilo 43]

Olá Stalin,

 

Qual a sua dificuldade?

- Criar um objeto Date a partir da data selecionada pelo usuário?

- Verificar o período (manhã/tarde/noite) de um objeto Date?

 

http://www.w3schools.com/jsref/jsref_obj_date.asp