IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

paramétrer un date time picker


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Femme Profil pro
    Etudiante
    Inscrit en
    Avril 2012
    Messages
    203
    Détails du profil
    Informations personnelles :
    Sexe : Femme

    Informations professionnelles :
    Activité : Etudiante

    Informations forums :
    Inscription : Avril 2012
    Messages : 203
    Par défaut paramétrer un date time picker
    Bonjour à tous,

    J’utilise un date et time picker dans un input dans mon formulaire ça fonctionne parfaitement
    pour cette format yyyy-MM-dd hh:mm:ss

    en effet j'ai besoin de cette calendrier (mais juste date piker sans la partie en rouge) pour un autre input et dans le même formulaire

    j'ai essayé de modifier le code js mais sans resultat : ça provoque un chevauchement entre les deux calendrier

    puisque je suis nulle en javascript
    est ce que vous pouvez m'aider à modifier le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    // Title: Timestamp picker
    // Description: See the demo at url
    // URL: http://us.geocities.com/tspicker/
    // Script featured on: http://javascriptkit.com/script/script2/timestamp.shtml
    // Version: 1.0
    // Date: 12-05-2001 (mm-dd-yyyy)
    // Author: Denis Gritcyuk <denis@softcomplex.com>; <tspicker@yahoo.com>
    // Notes: Permission given to use this script in any kind of applications if
    //    header lines are left unchanged. Feel free to contact the author
    //    for feature requests and/or donations
     
    function show_calendar(str_target, str_datetime) {
    	var arr_months = ["January", "February", "March", "April", "May", "June",
    		"July", "August", "September", "October", "November", "December"];
    	var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
    	var n_weekstart = 1; // day week starts from (normally 0 or 1)
     
    	var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
    	var dt_prev_month = new Date(dt_datetime);
    	dt_prev_month.setMonth(dt_datetime.getMonth()-1);
    	var dt_next_month = new Date(dt_datetime);
    	dt_next_month.setMonth(dt_datetime.getMonth()+1);
    	var dt_firstday = new Date(dt_datetime);
    	dt_firstday.setDate(1);
    	dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
    	var dt_lastday = new Date(dt_next_month);
    	dt_lastday.setDate(0);
     
    	// html generation (feel free to tune it for your particular application)
    	// print calendar header
    	var str_buffer = new String (
    		"<html>\n"+
    		"<head>\n"+
    		"	<title>Calendar</title>\n"+
    		"</head>\n"+
    		"<body bgcolor=\"White\">\n"+
    		"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
    		"<tr><td bgcolor=\"#4682B4\">\n"+
    		"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
    		"<tr>\n	<td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
    		str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+
    		"<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"previous month\"></a></td>\n"+
    		"	<td bgcolor=\"#4682B4\" colspan=\"5\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
    		+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
    		"	<td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
    		+str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+
    		"<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"next month\"></a></td>\n</tr>\n"
    	);
     
    	var dt_current_day = new Date(dt_firstday);
    	// print weekdays titles
    	str_buffer += "<tr>\n";
    	for (var n=0; n<7; n++)
    		str_buffer += "	<td bgcolor=\"#87CEFA\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
    		week_days[(n_weekstart+n)%7]+"</font></td>\n";
    	// print calendar table
    	str_buffer += "</tr>\n";
    	while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
    		dt_current_day.getMonth() == dt_firstday.getMonth()) {
    		// print row heder
    		str_buffer += "<tr>\n";
    		for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
    				if (dt_current_day.getDate() == dt_datetime.getDate() &&
    					dt_current_day.getMonth() == dt_datetime.getMonth())
    					// print current date
    					str_buffer += "	<td bgcolor=\"#FFB6C1\" align=\"right\">";
    				else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
    					// weekend days
    					str_buffer += "	<td bgcolor=\"#DBEAF5\" align=\"right\">";
    				else
    					// print working days of current month
    					str_buffer += "	<td bgcolor=\"white\" align=\"right\">";
     
    				if (dt_current_day.getMonth() == dt_datetime.getMonth())
    					// print days of current month
    					str_buffer += "<a href=\"javascript:window.opener."+str_target+
    					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    					"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
    				else 
    					// print days of other months
    					str_buffer += "<a href=\"javascript:window.opener."+str_target+
    					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    					"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
    				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
    				dt_current_day.setDate(dt_current_day.getDate()+1);
    		}
    		// print row footer
    		str_buffer += "</tr>\n";
    	}
    	// print calendar footer
    	str_buffer +=
    		"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
    		"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
    		"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
    		"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
    		"</table>\n" +
    		"</tr>\n</td>\n</table>\n" +
    		"</body>\n" +
    		"</html>\n";
     
    	var vWinCal = window.open("", "Calendar", 
    		"width=200,height=215,status=no,resizable=yes,top=400,right=10");
    	vWinCal.opener = self;
    	var calc_doc = vWinCal.document;
    	calc_doc.write (str_buffer);
    	calc_doc.close();
    }
    // datetime parsing and formatting routimes. modify them if you wish other datetime format
    function str2dt (str_datetime) {
    	var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
    	if (!re_date.exec(str_datetime))
    		return alert("Invalid Datetime format: "+ str_datetime);
    	return (new Date ( RegExp.$1, RegExp.$2-1,RegExp.$3, RegExp.$4, RegExp.$5, RegExp.$6));
    }
    function dt2dtstr (dt_datetime) {
           var d  = dt_datetime.getDate();
           var day = (d < 10) ? '0' + d : d;
           var m  = (dt_datetime.getMonth()+1);
           var month = (m < 10) ? '0' + m : m;
    	return (new String (
    			dt_datetime.getFullYear()+"-"+month+"-"+day+" "));
    }
    function dt2tmstr (dt_datetime) {
    	   var s  = dt_datetime.getSeconds();
    	   var second = (s < 10) ? '0' + s : s;
    	   var mn  = dt_datetime.getMinutes();
           var month = (mn < 10) ? '0' + mn : mn;
           var h  = dt_datetime.getHours();
           var hour = (h < 10) ? '0' + h : h;
    	return (new String (
    			hour+":"+month+":"+second));
    }

  2. #2
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    Peut être en faisant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    function str2dt (str_datetime) {
    	var re_date = /^(\d+)\-(\d+)\-(\d+)$/;
    	if (!re_date.exec(str_datetime))
    		return alert("Invalid Datetime format: "+ str_datetime);
    	return (new Date ( RegExp.$1, RegExp.$2-1,RegExp.$3));
    }
    Je garantie rien, j'ai pas testé.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Date Time Picker erreur d'affichage
    Par wil4linux dans le forum ASP
    Réponses: 14
    Dernier message: 19/09/2006, 14h11
  2. Calendrier - Date Time Picker Access 2003 SP2
    Par odelayen dans le forum Access
    Réponses: 2
    Dernier message: 01/09/2006, 12h09
  3. Date Time Picker
    Par jlsmith dans le forum MFC
    Réponses: 1
    Dernier message: 15/07/2006, 12h09
  4. Controle Date Time Picker en mode 24h
    Par MarieMtl dans le forum MFC
    Réponses: 1
    Dernier message: 24/11/2005, 16h38
  5. Date time picker
    Par Steph4 dans le forum MFC
    Réponses: 3
    Dernier message: 01/03/2005, 14h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo