제이쿼리 질문 데이터피커로 날짜-날짜 값 표기 방법

 안녕하세요 상기 사이트(Kborad 수정 중)에서 데이터픽커라는 제이쿼리를 스플릿으로 나눠서 

차후 1000*60*60*24 로 시간단위로 변환하여 

인풋 박사의 datepicker1 벨류와 인풋박스의 datepicker2의 시간 차이로 

sell3 인풋에다가 가격을 표기하려고 합니다. (가격은 시간 당 천원)

 

헌데 현재 보시는 바와 같이 ..
      var document.getElementById("datepicker1").value.split("-"); 

변수 datepicker1  값을 스플릿을 쪼갠 내용을 표기하려하는데 나타나질 않네여..

어떻게 해야할까요..? 

 

<script type="text/javascript"> 

var dateArray = document.getElementById("datepicker1").value;

function sum()

{

 if(document.getElementById("datepicker1").value && document.getElementById("datepicker2").value){

  document.getElementById("sell3").value = var document.getElementById("datepicker1").value.split("-");

 }

}

</script>

 

 

    <label>

        <span>프로젝트 기간 :</span>

    <input type="text" id="datepicker1" onkeyup="sum();" placeholder="&#xf073; 시작날짜" name="kboard_option_startdate" value="<?php echo $content->startdate?>"> ~ <?php echo "&nbsp;&nbsp;"; ?>

 

<input type="text" id="datepicker2" onkeyup="sum();" placeholder="&#xf073; 종료날짜" name="kboard_option_enddate" value="<?php echo $content->enddate?>">

 

<input type="hidden" id="calculated" name="kboard_option_datedifference" value="<?php echo $content->datedifference?>">

 

 </label> 

 

 

<label><div>

        <span>프로젝트 기간 :</span>

<input type="text" name="sell3" id="sell3" >

 </label> 

 

</div>

 

 

 

고수님의 소중한 답변 감사히 받겠습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    올려주신 코드에 문제가 있는 듯합니다.

    sum() 함수를 아래의 코드로 적용해보시겠어요?

    function sum(){
    	if(document.getElementById("datepicker1").value && document.getElementById("datepicker2").value){
    		document.getElementById("sell3").value = document.getElementById("datepicker1").value.split("-");
    	}
    }

    고맙습니다.

  • 안녕하세요~^^

     

    말씀해주신 코드로 하니까 변수값이 먹힙니다. 감사합니다.~

    하지만 제가 최종적으로 표현할 식은

    =========================================================================================

    <script type="text/javascript"> 


    function sum()
    {
    var a1 = document.getElementById("datepicker1").value, // a1변수에 id값이 datepicker1인 인풋값을 넣기
            a2 = document.getElementById("datepicker2").value; 


    var dateArray = a1.split("-");  // dateArray변수에 a1변수 값을 - 기준으로 쪼개기 
      
    var dateObj = new Date(dateArray[0], Number(dateArray[1])-1, dateArray[2]);  // 배열이 된 dateArray변수 값을 나열하기 가운데 -1인 이유는 자바스크립트 기준 월단위는 0으로 시작하기 때문

    var dateArray2 = a2.split("-");  
      
    var dateObj2 = new Date(dateArray[0], Number(dateArray[1])-1, dateArray[2]);  
      
    var betweenDay = (dateObj.getTime() - dateObj2.getTime())/1000/60/60/24;    // gettime으로 나열된 변수값을 밀러세컨드 단위로 변환하고 /1000/60/60/24; 일단위 차이로 만든다.
      

     if(a1 && a2){
      document.getElementById("sell3").value = betweenDay;     // 최종적으로 두값의 차이 일 을 마지막 sell3 인풋값으로 넣는다
     }
    }
    </script>

    =========================================================================================

    이렇습니다. 

    데이터값을 밀리리터값으로 치환한 후 datepicker2 - datepicker1 의 시간 차이를 * 비용으로 표현하고 싶습니다. 

    근데 ..여전히 sell3 셀값에는 입력이 되질 않네여 이유 혹시 아시나요..?? 

     

    인풋박스 datepicker2, datepicker2에  숫자를 강제로 넣으면 sell값이 적용되는데 ... 이상합니다. ㅠㅠ 

  • 변수들을 잘 확인해보셔야 할 듯합니다.

    dateObj2 변수에는 dateArray2로 적용해주셔야 할 듯합니다.

    아래의 코드를 확인해보시겠어요?

    function sum(){
    	var a1 = document.getElementById("datepicker1").value; // a1변수에 id값이 datepicker1인 인풋값을 넣기
    	var a2 = document.getElementById("datepicker2").value; 
    	var dateArray = a1.split("-");  // dateArray변수에 a1변수 값을 - 기준으로 쪼개기 
    	var dateObj = new Date(dateArray[0], Number(dateArray[1])-1, dateArray[2]);  // 배열이 된 dateArray변수 값을 나열하기 가운데 -1인 이유는 자바스크립트 기준 월단위는 0으로 시작하기 때문
    	var dateArray2 = a2.split("-");  
    	var dateObj2 = new Date(dateArray2[0], Number(dateArray2[1])-1, dateArray2[2]);  
    	var betweenDay = (dateObj2.getTime() - dateObj.getTime()) / 1000 / 60 / 60 / 24;    // gettime으로 나열된 변수값을 밀러세컨드 단위로 변환하고 /1000/60/60/24; 일단위 차이로 만든다.
    
    	if(betweenDay >= 0 && a1 && a2){
    		document.getElementById("sell3").value = betweenDay;     // 최종적으로 두값의 차이 일 을 마지막 sell3 인풋값으로 넣는다
    	}
    }

     

    변수의 값들이 제대로 입력됐는지 확인하시려면

    아래의 코드로 적용해보시겠어요?

    function sum(){
    	var a1 = document.getElementById("datepicker1").value; // a1변수에 id값이 datepicker1인 인풋값을 넣기
    	var a2 = document.getElementById("datepicker2").value; 
    	var dateArray = a1.split("-");  // dateArray변수에 a1변수 값을 - 기준으로 쪼개기 
    	var dateObj = new Date(dateArray[0], Number(dateArray[1])-1, dateArray[2]);  // 배열이 된 dateArray변수 값을 나열하기 가운데 -1인 이유는 자바스크립트 기준 월단위는 0으로 시작하기 때문
    	var dateArray2 = a2.split("-");  
    	var dateObj2 = new Date(dateArray2[0], Number(dateArray2[1])-1, dateArray2[2]);  
    	var betweenDay = (dateObj2.getTime() - dateObj.getTime()) / 1000 / 60 / 60 / 24;    // gettime으로 나열된 변수값을 밀러세컨드 단위로 변환하고 /1000/60/60/24; 일단위 차이로 만든다.
    
    	if(betweenDay >= 0 && a1 && a2){
    		document.getElementById("sell3").value = betweenDay;     // 최종적으로 두값의 차이 일 을 마지막 sell3 인풋값으로 넣는다
    	}
    
    	console.log('a1 : ' + a1);
    	console.log('a2 : ' + a2);
    	console.log('dateArray : ' + dateArray);
    	console.log('dateObj : ' + dateObj);
    	console.log('dateArray2 : ' + dateArray2);
    	console.log('betweenDay : ' + betweenDay);
    }

    테스트 시에 위의 코드처럼 적용하시고 onkeyup 이벤트가 발생하면

    크롬 브라우저의 개발자 도구(F12키) -> 콘솔(Console) 화면에 표시됩니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기